Copied to clipboard

Flag this post as spam?

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


  • Paul Griffiths 370 posts 1021 karma points
    Nov 23, 2015 @ 09:06
    Paul Griffiths
    0

    Displaying random image from media folder

    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

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Nov 23, 2015 @ 10:37
    Dennis Aaen
    101

    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

  • Paul Griffiths 370 posts 1021 karma points
    Nov 23, 2015 @ 11:05
    Paul Griffiths
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft