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 3074 posts 13632 karma points MVP 11x admin c-trib
    Dec 18, 2013 @ 23:15
    Jeavon Leopold
    0

    Hi John, are you using Umbraco v7?

    Jeavon

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x 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 3074 posts 13632 karma points MVP 11x 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 76 posts 207 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 85 posts 199 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" />
        }
    }
    
  • 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.

Please Sign in or register to post replies