Copied to clipboard

Flag this post as spam?

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


  • Manu Claessens 23 posts 63 karma points
    May 10, 2014 @ 07:25
    Manu Claessens
    0

    Using razor to retrieve first image of multiple media pickers (umbraco v7)

    Hi everyone,

    I have a doctype Photo Gallery that contains multiple doctypes Photo Albums. These Photo Albums use the property multiple media picker to let the user select the images he wants.

    I'm trying to create the template for the Photo Gallery page that basically lists all the available albums and shows the first image of the albums.

    However, I can't seem to find the right code to access the first image. Any help on this would by highly appreciated!

    This is what I have so far (in a partial view macro file, umbraco v7):

    @inherits Umbraco.Web.Macros.PartialViewMacroPage

     @foreach (var childPage in CurrentPage.Children.Where("Visible"))
        {
    
            if (childPage.HasValue("AfbeeldingenFotoAlbum"))
            {
                //var imagesList = Model.Content.GetPropertyValue<string>("AfbeeldingenFotoAlbum").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
                var imagesList = childPage.GetPropertyValue<string>("AfbeeldingenFotoAlbum").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
                var imagesCollection = Umbraco.TypedMedia(imagesList).Where(x => x != null);
    
                bool isFirstImage = true;
    
                foreach (var image in imagesCollection)
                    {
                        if(isFirstImage)
                        {
                         <div class="col-1-4" style="height:200px; margin-top:10px;margin-bottom:10px;"> 
                            <div class="wrap-col">
                                <a class="img-border" style="max-width:100%;" href="@childPage.Url">
                                    <img class="responsivethumbnail" src="@image.Url" />
                                    <div style="clear:both;"></div>
                                    <p style="text-align:center; display:block;">@childPage.Name</p>
                                </a>
    
                            </div>
    
                        </div>
                        isFirstImage = false;
                        }
                        else { break; }  
    
                    }                                                              
            }
    
  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    May 11, 2014 @ 02:04
    Jeavon Leopold
    102

    Hi Manu,

    How about this:

    @foreach (var childPage in Model.Content.Children.Where("Visible"))
    {
    
        if (childPage.HasValue("AfbeeldingenFotoAlbum"))
        {
            var firstImageId = childPage.GetPropertyValue<string>("AfbeeldingenFotoAlbum").Split(new string[] {","}, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse).FirstOrDefault();
            var firstImage = Umbraco.TypedMedia(firstImageId);
    
            if (firstImage != null)
            {
                <div class="col-1-4" style="height: 200px; margin-top: 10px; margin-bottom: 10px;">
                    <div class="wrap-col">
                        <a class="img-border" style="max-width: 100%;" href="@childPage.Url">
                            <img class="responsivethumbnail" src="@firstImage.Url" />
                            <div style="clear: both;"></div>
                            <p style="text-align: center; display: block;">@childPage.Name</p>
                        </a>
                    </div>
                </div>
    
            }
    
        }
    }
    

    Jeavon

  • Manu Claessens 23 posts 63 karma points
    May 11, 2014 @ 07:31
    Manu Claessens
    0

    Jeavon,

    Thanks! You're the best! This works and is exactly what I was looking for. Can you tell me what I did wrong on my solution? That way I can really learn from my mistakes.

    Kind regards, Manu

  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    May 11, 2014 @ 22:09
    Jeavon Leopold
    0

    Hi Manu,

    You're welcome! You main issue was that you were mixing the dynamics and typed Models, e.g. you had: @foreach (var childPage in CurrentPage.Children.Where("Visible")) I changed to @foreach (var childPage in Model.Content.Children.Where("Visible"))

    On a second look, there is a potential problem with my previous snippet, in that if the first media item in the collection has been deleted, it would be skipped. While not quite as efficient as the above, below is how to deal with that:

    @foreach (var childPage in Model.Content.Children.Where("Visible"))
    {
        if (childPage.HasValue("AfbeeldingenFotoAlbum"))
        {
            var imageIds = childPage.GetPropertyValue<string>("AfbeeldingenFotoAlbum").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
            var firstImage = Umbraco.TypedMedia(imageIds).FirstOrDefault(x => x != null);
    
            if (firstImage != null)
            {
                <div class="col-1-4" style="height: 200px; margin-top: 10px; margin-bottom: 10px;">
                    <div class="wrap-col">
                        <a class="img-border" style="max-width: 100%;" href="@childPage.Url">
                            <img class="responsivethumbnail" src="@firstImage.Url" />
                            <div style="clear: both;"></div>
                            <p style="text-align: center; display: block;">@childPage.Name</p>
                        </a>
                    </div>
                </div>
            }
        }
    }
    

    Jeavon

  • Idar Sprock 1 post 71 karma points
    Sep 28, 2015 @ 13:26
    Idar Sprock
    0

    Hi Jeavon and Manu,

    Thank you for the code snippets. I've almost a similar problem.. instead of using "CurrentPage" or "Model.Content", I retrieve the pages from a specific Page:

    @* var conceptHeadPage = Umbraco.Content(1055); *@
       var conceptHeadPage = Umbraco.TypedContent(1055);
    @foreach (var conceptItem in conceptHeadPage.Children.Where("Visible")){
        if(conceptItem.HasValue("HeaderImages")){
            var imageIds = conceptItem.GetPropertyValue<string>("HeaderImages").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
            var firstImage = Umbraco.TypedMedia(imageIds).FirstOrDefault(x => x != null);
            if (firstImage != null) {
            <div class="item">
                <div class="bg-img" style="background-image: url('@firstImage.Url');"></div>
                <div class="container">
                    <div class="intro-wrap">
                        <h1 class="intro-title">@conceptItem.HeaderTitle</h1>
                        <div class="intro-text">
                            <p class="lead">@conceptItem.HeaderText</p>
                            <a href="@conceptItem.Url" class="btn btn-primary">Read More &nbsp; <i class="fa fa-angle-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            }
        } }
    

    It does gives me the firstImage (and Url) from child pages (as your examples). But for @conceptItem.HeaderTitle and @conceptItem.HeaderText gives me an error (cannot retrieve data) (Error loading Partial View script (file: ~/Views/MacroPartials/...). These are Generic Properties (textstring /textbox multiple) added in the assinged documentTypes. When I use @conceptItem.Name or @conceptItem.Url (standard properties) -> No problem.

    Obviously it's from var conceptHeadPage = Umbraco.TypedContent(1055); but when i changed it to var conceptHeadPage = Umbraco.Content(1055); the @conceptItem.HeaderTitle and @conceptItem.HeaderText works fine.. but this doesn't var imageIds = conceptItem.GetPropertyValue<string>("HeaderImages").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);

    How can I slove this issue?

    Idar

  • Osman Coskun 164 posts 398 karma points
    Oct 13, 2015 @ 12:58
    Osman Coskun
    1

    Hello,

    I tried adding First() to imageIds and worked for me :)

    var imageIds = item.fotograflar.Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries); 
    var firstImage = Umbraco.Media(imageIds).First();
    

    And also adding Last() calls the last media item selected.

  • Alan Every 13 posts 35 karma points
    Oct 13, 2015 @ 13:52
    Alan Every
    0

    Only use First() or Last() if you can be sure your sequence will never be empty else you will generate an exception.

    If potentially empty use FirstOrDefault() or LastOrDefault()

  • Osman Coskun 164 posts 398 karma points
    Oct 13, 2015 @ 13:59
    Osman Coskun
    0

    Thanks Alan :)

Please Sign in or register to post replies

Write your reply to:

Draft