Image gallery with individual description in Umbraco

Question

I'm trying to create a gallery in Umbraco. All I want is to upload a bunch of pictures, write an optional description on each image, pull out the images with Razor, and finally place them on the site.

I can select many images using the Media Picker, then do this to pull them out:

var collection = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("images");
foreach (var image in collection) {
    <img src="@image.Url" />
}

But if I use Media Picker, I cannot input a description on the image.

I have an idea, which is kind of stupid and slow: Create a child document type called Image on my Gallery document type. Each image content then has an image and a description. This would be a very annoying way to do it, though.

Is there a better way to do this?

Eyescream Eyescream · Accepted Answer · 2017-09-14T12:07:28

If you go to the media section you can change the name of the images you have uploaded before and use it as the description. Or maybe add a description field on the mediatype image (if it's a long text).

<img src="@image.Url" alt="@image.Name" />
<img src="@image.Url" alt="@(image.GetPropertyValue<string>("description"))" />

Also there should be a flag in the DataType of the picker to add the "open" functionality to the picker, so you will be much faster in the process switching from content to the media tree

Image gallery with individual description in Umbraco

1 Answers