Magento 2 Image/Photos Gallery Extension

Gallery

Introduction

The Image Gallery extension allows creating any number of image and video gallery to share all your pictures and videos with your store visitors. Galleries can be placed at any page and position of the store. All galleries and images will display on a dedicated page, optimized for SEO. The extension is fully responsive for mobile devices and provides multiple customization options to style the gallery.

Installation

The extension has 2 separate ways of installation via Composer or by copying the code.

Please follow this Installation Guide to install the extension.

Extension Configuration

Configuration Settings

To access the configuration settings of the extension, log into the Magento Admin panel and go to STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Gallery.

The module’s configuration contains four sections: General, Index Page, Links, and Design.

General

The general settings of the extension are quite simple and the following settings are available :

Enable the extension - allows enabling or disabling the extension in the storefront;

Gallery Layout - allows to choose the type of layout to display the gallery;

If Gallery Without Filters (Default) is selected, galleries will display in storefront without filters. Store administrator can set the following :

  • Image Per Page - specify the number of images to display per gallery page;
  • Lightbox Theme - choose the image lightbox theme, Light or Dark

If Gallery With Filters is selected, the galleries will display in the storefront with filters.

In Filters Display field, choose

  • Images of Any Size - if your images are of any size. Eg: images with different width and height;
  • Images of the Same Size - if your images are of same size. Eg: same width and height;
  • Images of Same Height - if your images are of same height. Eg: all your images have same height;
  • Images of Same Width - if your images are of same width. Eg: all your images have same width;
  • Enable Image Shuffle - if set to Yes, the shuffle button will display in the filter block, allowing to shuffle the images in random order and rearrange them on the screen;
  • Enable Image Sorting (ASC, DESC) - if set to Yes, the ASC and DESC buttons will display in the filter block, allowing to sort images based on a certain attribute in ascending or descending order and rearrange them on the screen;
  • Enable Searching Image Item - if set to Yes, the search box will display in the filter block, allowing to instantly search image by any keywords;
  • Lightbox Theme - choose the image lightbox theme, Light or Dark.

Move Gallery Name and Description on Item? -  If yes, the name and description of the gallery item will be moved on the image and show in form of a caption.

Move Image Name and Description on Item? -  If yes, the name and description of the image item will be moved on the image and show in form of a caption.

Show Grayscale on Gallery Item? - if yes, the gallery item will display with grayscale and the original image color will show on hovering image.

Show Grayscale on Image Item? - if yes, the image item will display with grayscale and the original image color will show on hovering image.

Index Page

In the Index section, the following settings are available :

Title -  enter the title to appear at the top of the gallery page.

Description -  enter the description to appear below the gallery title.

Meta Keywords -  specify the meta keywords of the gallery page.

Meta Description -  specify the meta description of the gallery page.

Links

Under the Links section, the following are available:

Display Gallery In Top Links -  if set to Yes, Gallery link will show in the top links of the page

Link Text -  defines the gallery link text to appear on the top links. Eg "Gallery", "Gallery Image"

Display Gallery In Footer -  if set to Yes, Gallery link will show in the footer of the page

Link Text -  defines the gallery link text to appear on the footer. Eg "Gallery Image"

 

The extension allows store administrator to manage all galleries in the admin panel. To view, edit or create a new gallery, please go to CONTENT ⟶ Gallery by Ulmod ⟶ Gallery. All galleries are displayed on the grid. The mass actions allow managing galleries quickly.

Note: during the initial setup this grid will be empty.

To create a Gallery click "Add New Gallery" button. The Gallery contains two sections: General and Image(s).

General

Under the General section :

Set Status to "Yes" to enable the gallery in the storefront.

Enter the Name of the gallery that appears in the storefront.

In the Gallery Thumbnail field, browse to find the image on your computer and upload the file to appear on the gallery.

In the Description field, enter the description to appear on the gallery box.

Enter the Meta Keywords that search engines can use to index the page. Separate multiple words with a comma.

In the Meta Description enter a brief description of the page for search results listings. 

In the Template field, choose the template to display gallery images, "Grid" or "Slider". Please note that this feature is applicable to layout type: "Gallery without filters" only. Make sure to set Gallery Layout to "Gallery without filters" under STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Gallery. General section, before using this feature.

In the Store Views field, select stores, where your gallery should be displayed

Image(s)

In the image's grid, mark the checkbox of any image you want to assign to the gallery.

Managing Images

The store administrator can also manage all images in the admin panel. To view, edit or create a new image, please go to CONTENT ⟶ Gallery by Ulmod ⟶ Images. The mass actions allow to mass enable, disable or delete images from the grid

Note: during the initial setup this grid will be empty.

To create an Image click "Add New Item" button. The Image contains only one General section.

General

In the General section :

Set Status to "Yes" to enable the image in the storefront.

Enter the Name of the image and Description to appears in the storefront.

In the Image field, tap Choose File. Find the image on your computer and upload the file.

Choose Yes Display Video in Lightbox and enter the video URL to show on a lightbox. Youtube and Vimeo are supported.

In the Assign to Galleries list, select each gallery where the image is to be available.

Enter a number in the Sort Order field to determine the order of the image in the gallery. The highest position is zero.

The widget feature makes it possible to display galleries at specific block references in the store. The store administrator can create any number of gallery widget and place it anywhere in the store. To view, edit or create a new Gallery widget, go to CONTENT ⟶ Element ⟶ Widget.

To create a Gallery Widget click "Add Widget" button. Then, complete the settings to create the widget;

Settings

In the Settings section, do the following;

Type - choose Gallery by Ulmod. Then, tap Continue

Design Theme - choose the design theme which is set to the current theme. Tap Continue

Storefront Properties

Under Storefront Properties, do the following:

In the Widget Title field, enter a descriptive Gallery title for internal reference only.

Set Assign to Store Views to the view where the Gallery will be available.

Enter a number in the Sort Order field to determine the order of the Gallery if it appears in the same position as other content elements. The highest position is zero.

Layout Updates

In the Layout Updates section, tap Add Layout Update.

Set Display On to the type of page where the Gallery is to appear.

In the Block Reference list, choose the area of the page layout where the Gallery is to be placed.

Widget Options

Under Widget Options, do the following:

Enter a Gallery Title to appear above the Gallery block.

Enter a Description to appear above the Gallery block. Useful to describe the block to the users.

Layout Type - allows to choose the type of layout to display the gallery;

If Gallery Without Filters (Default) is selected, galleries will display in storefront without filters. Choose the Gallery, Template and Lightbox Theme

If Gallery With Filters is selected, a gallery will display in the storefront with filters. Choose the enable or disable Image Shuffle, Sorting and Searching in the filter blocks. And, choose the Lightbox Theme for image

Go on the storefront to verify that the widget is working correctly. To change the widget location, you can reopen it and try a different page or block reference.

 

Design (Adjust Colors)

To adjust/change the filter text, background, and buttons colors, please add the following CSS codes at your custom theme CSS file. Replace the default color with your colors.

You can add only the CSS codes that you'd like to adjust the colors, no need to add it all

Filter Background Color

.um-gallery-items li {
    border: 1px solid #FFFF;
    background: #006bb4;
} 

Filter Text Color

.um-gallery-items li a {
    color: #FFFF;
}

Filter Active Background Color

.um-gallery-layout-filter .um-gallery-items .active {
    background: #706e6e;
    border: 1px solid #ffff;
}

Filter Active Text Color

.um-gallery-layout-filter .um-gallery-items .active a {
    color: #ffff;
}

Filter Button Colors:

.um-shuffle-block .shuffle-btn,
.um-sortandshuffle li {
    border: 1px solid #FFFF;
    background: #006bb4;
    color: #FFFF;
}
You can choose your color picker from this guide and make sure to prefix each color with "#". eg #FFFFF

In case you can not adjust the colors by yourself, please contact our support team at [email protected], we will help you out with that.

 

Frontend View

Once the Galleries are created, they will display in the storefront on the index page. Eg www.domain.com/gallery

Example of Gallery with filters displaying on the index page

Example of Gallery without filters displaying on the index page

Example of images assigned to a Gallery without filters

Image Lightbox

Widget

Example of Gallery created via widget and displaying on the product page

Responsive design

The extension is responsive to mobile devices and work great regardless the type of screen or device used to view your store

Extension Support

Need Help?

Ulmod Support team is always ready to assist you, no matter which part of the world you are in. If something does happen and you think you might be experiencing an issue or bug, please contact us via [email protected] or submit a ticket from our Helpdesk Ticket and we will help you out.

Got Questions?

Should you have any questions or feature suggestions, please Contact Us. Your feedback is welcome!

Extension Product Page