Copied to clipboard

Flag this post as spam?

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


  • ds 191 posts 223 karma points
    Mar 27, 2015 @ 23:43
    ds
    0

    Iterate through Media Folder

    Hi all,

    I have a document type containg "mainPicture" and "thumbnailOfPicture" properties using Media Picker as shown in the following.

    enter image description here

    Those properties either select a thumbnail or a media folder from Media Section as shown again in the following.

    enter image description here

    What I could achieve is that to display a thumbnail but I could not make it display images of selected folder on mainPicture property.

    What I have done so far ;

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    
    
        <div class="photo-box clearfix">
            <hr>
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <h4 class="indent">Photo Gallery</h4>  
                        <div class="row">
                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
                                <div class="thumb-pad4">
                                    <div class="thumbnail">
                                        @foreach (var childPage in CurrentPage.Children){ 
                                        var m = Umbraco.Media(childPage.thumbnailOfPicture);
                                            <figure><img src="@m.Url" alt=""></figure>
                                            <div class="caption">
                                                2014
                                            </div>
                                        }
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 col-lg-offset-1">
                                <div class="row">
                                        @foreach (var childPage in CurrentPage.Children){ 
                                            var MediaFolder = umbraco.Media(childPage.mainPicture);
    
                                            foreach (var photo in MediaFolder){ 
                                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 trainerBox">
                                                <div class="thumb-pad4">
                                                    <div class="thumbnail">
                                                        <figure><a href="@photo.UmbracoFile"><img src="@photo.UmbracoFile" alt=""></a></figure>
                                                    </div>
                                                </div>
                                            </div>
                                                    }
                                        }    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>  
    

    Lastly for displaying lots of photos, is there any project to make it simplier?

    Any help much appreciated.

  • Jeavon Leopold 3005 posts 13194 karma points MVP 7x admin c-trib
    Mar 28, 2015 @ 00:15
    Jeavon Leopold
    0

    Hi,

    You just a tiny mistake of a lowercase umbraco which should be Umbraco

     var MediaFolder = Umbraco.Media(childPage.mainPicture);
    

    You could consider the new Nested Content package for this

    Jeavon

  • ds 191 posts 223 karma points
    Mar 28, 2015 @ 10:28
    ds
    0

    Hi Jeavon,

    I am getting an error "Cannot implicitly convert type 'Umbraco.Web.Models.DynamicPublishedContent' to 'System.Collections.IEnumerable'. An explicit conversion exists (are you missing a cast?)"

    on line; foreach (var photo in MediaFolder){

  • Jeavon Leopold 3005 posts 13194 karma points MVP 7x admin c-trib
    Mar 28, 2015 @ 10:39
    Jeavon Leopold
    0

    You will need .Children, e.g.

    foreach (var photo in MediaFolder.Children){ 
    
  • ds 191 posts 223 karma points
    Mar 28, 2015 @ 20:15
    ds
    0

    Hi again Jeavon,

    Based on your suggestion, I can display the page but it returns nothing in the following;

    <figure><a href=""><img src="" alt=""></a></figure>
    
  • Jeavon Leopold 3005 posts 13194 karma points MVP 7x admin c-trib
    Mar 28, 2015 @ 22:23
    Jeavon Leopold
    0

    Hello, give this a try:

    <div class="photo-box clearfix">
        <hr>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <h4 class="indent">Photo Gallery</h4>
                    <div class="row">
                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
                            <div class="thumb-pad4">
                                <div class="thumbnail">
                                    @foreach (var childPage in CurrentPage.Children)
                                    {
                                        var m = Umbraco.Media(childPage.thumbnailOfPicture);
                                        <figure><img src="@m.Url" alt=""></figure>
                                        <div class="caption">
                                            2014
                                        </div>
                                    }
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 col-lg-offset-1">
                            <div class="row">
                                @foreach (var childPage in CurrentPage.Children)
                                {
                                    var mediaFolder = Umbraco.Media(childPage.mainPicture);
    
                                    foreach (var photo in mediaFolder.Children)
                                    {
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 trainerBox">
                                            <div class="thumb-pad4">
                                                <div class="thumbnail">
                                                    <figure><a href="@photo.Url"><img src="@photo.Url" alt=""></a></figure>
                                                </div>
                                            </div>
                                        </div>
                                    }
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
  • ds 191 posts 223 karma points
    Mar 28, 2015 @ 23:05
    ds
    0

    I get the error

    Exception Details: System.NotSupportedException: Cannot resolve a Url for a media item when there is no 'umbracoFile' property defined.

    Line 29:                                            foreach (var photo in MediaFolder.Children){ 
    
  • Jeavon Leopold 3005 posts 13194 karma points MVP 7x admin c-trib
    Mar 28, 2015 @ 23:08
    Jeavon Leopold
    0

    Oh, so what is the name of the upload or imagecropper property on the media items that are children of the folder selected in "Main Picture"?

  • ds 191 posts 223 karma points
    Mar 28, 2015 @ 23:17
    ds
    0

    I hope I understood you correctly. Is that what you want to see in the following.

    enter image description here

  • Jeavon Leopold 3005 posts 13194 karma points MVP 7x admin c-trib
    Mar 28, 2015 @ 23:22
    Jeavon Leopold
    0

    In your screen shot you showed a folder called "Sand" selected in "Main Picture", what Children does "Sand" have and what properties do they have?

  • ds 191 posts 223 karma points
    Mar 29, 2015 @ 00:56
    ds
    0

    I found the wrong section because of the nested folders on media section.

    but this time I faced with another problem which I hope you put me in right direction.

    I changed doc type and code a bit

    enter image description here

    enter image description here

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    
    
        <div class="photo-box clearfix">
            <hr>
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <h4 class="indent">Photo Gallery</h4>  
                        <div class="row">
                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
                                <div class="thumb-pad4">
                                    <div class="thumbnail">
                                        @foreach (var childPage in CurrentPage.Children){ 
                                        var m = Umbraco.Media(childPage.thumbnailOfPicture);
                                            <figure><img src="@m.Url" alt=""></figure>
                                            <div class="caption">
                                                2014
                                            </div>
                                        }
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 col-lg-offset-1">
                                <div class="row">
                                        @foreach (var childPage in CurrentPage.Children){ 
                                            var MediaFolder = Umbraco.Media(childPage.mainPicture);                                 
                                            foreach (var photo in MediaFolder.Children){ 
                                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 trainerBox">
                                                <div class="thumb-pad4">
                                                    <div class="thumbnail">
                                                        <figure>                                                        
                                                            <a href="@photo.UmbracoFile">
                                                                var MediaFolder2 = Umbraco.Media(childPage.mainThumbnail);
                                                                foreach (var photo2 in MediaFolder2.Children){
                                                                    <img src="@photo2.UmbracoFile" alt="">
                                                                }
                                                            </a>
                                                        </figure>
                                                    </div>
                                                </div>
                                            </div>
                                            }
                                        }    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    

    As you can see on first picture, Main Picture points "Sand" folder and Main Thumbnail points "Thumbnail" folder. Links gets the Sand folder in the following and display but How can I image source to point out the Thumbnail folder in this case?

                                                            <a href="@photo.UmbracoFile">
                                                            var MediaFolder2 = Umbraco.Media(childPage.mainThumbnail);
                                                            foreach (var photo2 in MediaFolder2.Children){
                                                                <img src="@photo2.UmbracoFile" alt="">
                                                            }
                                                        </a>
    
  • Jeavon Leopold 3005 posts 13194 karma points MVP 7x admin c-trib
    Mar 30, 2015 @ 13:02
    Jeavon Leopold
    0

    Like this?

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    
    <div class="photo-box clearfix">
        <hr>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <h4 class="indent">Photo Gallery</h4>
                    <div class="row">
                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
                            <div class="thumb-pad4">
                                <div class="thumbnail">
                                    @foreach (var childPage in CurrentPage.Children)
                                    {
                                        var m = Umbraco.Media(childPage.thumbnailOfPicture);
                                        <figure><img src="@m.Url" alt=""></figure>
                                        <div class="caption">
                                            2014
                                        </div>
                                    }
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 col-lg-offset-1">
                            <div class="row">
                                @foreach (var childPage in CurrentPage.Children)
                                {
                                    var mediaFolder = Umbraco.Media(childPage.mainPicture);
                                    foreach (var photo in mediaFolder.Children)
                                    {
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 trainerBox">
                                            <div class="thumb-pad4">
                                                <div class="thumbnail">
                                                    <figure>
                                                        <a href="@photo.umbracoFile">
                                                            @{
                                                                var mediaFolder2 = Umbraco.Media(childPage.mainThumbnail);
                                                                foreach (var photo2 in mediaFolder2.Children)
                                                                {
                                                                    <img src="@photo2.umbracoFile" alt="">
                                                                }
                                                            }
                                                        </a>
                                                    </figure>
                                                </div>
                                            </div>
                                        </div>
                                    }
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
  • ds 191 posts 223 karma points
    Mar 30, 2015 @ 21:34
    ds
    0

    Hi Jeavon,

    I get the following output but it must be one image for every link.

                                     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 trainerBox">
                                        <div class="thumb-pad4">
                                            <div class="thumbnail">
                                                <figure>
                                                    <a href="/media/1011/02c5f0__.jpg">
                                                                <img src="/media/1041/02c5f0__.jpg" alt="">
                                                                <img src="/media/1042/02c5f0__.jpg" alt="">
                                                                <img src="/media/1043/02c5f0__.jpg" alt="">
                                                                <img src="/media/1044/02c5f0__.jpg" alt="">
                                                                <img src="/media/1045/02c5f0__.jpg" alt="">
                                                    </a>
                                                </figure>
                                            </div>
                                        </div>
                                    </div>
    
  • Jeavon Leopold 3005 posts 13194 karma points MVP 7x admin c-trib
    Mar 30, 2015 @ 21:35
    Jeavon Leopold
    0

    So you would like only the first one from that folder?

  • ds 191 posts 223 karma points
    Mar 30, 2015 @ 21:43
    ds
    0

    I should display every picture in that folder for example.

    enter image description here

                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 trainerBox">
                                    <div class="thumb-pad4">
                                        <div class="thumbnail">
                                            <figure>
                                                <a href="/media/1011/02c5f0__.jpg">
                                                            <img src="/media/1041/02c5f0__.jpg" alt="">
                                                </a>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
    

    It should look like above and iterate through every image

  • Jeavon Leopold 3005 posts 13194 karma points MVP 7x admin c-trib
    Mar 30, 2015 @ 21:46
    Jeavon Leopold
    0

    Ok, so it should be like this then?

                                                <figure>
    
                                                        @{
                                                            var mediaFolder2 = Umbraco.Media(childPage.mainThumbnail);
                                                            foreach (var photo2 in mediaFolder2.Children)
                                                            {
                                                                <a href="@photo2.umbracoFile">
                                                                  <img src="@photo2.umbracoFile" alt="">
                                                                </a>
                                                            }
                                                        }
    
                                                </figure>
    
  • ds 191 posts 223 karma points
    Mar 30, 2015 @ 22:00
    ds
    0

    No, the thing is that image tag should point "Thumbnail" folder and link should point "Sand" folder or should I try different approach? What would you say?

  • Jeavon Leopold 3005 posts 13194 karma points MVP 7x admin c-trib
    Mar 30, 2015 @ 22:03
    Jeavon Leopold
    0

    How would it link the "Sand" folder, as it contains many images?

    Could you illustrate how the markup should be and I can work from that?

    Also to clarify, "mainThumbnail" is a single image and "mainPicture" is the folder "Sand" containing many images etc...?

  • ds 191 posts 223 karma points
    Mar 30, 2015 @ 22:24
    ds
    0

    I think for your first two questions, I should think different approach. What would you suggest?

    For the third question, mainThumbnail contains also many images.Every image has its thumbnail so if nine images of Sand, it should also 9 thumbnails.

  • Jeavon Leopold 3005 posts 13194 karma points MVP 7x admin c-trib
    Mar 30, 2015 @ 22:25
    Jeavon Leopold
    0

    Is the thumbnail always a scaled version of the main image?

  • ds 191 posts 223 karma points
    Mar 30, 2015 @ 22:26
    ds
    0

    yes, it is.

  • Jeavon Leopold 3005 posts 13194 karma points MVP 7x admin c-trib
    Mar 30, 2015 @ 22:29
    Jeavon Leopold
    0

    The you could use the image cropper or if exactly the same just a resize querystring, e.g. /media/1000/mainImage.jpg?width=50&height=50 (more options here) Then you would not need the thumbnail picker at all!

  • ds 191 posts 223 karma points
    Apr 02, 2015 @ 13:14
    ds
    0

    Hi Jeavon,

    Sorry for the late answer. I have fallen ill. I will try your suggestion.

    By the way, let's think I have a following structure

    • Level1
      • SubLevel1
        • item1
        • item2
      • SubLevel2
        • item1
        • item2
    • Level2

    On Level1, How can I itearate through so only the first item of the sublevels selected?

Please Sign in or register to post replies

Write your reply to:

Draft