Free Umbraco Macros and Plugins for Your Website
By Stephen Garside on 8/30/2018
Free Image Gallery Umbraco Macro
The first of my free to use Umbraco macros is a picture / image gallery plugin that utilises the popular Fancybox library. You can try it now by clicking one of the following images to view an enlarged version.
Implementing the Umbraco Image Gallery Macro
You can add this free umbraco picture gallery plugin to your website by following these simple steps:-
Step 1 - Download the Macro Code
Download the free Umbraco image gallery macro from github and save it into the /views/macropartials folder of your website.
Step 2 - Register the Macro in Umbraco
Log in to your Umbraco CMS, select the Developer section and click to create a new macro. Complete the properties for the new macro as shown in the following images (the MVC Partial View field should contain the full path to the macro partial you saved in step 1).
Step 3 - Add the Macro to Your Content
Add your picture gallery macro anywhere you like, either in the grid control, or as a data type:-
Step 4 - Adding Images
Once you have added your macro to a grid or datatype, click it and select the images you want to include in the picture gallery:-
For each image you want to include in your gallery you have to provide a large and small (thumb) version. Images filenames should use the following naming convention:
Step 5 - Add a Class for Layout
The final step when using this picture gallery macro in your Umbraco website is to add a class name to control the layout of the thumbnails. I tend to use Bootstrap grid for layout, so in this case add the relevant class name depending on how many columns I want to display i.e. class 'col-md-3' will give me 4 thumbnails per row.