display images from media folders

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

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

Razor

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!

Copy Link

Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Aug 13, 2013 @ 14:17

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

Copy Link
adam 14 posts 74 karma points

Aug 13, 2013 @ 15:03

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

Copy Link

Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Aug 13, 2013 @ 15:23

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>

Copy Link

adam 14 posts 74 karma points

Aug 13, 2013 @ 15:49

0

Awesome! This works perfect thanks a lot

Copy Link
Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Aug 13, 2013 @ 16:06

0

Excellent, you're welcome!

Copy Link
Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib

Aug 14, 2013 @ 09:49

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

Copy Link

David Armitage 505 posts 2073 karma points

Feb 02, 2018 @ 04:17

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

Copy Link

is working on a reply...

Please Sign in or register to post replies