how to allow the user to select a media image in a macro

Matthew Vines 11 posts 31 karma points

Jan 03, 2011 @ 00:44

how to allow the user to select a media image in a macro.

I've developed the following very simple .net user control macro.

GallerMacro.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="GalleryMacro.ascx.cs" Inherits="GalleryMacro" %>
<div id="gallery">
    <div class="third" id="text-panel">
      <%= GalleryText %>
    </div>
    <div class="third">
      <a rel="gallery" href="<%= Image1Path %>">
        <img src="<%= Image1Path %>" />
      </a>
    </div>
    <div class="third">
      <a rel="gallery" href="<%= Image2Path %>">
        <img src="<%= Image2Path %>" />
      </a>
    </div>
  </div>
  <div class="clear"></div>
  <div>
    <div class="eigth">
      <a rel="gallery" href="<%= Image3Path %>">
        <img src="<%= Image3Path %>" />
      </a>
    </div>
    <div class="eigth">
      <a rel="gallery" href="<%= Image4Path %>">
        <img src="<%= Image4Path %>" />
      </a>
    </div>
    <div class="eigth">
      <a rel="gallery" href="<%= Image5Path %>">
        <img src="<%= Image5Path %>" />
      </a>
    </div>
    <div class="eigth">
      <a rel="gallery" href="<%= Image6Path %>">
        <img src="<%= Image6Path %>" />
      </a>
    </div>
    <div class="eigth">
      <a rel="gallery" href="<%= Image7Path %>">
        <img src="<%= Image7Path %>" />
      </a>
    </div>
    <div class="eigth">
      <a rel="gallery" href="<%= Image8Path %>">
        <img src="<%= Image9Path %>" />
      </a>
    </div>
    <div class="eigth">
      <a rel="gallery" href="<%= Image9Path %>">
        <img src="<%= Image9Path %>" />
      </a>
    </div>
    <div class="eigth">
      <a rel="gallery" href="<%= Image10Path %>">
        <img src="<%= Image10Path %>" />
      </a>
    </div>
</div>

And GalleryMacro.ascx.cs

public partial class GalleryMacro : System.Web.UI.UserControl
{
    public string GalleryText { get; set; }
    public string Image1Path { get; set; }
    public string Image2Path { get; set; }
    public string Image3Path { get; set; }
    public string Image4Path { get; set; }
    public string Image5Path { get; set; }
    public string Image6Path { get; set; }
    public string Image7Path { get; set; }
    public string Image8Path { get; set; }
    public string Image9Path { get; set; }
    public string Image10Path { get; set; }
}

I have successfully copied this to my usercontrols directory, and bin directory, and set up a new macro in the developer section.

Notice that I have all my properties as strings. Listing Gallery description text, and then the paths to 10 images that will be used in the gallery. So my GalleryText property points to a macro parameter of type text. And all the ImageNPath parameters are of type currentMedia. As I want the user to select an image from their media repository.

Unfortunately, this is not working as I had expected. This macro produces the following output after being added to a page and selecting all 10 images.

<div id="gallery">
    <div class="third" id="text-panel">
      This is my galery text.
    </div>
    <div class="third">

      <a rel="gallery" href="1095">
        <img src="1095" />
      </a>
    </div>
    <div class="third">
      <a rel="gallery" href="1097">
        <img src="1097" />
      </a>
    </div>

  </div>
  <div class="clear"></div>
  <div>
    <div class="eigth">
      <a rel="gallery" href="1098">
        <img src="1098" />
      </a>
    </div>
    <div class="eigth">

      <a rel="gallery" href="1099">
        <img src="1099" />
      </a>
    </div>
    <div class="eigth">
      <a rel="gallery" href="1100">
        <img src="1100" />
      </a>
    </div>

    <div class="eigth">
      <a rel="gallery" href="1101">
        <img src="1101" />
      </a>
    </div>
    <div class="eigth">
      <a rel="gallery" href="1102">
        <img src="1102" />
      </a>

    </div>
    <div class="eigth">
      <a rel="gallery" href="1103">
        <img src="1104" />
      </a>
    </div>
    <div class="eigth">
      <a rel="gallery" href="1104">
        <img src="1104" />

      </a>
    </div>
    <div class="eigth">
      <a rel="gallery" href="1105">
        <img src="1105" />
      </a>
    </div>
</div>

Notice that the image paths are not paths at all, but rather, media item IDs I believe. So, my question is: How do I allow my user to select an image useing the media picker control, and get the path into a set location in my macro? I did not see a parameter type that will accomplish this the way I have it set up.

Thanks for your time.

Copy Link

Eran Meir 401 posts 543 karma points

Jan 03, 2011 @ 07:36

you need to set the path to media source

look at this

http://our.umbraco.org/forum/developers/api-questions/7993-Get-URL-of-media-file

Copy Link

skiltz 501 posts 701 karma points

Jan 03, 2011 @ 09:12

This is the code I use.

     public string GetImageUrlFromMediaNode(int MediaNodeID)
        {
            XPathNodeIterator x1 = umbraco.library.GetMedia(MediaNodeID, false);
            x1.MoveNext();

            string imgUrl = String.Empty;
            XPathNodeIterator x2 = x1.Current.Select("/Image/umbracoFile");
            x2.MoveNext();
            return x2.Current.Value; 
        }

Copy Link

Eran Meir 401 posts 543 karma points

Jan 03, 2011 @ 14:49

i didnt had a chance to play with XPathNodeIterator, but if you get the path of the file why don't you save it in a string object instead of XPathNodeIterator ?

Copy Link

Matthew Vines 11 posts 31 karma points

Jan 03, 2011 @ 19:37

Thanks skiltz that was exactly what I was looking for.

I dug around quite a bit for some documenation on Media. I couldn't even find how the xml is formatted post 4.5. Makes this a lot more difficult than it needs to be.

This is my updated code behind file for anyone who is curious. There were no changes to the ascx file.

using System.Xml.XPath;

public partial class GalleryMacro : System.Web.UI.UserControl
{
    public string GalleryText { get; set; }

    protected string Image1Path;
    private int _image1Id;
    public int Image1Id
    {
        get { return _image1Id; }
        set
        {
            _image1Id = value;
            Image1Path = GetImageUrlFromMediaNodeId(_image1Id);
        }
    }

    protected string Image2Path;
    private int _image2Id;
    public int Image2Id
    {
        get { return _image2Id; }
        set
        {
            _image2Id = value;
            Image2Path = GetImageUrlFromMediaNodeId(_image2Id);
        }
    }

    protected string Image3Path;
    private int _image3Id;
    public int Image3Id
    {
        get { return _image3Id; }
        set
        {
            _image3Id = value;
            Image3Path = GetImageUrlFromMediaNodeId(_image3Id);
        }
    }

    protected string Image4Path;
    private int _image4Id;
    public int Image4Id
    {
        get { return _image4Id; }
        set
        {
            _image4Id = value;
            Image4Path = GetImageUrlFromMediaNodeId(_image4Id);
        }
    }

    protected string Image5Path;
    private int _image5Id;
    public int Image5Id
    {
        get { return _image5Id; }
        set
        {
            _image5Id = value;
            Image5Path = GetImageUrlFromMediaNodeId(_image5Id);
        }
    }

    protected string Image6Path;
    private int _image6Id;
    public int Image6Id
    {
        get { return _image6Id; }
        set
        {
            _image6Id = value;
            Image6Path = GetImageUrlFromMediaNodeId(_image6Id);
        }
    }

    protected string Image7Path;
    private int _image7Id;
    public int Image7Id
    {
        get { return _image7Id; }
        set
        {
            _image7Id = value;
            Image7Path = GetImageUrlFromMediaNodeId(_image7Id);
        }
    }

    protected string Image8Path;
    private int _image8Id;
    public int Image8Id
    {
        get { return _image8Id; }
        set
        {
            _image8Id = value;
            Image8Path = GetImageUrlFromMediaNodeId(_image8Id);
        }
    }

    protected string Image9Path;
    private int _image9Id;
    public int Image9Id
    {
        get { return _image9Id; }
        set
        {
            _image9Id = value;
            Image9Path = GetImageUrlFromMediaNodeId(_image9Id);
        }
    }

    protected string Image10Path;
    private int _image10Id;
    public int Image10Id
    {
        get { return _image10Id; }
        set
        {
            _image10Id = value;
            Image10Path = GetImageUrlFromMediaNodeId(_image10Id);
        }
    }

    private string GetImageUrlFromMediaNodeId(int mediaNodeId)
    {
        XPathNodeIterator x1 = umbraco.library.GetMedia(mediaNodeId, false);
        x1.MoveNext();

        XPathNodeIterator x2 = x1.Current.Select("/Image/umbracoFile");
        x2.MoveNext();

        return x2.Current.Value;
    }
}

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

how to allow the user to select a media image in a macro.