Sign in Register
Go to solution
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

    Razor

    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.

    Copy Link
  • 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;
            }
    Copy Link
  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Dec 18, 2013 @ 23:15
    Jeavon Leopold
    0

    Hi John, are you using Umbraco v7?

    Jeavon

    Copy Link
  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x 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

    Copy Link
  • 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

    Copy Link
  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x 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

    Copy Link
  • 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

     

    Copy Link
  • 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="" />
        }

    }

     

    Copy Link
  • 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

    Copy Link
  • 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" />
    }
}
    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft