displaying random image from media folder

Paul Griffiths 370 posts 1021 karma points

Nov 23, 2015 @ 09:06

Hi All,

Requirement: I would like to display a random image from a media folder so that on the 'parent page' (photography(doctype=Hobby)) i can display all the galleries and then the user can select through to see all images

Site structure:

Hobbies (doctype = hobbySection)

Football (doctype = hobby)

Darts (doctype = hobby)

Computing (doctype = hobby)

Photography (doctype = hobby)

Lake Vyrnwy (doctype = photoGallery)

Test Album (doctype = photoGallery)

enter image description here

Media Section: I have created a folder in my media section called ‘galleries’ and in there I have a further two folders for each different 'gallery' that i want to display on my site. These folders both contain images as shown below

media galleries

DocumentType: I have created a document type called ‘photo gallery’ that contains a property of type ‘media picker’ called galleryAlbum.

Template: From my template I have populated the media picker property by selecting the the folder e.g. Test Album that contains all of the images as shown below

enter image description here

when on the current page I am able to display all images using the following code

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
    var galleryAlbum = Umbraco.Media(Model.Content.GetPropertyValue<string>("galleryAlbum").ToString());
}

@foreach (var image in galleryAlbum.Children)
{
    <img src="@image.Url" />        
}

However, when im on the parent page (hobby) i am having difficulty getting a random image and displaying it. I have tried using the .Take(1) and .RandomOrder() methods but i kept getting compile errors.

I can get the photo galleries from the 'currentPage' (photography) by using

var photoGalleries = Model.Content.Children;

If someone could please advise where i am going wrong that would be really helpful

Many thanks

Paul

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Nov 23, 2015 @ 10:37

Hi Paul,

I have just looked at your code. I think something like the code below should do what you are after.

@{
   if(Model.Content.HasValue("galleryalbum")){
            var galleryAlbum = Umbraco.TypedMedia(Model.Content.GetPropertyValue("galleryalbum"));
                foreach(var image in galleryAlbum.Children.RandomOrder()){
                    <img src="@image.GetPropertyValue("umbracoFile")" alt="@image.GetPropertyValue("Name")" />
                }
        }
}

Hope this helps,

/Dennis

Copy Link

Paul Griffiths 370 posts 1021 karma points

Nov 23, 2015 @ 11:05

Hi Dennis,

Thanks very much for your reply. The code you provided helped me to crack this :). I think i was missing the ("umbracoFile") syntax. I was trying to output using image.Url.

I have tweeked the code slightly to work with my solution but here is my final output if it helps anyone else

//get a list of photo galleries from the 'current page' (photography)
var photoGalleries = Model.Content.Children;

<div class="col-md-4 col-sm-4">
                @foreach (var gallery in photoGalleries)
                {
                    if (gallery.HasValue("galleryAlbum"))
                    {
                        var galleryAlbum = Umbraco.TypedMedia(gallery.GetPropertyValue("galleryAlbum"));
                        <h4>@gallery.GetPropertyValue("galleryTitle")</h4>
                        foreach (var image in galleryAlbum.Children.RandomOrder().Take(1))
                        {
                            <img src="@image.GetPropertyValue("umbracoFile")" alt="@image.GetPropertyValue("Name")" />
                        }
                        string content = umbraco.library.RemoveFirstParagraphTag(gallery.GetPropertyValue("galleryContent").ToString());
                        <p>@Umbraco.Truncate(content, 250, true)<a href="@gallery.Url">Read More</a></p>
                        <p>Published on @gallery.GetPropertyValue("galleryDate")</p> 
                    }

                }

            </div>

I just need resize the gallery images now and im good to go :)

Many thanks

Paul

Copy Link

is working on a reply...

Flag this post as spam?

Displaying random image from media folder