Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • John Collins 8 posts 37 karma points
    Dec 18, 2013 @ 22:12
    John Collins
    0

    Displaying Images from Multiple Media Picker

    Hi,

    I'm not sure what I'm missing here, but I have a simple page where I have a multiple media picker and I'm just trying to display the images. The.Path property just returns -1,1062

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    @{
        var ms = ApplicationContext.Current.Services.MediaService;
    }
    
    <section id="@CurrentPage.Name" class="one">
        <div class="container">
            <header>
                <h2>
                    @Html.Raw(Umbraco.ReplaceLineBreaksForHtml(CurrentPage.PictureHeader))
                </h2>
            </header>
            @{
    
                char[] splitChar = { ',' };
                string[] ids = CurrentPage.Pictures.ToString().Split(splitChar, StringSplitOptions.RemoveEmptyEntries);
    
                foreach (string id in ids )
                {
                    int imageId = int.Parse(id);
                    @ms.GetById(imageId).Path;
                }
            }
        </div>
    </section>
        

     

    I can't seem to get the image path returned. I tried getting the .umbracoFile property, but that's not available. I see it in the xml though if I write out the @ms.GetById(imageId).ToXml();

    <Image id="1062" parentID="-1" level="1" creatorID="0" sortOrder="0" createDate="2013-12-18T12:08:04" updateDate="2013-12-18T12:08:04" nodeName="Pic.png" urlName="picpng" path="-1,1062" isDoc="" nodeType="1032" writerName="admin" writerID="0" version="a53dbbee-5fc5-4455-ad0c-5af6134512ca" template="0" nodeTypeAlias="Image">  <umbracoFile><![CDATA[/media/1002/Pic.png]]></umbracoFile>  <umbracoWidth><![CDATA[301]]></umbracoWidth>  <umbracoHeight><![CDATA[232]]></umbracoHeight>  <umbracoBytes><![CDATA[126549]]></umbracoBytes>  <umbracoExtension><![CDATA[png]]></umbracoExtension>< /Image>

     

    I'm surprised this is not easier to do and I have to jump thru all these hoops to get there.

  • John Collins 8 posts 37 karma points
    Dec 18, 2013 @ 22:26
    John Collins
    0

    I guess I should have tried a 10 min more...this seems to work for me.

               foreach (string id in ids )
                {
                    var dynamicMediaItem = Umbraco.Media(id);
                    @dynamicMediaItem.umbracoFile;
                }
    
  • Jeavon Leopold 3010 posts 13225 karma points MVP 8x admin c-trib
    Dec 18, 2013 @ 23:15
    Jeavon Leopold
    0

    Hi John, are you using Umbraco v7?

    Jeavon

  • Jeavon Leopold 3010 posts 13225 karma points MVP 8x admin c-trib
    Dec 18, 2013 @ 23:24
    Jeavon Leopold
    107

    Actually just realised you said multiple media picker so must be using v7.

    If you are using v7.0.1, then try this:

    @if (Model.Content.HasValue("Pictures"))
    {
        var imagesList = Model.Content.GetPropertyValue<string>("Pictures").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
        var imagesCollection = Umbraco.TypedMedia(imagesList).Where(x => x != null);
    
        foreach (var imageItem in imagesCollection)
            {      
                <img src="@imageItem.Url" />      
            }                                                               
    }
    

    Jeavon

  • John Collins 8 posts 37 karma points
    Dec 19, 2013 @ 00:07
    John Collins
    0

    Thanks Jaevon,

    I'll give that a try if it works on 7.0.0

    I tried 7.0.1 and it doesn't seem to be ready for primetime yet.

    John

  • Jeavon Leopold 3010 posts 13225 karma points MVP 8x admin c-trib
    Dec 19, 2013 @ 00:21
    Jeavon Leopold
    0

    Hi John,

    It should work on v7.0.0 but there is a bug which will cause a YSOD if a picked image is then deleted from media, a fairly rare problem. This issue is fixed in v7.0.1 but there is also a workaround for v7.0.0 here

    What issues did you have with v7.0.1?

    Jeavon

  • John Collins 8 posts 37 karma points
    Dec 19, 2013 @ 00:52
    John Collins
    0

    Thanks Jeavon,

    I posted my issues here (look at the bottom post on the first page):

    http://our.umbraco.org/forum/umbraco-7/using-umbraco-7/46937-Umbraco-backend-701-not-working

     

  • Anders Schmidt 74 posts 205 karma points
    Apr 10, 2014 @ 15:40
    Anders Schmidt
    0

    My code displaying from multiple media picker:

    @if (Model.HasValue("caseImages"))
        {
    
            foreach (var item in Model.GetProperty("caseImages").Value.Split(','))
            {
                <img src="@Model.MediaById(@item).umbracoFile" alt="" />
            }
    
        }

     

  • Chris Randle 67 posts 181 karma points c-trib
    Jun 03, 2015 @ 13:07
    Chris Randle
    0

    Just for reference in case anyone else has this same issue - if you're using a service or class library and using an image cropper, you'll need to do something like this:

    int nodeId = 2374;
    var myHelper = new UmbracoHelper(UmbracoContext.Current);
    IPublishedContent node = myHelper.TypedContent(nodeId);   
    string url = node.GetPropertyValue<IPublishedContent>("image").GetPropertyValue<ImageCropDataSet>("umbracoFile")).Src;
    

    If you don't have an image cropper installed, you would adjust that last line to GetPropertyValue

  • pjz 9 posts 102 karma points
    Jun 03, 2018 @ 16:35
    pjz
    3

    For v7.10.x , When check the Pick multiple items of the Media Picker, you can do this to display the images:

     if (Model.Content.HasValue("Logos"))
    {
        var logoList = Model.Content.GetPropertyValue<List<IPublishedContent>>("Logos");
        foreach (var logo in logoList)
        {
            <img src="@logo.Url" alt= "@logo.Name logo" />
        }
    }
    
Please Sign in or register to post replies

Write your reply to:

Draft