Can someone help me solve this, I’ve been working on it for a few days and can’t find the right solution? I’ve uploaded 8 documents and 8 images to a folder under the media library. The images and documents are all different and each image relates to one document. For example ‘document one’ relates to ‘document one image’ and so on.

I need to render the images on the page in groups or 4 i.e. 2 rows with 4 images in each row and under the images the name of document, the images when clicked will open/download the document.

I can hard code this using HTML but I wanted to find a dynamic solution because I’m running multiple sites and each site has a similar page but on those pages the images will be different and the name of the documents may also be different (but keeping the same naming convention).

So I thought I’d name the documents and images the same except the images have the suffix ‘image’ i.e. ‘document two’ and ‘document two image’, this enables me to sort them and thereby retrieve them in the order I want to display them but I’m having an issue with the layout and cannot find a way to associate the document with the image; it’s made me question whether I’m going about this the best way.

Here’s my code:

@inherits umbraco.MacroEngines.DynamicNodeContext

@using Umbraco.Web.Media;

@*

Macro Parameters To Create, for this macro to work:

Show:True   Alias:mediaId     Name:Media Folder ID    Type:MediaCurrent

*@

@if (Parameter.mediaId != null)

{

@* Get the media folder as a dynamic node *@

    var mediaFolder = Library.MediaById(Parameter.mediaId);

    if (mediaFolder.Children.Any())

    {

@* for each item in children of the selected media folder order by name and file extension in group of 8 *@

        foreach (var group in mediaFolder.Children.OrderBy("Name", "umbracoExtension").InGroupsOf(8))

        {

    <div class="row-of-four">

        @foreach (var mediaItem in group)

        {

@* If media type equals image render image *@

            if (mediaItem.NodeTypeAlias == "Image")

            {

            <img src="@mediaItem.umbracoFile" width="@mediaItem.umbracoWidth" height="@mediaItem.umbracoHeight" alt="@mediaItem.Name"/>

            }

@* If media type equals file render link  *@

            if (mediaItem.NodeTypeAlias == "File")

            {

            <a href="@mediaItem.umbracoFile">@mediaItem.Name</a>

            }

        }

    </div>

        }

    }

}

And this renders the link as a text link followed by the image, the image obviously isn’t linked to the document!

I looked at custom file types and added a property called fileImage to the ‘file’ Media Type. The fileImage property is set to media picker and I can pick the image I want associated with the individual document but I don’t know how to get this property value and turn it in to a link to the image in the library.

Does anyone have a suggestion that might help?