Copied to clipboard

Flag this post as spam?

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


  • adam 14 posts 74 karma points
    Aug 13, 2013 @ 13:12
    adam
    0

    Display images from media folders

    Hi all, I am trying to render one image from each media folder (when the parent folder is selected) the structure is like this

    Gallery Folder

    • sub folder
      • img
    • sub folder
      • img
      • img

    I've made a little progress with the below, but it only renders images when a sub folder is selected, does anyone know how I could tweak this to display one image from each folder when the parent is selected please?

    @inherits umbraco.MacroEngines.DynamicNodeContext
    @using umbraco.cms.businesslogic.media;
    
    
    <ul class="image-gallery">
    @{    
    var mediaPicker = @Model.imageGallery;
        if (!String.IsNullOrEmpty(mediaPicker))    {
            int folderId = Convert.ToInt32(mediaPicker);
            var mediaFolder = new Media(folderId);
    
            if (mediaFolder.ChildCount > 0)        {
                IEnumerable<Media> Folder = mediaFolder.GetChildMedia().Where(x => x.ContentType.Alias == "Image");
                foreach (var img in Folder)           {             
                          <li>
                              <a href="#">
                                    <img src="/[email protected]("umbracoFile").Value&width=200&height=140" alt="" />
                              </a>
    
                          </li> 
    
                }
            }
       }
    }
    </ul>
    

    Hopefully that makes sense!

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Aug 13, 2013 @ 14:17
    Jeavon Leopold
    0

    Hi Adam,

    To check a couple of things, is "Gallery Folder" a folder in the media section rather than content and you have a property on your page that is rendering on the front end that has a media picker on it, you pick a "sub folder" with that picker but you want to render only the first image in that "sub folder"?

    Thanks,

    Jeavon

  • adam 14 posts 74 karma points
    Aug 13, 2013 @ 15:03
    adam
    0

    Hey Jeavon

    Thanks for the reply

    Yep 'gallery folder' is a folder in the media section

    Yea on the page there is a media picker where you select the folder ('galley folder' for example) which if possible will render out one image from each of its sub folders, kind of like a gallery preview

    At the moment it will only display images from a sub folder if that is selected

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Aug 13, 2013 @ 15:23
    Jeavon Leopold
    101

    Ok, how about this:

    @inherits umbraco.MacroEngines.DynamicNodeContext
    <ul class="image-gallery">
        @{
            if (Model.HasValue("imageGallery"))
            {
                var mediaFolder = Library.MediaById(Model.imageGallery);        
    
                foreach (var mediaItem in mediaFolder.Children)
                {
                    if (mediaItem.Children.Any())
                    {
                        var imageItem = mediaItem.Children.First();
                        if (imageItem.HasValue("umbracoFile"))
                        {
                            <li>
                                <a href="#">
                                    <img src="/imageGen.ashx?image=@(imageItem.umbracoFile)&width=200&height=140" alt="" />
                                </a>
    
                            </li>
                        }
                    }
                }
            }              
        }   
    </ul>
    
  • adam 14 posts 74 karma points
    Aug 13, 2013 @ 15:49
    adam
    0

    Awesome! This works perfect thanks a lot

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Aug 13, 2013 @ 16:06
    Jeavon Leopold
    0

    Excellent, you're welcome!

  • Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib
    Aug 14, 2013 @ 09:49
    Jeroen Breuer
    0

    Hello,

    I don't know what version you are on, but using the Razor macro's is not the recommanded way of doing things anymore. In v6 you have partial view macro's you can use or switch to MVC. Here is some more info how you can find to check if you're using the old or new Razor: http://our.umbraco.org/projects/backoffice-extensions/digibiz-advanced-media-picker/digibiz-advanced-media-picker/39627-How-to-detect-if-no-items-have-been-picked#comment144735

    If you want to use the new Razor to display images from a media folder have a look at the DAMP Gallery. On Page 2 it shows the media of a folder.

    Jeroen

  • David Armitage 508 posts 2078 karma points
    Feb 02, 2018 @ 04:17
    David Armitage
    0

    Hi Guys,

    Here is a version from me.

    @using ContentModels = Umbraco.Web.PublishedContentModels;
    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.AccommodationPage>
    
    @{
        var galleryFolder = Model.Content.GalleryFolder;
        if (Model.Content.GalleryFolder != null)
        {
            int galleryItemCount = 1;
            <div class="row">
                @foreach (var galleryItem in galleryFolder.Children)
                {
                    if (galleryItem.DocumentTypeAlias == "Image")
                    {
                        <div class="col-md-3">
                            <img style="width:100%;" src="@galleryItem.Url" alt="@Model.Content.Title Gallery Photo @galleryItemCount.ToString()" />
                        </div>
                        galleryItemCount++;
                    }
                }
            </div>
        }
    }
    
Please Sign in or register to post replies

Write your reply to:

Draft