Reading list Switch to dark mode

    Magento 2 Image Gallery

    Updated 20 March 2024

    Magento 2 Image Gallery module allows the admin to add/manage images into various galleries and galleries into various groups according to requirements.

    Admin can easily manage photo galleries and gallery groups on their site. In this module, everything is configured by the admin. Adobe Commerce Image Gallery is the best Gallery module for the Magento 2 platform.

    You can also manage the images to check if the images are indecent using the Magento 2 Indecent Content Checker extension.

    You can also optimize the server storage by uploading the product, and CMS media content via the Magento 2 Digital Ocean storage extension so that the media is fetched and provided to customers directly from Digital Ocean servers.

    • Ability to add/manage images in various galleries.
    • Assign galleries into various groups.
    • Add various effects to display images.
    • Awesome controls you can zoom images, change images using mouse enter, etc.
    • The code is fully open & you can customize it according to your need.
    • Multi-Lingual support / All language working including RTL.
    • Also Compatible with Multistore.

    Additionally, you can use our Magento 2 TV app for various video streaming directly on TV.

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    Installation Of The Module

    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 Cloud root directory on the server as shown below.

    m2_installation

    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 and then move all module’s files inside /app/code/Webkul/ImageGallery/ folder in the Magento root directory.

    Installation of Magento2 Image Gallery

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

    Installation of Magento2 Image Gallery

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

    First command- php bin/magento setup:upgrade

    run command

    Second Command – php bin/magento setup:di:compile
    run command

    Third Command – php bin/magento setup:static-content:deploy
    run command

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

    Installation Of Magento2 Image Gallery

    Configuration For Multi-lingual Support

    For multilingual support, the admin will navigate through Store->Configuration->General ->Locale Options and select the locale as German (the language into which the admin wants to translate his store content).

    german

    Translation Of The Module

    If a user wants to translate their module from English to German then they need to follow the path app/code/Webkul/ImageGallery/i18n in their unzipped Adobe Commerce ImageGallery folder and will get a CSV file with name “en_US.csv”.

    Now they will rename that CSV as “de_DE.csv” and translate all right side content after the comma in the German language. After editing the CSV, save it and then upload it to the path app/code/Webkul/ImageGallery/i18n where they have installed Magento 2 on the server.

    The module will get translated into the German Language. It supports both RTL and LTR languages.

    Magento2 Image Gallery Translation
    Magento2 Image Gallery Translation

    The user can edit the CSV like the image below.
    Magento2 Image Gallery Translation

    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.

    Image-gallery

    How To Add/Manage Images

    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.

    Magento2 image gallery-1

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

    Magento2 image gallery-2

    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.

    Magento2 image gallery-3

    Gallery Image

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

    Magento2 image gallery-5

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

    Magento2 image gallery-6

    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.

    Magento2 image gallery-6

    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.

    Group Information

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

    Magento2 image gallery-9

    Gallery

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

    Magento 2 image gallery-3

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

    Magento 2 image gallery-4

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

    Magento 2 image gallery-general configuration

    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’}}

    Magento 2 image gallery-3

    Note

    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.

    Front-End

    After inserting all required details and block code your gallery looks like this screenshot.

    Magento 2 image gallery-5

    On clicking a particular gallery you can see all the images in your gallery.

    Magento 2 image gallery-2

    After clicking on any image below, you can see that image like this.

    Magento 2 image gallery

    So, that’s all for the Adobe Commerce Image Gallery extension, still have any issues feel free to add a ticket and let us know your views on the Webkul Support System to make the module better.

    You can also optimize the server storage by uploading the product image, and CMS media content via the Magento 2 Cloudflare R2 Storage so that the media is fetched and provided to customers directly from the Cloudflare R2 server.

    Current Product Version - 5.0.0-p1

    Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content