Free Umbraco Macros and Plugins for Your Website

By Stephen Garside on 8/30/2018

One of the great features of Umbraco is the ability to create macros, which are wrappers for pieces of reusable functionality such as an Image Gallery or Hero Image control.  Content Managers can use these macros to add rich functionality to their websites without having to write a line of code..

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).

free umbraco picture gallery macro 1

free umbraco picture gallery macro 2

 

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

 

insert macro dialog into umbraco document

 

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

media picker in Umbraco

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:

any-image-name-you-like.jpg

any-image-name-you-like_th.jpg

 

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.

Share this article...

Join the Discussion...