An active usage of some widgets of a jQuery JavaScript library is characteristic of Magento | Commerce. 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.
You can copy the configuration file from Luma or from Blank as well. Then you should insert it 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 yourself 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.
Table of Contents
SETTINGS FOR THE MAGNIFIER MAGENTO WIDGET
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 a 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.
SETTINGS FOR JAVASCRIPT BUNDLING
View.xml file contains 2 configuration settings:
- Provides controlling of the size of bundle;
- Excludes bundling of the unnecessary objects.
Mind that bundling can be the reason your online store slow loading. So, checking the above-mentioned configurations will be of use.
PECULIARITIES OF THE GALLERY WIDGET USING
But you can use the gallery widget not only for building your product image gallery. You can also create some other image galleries 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:
- app/design/frontend/<Namespace>/<Theme>/Magento_Cms/template/homepage-gallery.phtml
- app/design/frontend/<Namespace>/<Theme>/Magento_Cms/layout/cms_index_index.xml
And then put the special code inside homepage-gallery.phtml template.
Contain the gallery in div with a class img-gallery. The next step is initializing the gallery widget and the configuration settings specifying. They are sorted this way:
- data;
- options;
- fullscreen;
- breakpoints.
The most significant of them is a group with the name “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 the 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.
Published in: