The Gallery Widget in Magento 2: Get Your Product Page Illustrated!

An active usage of some widgets of a jQuery JavaScript library is characteristic of Magento. Let’s discuss one of these widgets – a gallery widget. The images of a product get uploaded by means of Magento admin and then they can be displayed owing to the gallery widget. So, this widget helps to illustrate your product page. 

The initial setting isn’t obligatory as the gallery of product images can work out of the box. The configuration options are provided by the gallery widget by default, so it’s possible to move there directly. According to the documentation of Magento, etc folder includes the configuration file view.xml that is in charge of the configuration options changing.  

The configuration file can be copied from Luma or from Blank as well. Then it should be inserted into the custom theme app/design/frontend/<Namespace>/<Theme>/etc. Get the customization started! You will face the following changes:

captions enable to add a caption of the product image. When setting, you can choose true or false;

there are such available effects in transition effect and duration as crossfade, slide or dissolve;

direction allows to make the thumbnails directed horizontally or vertically;

breakpoints help to set the mobile devices max-width;

thumbnailSize performs the self-titled function accordingly.

You can easily familiarize with the other changeable options. Their full description is provided by themselves, so there should be no problems dealing with them. But the following settings of configuration worth describing. They are described below.


The gallery widget applies to the magnifier as it provides zooming of your product images. So, its role is rather significant as the potential clients like to review all the details of products before making a decision of buying. You can easily put the magnifier into operation and decide whether it will be activated by a click of mouse or when you just point at the product image that interests you. Besides, the needed parameters of images (the dimensions and the needed position) can be set from the magnifier block. The latter is set in HTML by magnifier widget as a specific div.    


View.xml file contains 2 configuration settings:

1. Provides controlling of the size of bundle;

2. Excludes bundling of the unnecessary objects.

Mind that bundling can be the reason of your online store slow loading. So, checking of the above mentioned configurations will be of use.   


But the gallery widget can be used not only for building of your product image gallery. Some other image galleries can be created with its help.

First of all, you have to decide what exact place to put your gallery in. If this place is your homepage, the following files should be created:

1. app/design/frontend/<Namespace>/<Theme>/Magento_Cms/template/homepage-gallery.phtml

2. app/design/frontend/<Namespace>/<Theme>/Magento_Cms/layout/cms_index_index.xml

And then the special code should be put inside homepage-gallery.phtml template.

The gallery should be contained in div with a class img-gallery. The next step is initializing of the gallery widget and the configuration settings specifying. They are sorted this way:





The most significant of them is a group called “data”. The explanation of this fact is that the group is a variety of numerous images, so there your gallery images will be collected. Each one is an object with the following properties: thumb, full, img, isMain, and caption.    

Cms_index_index.xml is the layout file and contains 2 blocks of code. Homepage-gallery.phtml is the earlier created template in the body tag. It’s also important to add the file gallery.css. The latter provides running of the gallery. Then you can proceed further in adding the necessary custom styling.

So, get to explore the gallery widget in Magento 2! And if you have some questions concerning the gallery widget or any troubles with its using, you can easily contact us and we’ll provide you with an expert consultation and help.

Comments (0):
Leave a comment:
*Your comment will be published after approval by site administrator.