Image/Video Gallery

Features

This module allows blocks of galleries or images to be added to the homepage, left column, right column and CMS pages. There is no limit on the number of blocks, galleries and images that can be displayed. It is also possible to have subgalleries within galleries with no limit to the depth. Blocks, galleries and images can be displayed only on specific shops and can be hidden from the website until they are fully configured.

Blocks

Blocks can display galleries or images. There are options to change the title displayed at the top of the block, the maximum number of items to display and whether to randomise the order of the items. There are checkboxes to choose exactly which galleries to display or select images from.

Galleries

Galleries have a name, description, meta title, meta description, meta keywords and friendly URL. The description is displayed below the gallery name and above the gallery images. It is possible to upload a cover image for the gallery. If no cover image is uploaded, the first image in the gallery is displayed as the cover. Galleries can also be restricted to specific customer groups.

Images

Images have a caption, description, meta title, meta description, meta keywords and friendly URL. The description can be displayed above or below the image. An image can be displayed in multiple galleries at the same time. It is also possible to link an image to a specific category, CMS page, CMS category, manufacturer, supplier, page, video or external link instead of displaying a larger version of the image. There is also an option to display the image or link in the same tab, a new tab or in a Fancybox popup.

Customer Submissions

The module has the option to allow customers to submit an image and caption for inclusion in a gallery. For security reasons, submitted images are disabled and must be checked and enabled before they display in the gallery. There is also the option to send an email notification to the merchant every time a customer submits an image. Inside the email is a link that can be used to approve or delete the image without needing to log in to the Back Office. However, submitted images can still be enabled or deleted from the Back Office.

Product Page

The module adds an "Image/Video Gallery" tab to the product editor. This tab can be used to add a gallery tab to the product with a single page of images from a selected gallery. It is possible to display images from a different gallery on each product page and have a different tab title for each product, or no gallery tab at all for a product. If the gallery has more than a page of images, an "All images" link is displayed on the gallery tab to redirect to the gallery page with all the images. There is also an option to set a default gallery tab title to make it easier to create gallery tabs that all have the same name.

Custom Friendly URLs

By default, when friendly URLs are enabled, the gallery and image links are displayed without numbers like the following:
/en/gallery
/en/gallery/nature
/en/gallery/nature/sunset.html
/fr/galerie/nature/sunset.html

The /gallery part of the URL can be customized for each language or even removed to have links like /en/nature/sunset.html

Preferences

The Gallery > Preferences tab has many settings. The number of images per page can be set for gallery pages. The breadcrumb bar can be hidden on gallery and image pages. For thumbnails, the padding and border width can be changed and the shadow and captions hidden.

Social Buttons

There are also options to choose which social buttons are displayed including Facebook, Twitter, Pinterest and Google+. There is also an option add a Download button.

Thumbnails

It is possible to set the size of the thumbnails, small, medium, large and full images and choose how they are cropped. Images can be cropped from the top, bottom, center, left, right or not at all. There is also an option to link to the original image and a button to regenerate thumbnails.

Custom CSS

The Custom CSS section makes it is possible to modify the CSS used by galleries and images. There is a "Revert" button that can be used to return to the default CSS at any time. With the default CSS, flexbox is used to fit the maximum number of images on each line for the thumbnail width. The spacing between thumbnails is automatically adjusted so it is equal and the last thumbnail on each line finishes at the right edge of the column. Thumbnails have a shadow by default and captions are automatically truncated to one line with "..." added if necessary.

Fancybox

When Fancybox is enabled, there are many customization options available. There are options to set the animation speed, the margin around the popup image, the gutter spacing between images when swiping and whether to loop images. By default, the caption is displayed on the popup along with a pagination bar and button toolbar with share, slideshow, full-screen, thumbnail and close buttons. Each of these can be disabled and the slideshow speed can be changed. The full-screen mode and thumbnails pane can be set to display automatically. There are options to set whether to close the popup when the overlay is clicked and prevent right-clicking to make downloading images more difficult. By default, touch gestures, keyboard navigation and hash code navigation are enabled, but these can be disabled.

Image Pages

When Fancybox is disabled, selecting an image will open it on separate page with links back to the gallery and to the next and previous images in the gallery. These image pages are also used when sharing images through the social buttons.

Recommendations

By default, the Gallery > Images tab lists images from all galleries. There is a "Filter by gallery" option that can be used to display only images from the selected gallery. It is better to filter by gallery, since when adding an image, the gallery will be automatically selected in the "Gallery associations", which saves time and reduces errors.

Note that the friendly URLs of galleries and images must be unique for the links to work, since there is no number in the URL to distinguish between identical friendly URLs.