Magento 2 Image Gallery

Customers will get a zip folder and they have to extract the contents of this zip folder on their system. The extracted folder has an src folder, inside the src folder you have the app folder.

You need to transfer this app folder into the Adobe Commerce  root directory on the server as shown below.

If you have downloaded the module from Adobe Commerce Connect then unzip the respective extension zip.

And create Webkul(vendor) and then ImageGallery(module) name folder inside your Magento root directory as app/code/Webkul/ImageGallery .

Then move all module’s files inside /app/code/Webkul/ImageGallery/ folder in the Magento root directory.

After the upload, you can see the folders in your Magento 2 Root Directory.

So, after the successful installation, you have to run these commands in the Magento 2 root directory.

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy

After running the commands, you have to flush the cache from Adobe Commerce  admin panel by navigating through->System->Cache management as shown below.

After the successful installation of the Magento Image Gallery module admin will be able to see the Adobe Commerce Image Gallery configuration setting under “Webkul Image Gallery”.

So, let’s explain each menu one by one.

Admin can add/manage the images for the gallery under Webkul Image Gallery > Add/ Manage Images. Admin can also delete or change the status of the image.

After click on “Add Image” below page will appear. Here admin can enter image information and save the image.

This module also provides the feature for the admin to add/manage a gallery under Webkul Image Gallery > Add/Manage Gallery.

After clicking on Add Gallery below page will appear which contains two tabs in the left section.

Gallery Information

In this section, you also need to enter your gallery code which is unique and select status of the gallery.

Here you need to select the images and thumbnail images for your particular gallery.

Admin can also edit the existing gallery by clicking “Edit”. Here admin can edit Gallery Information and Gallery Images both.

However, Admin can also select or deselect the images to be displayed in that particular gallery and the admin can change the thumbnail image of the gallery.

This menu is responsible for adding or Managing gallery group details. Admin can create Gallery group using created gallery.

Magento2 image gallery

For adding a new group click on Add Group. It contains two tabs in the left section.

Here you need to enter your group code and the status of the group. The group code must be unique and contain no space.

So, here you need to select the gallery for your particular group. Select the gallery which you want to add to your group.

You can also edit the added Gallery Group. Just click on the Edit option.

Under Gallery Setting, you can add the setting for your image gallery.

Under Gallery Setting, you can add effects, captions, thumbs, autoplay, border, and many more features to make your gallery more graceful.

Use Block call on CMS page

You need to call block code at your cms pages with group_code, and gallery_code attribute which Gallery and Group gallery you want to show at frontend.

{{block class=’Webkul\ImageGallery\Block\Gallery\Gallery’ group_code=’group1′ template=’Webkul_ImageGallery::group.phtml’}}

In the case of a blocking call at the CMS page, You will have to write (‘) in HTML otherwise.

So, if you simply copy these codes on the WYSIWYG editor then it will convert the double quote into some ASCII code and you will be unable to call block on the CMS page.

It will look like this on the CMS page.