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

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){

You will need .Children, e.g.

foreach (var photo in MediaFolder.Children){ 

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>

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>

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){ 

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"?

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

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?

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

@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>

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>

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>

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

I should display every picture in that folder for example.

                            <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

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>

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?

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...?

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.

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

yes, it is.

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!

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?

is working on a reply...