Magento 2 Image/Photos Gallery Extension

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"

Managing Gallery

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.

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

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.

Gallery Widget

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

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

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

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

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

.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.