Advanced Image Gallery for the free version of Elementor is an amazing components that offers the most advanced styling and customizing options to create a responsive image gallery that is both easy to maintain and scalable for future enhancements.
This widget offers a lot of options for displaying images with five differents layout, play with filter, show the images on a Fancybox, apply a ratio to them and showcase your content as a card, overlay or partial overlay.
Accessibility for Advanced image gallery widget
Tab / Shift-Tab keyboard keys to navigate between filter labels
Enter / Space keyboard keys to activate a filter
aria-label text 'Filter results by + filter label'
Tab / Shift-Tab keyboard keys to navigate between links
Home keyboard key to move focus to the first link
End keyboard key to move focus to the last link
Escape keyboard key exit the grid
aria-label text 'View post + post title' on each link
Use the component Advanced Image Gallery
The plugin Elementor is installed and active.
The plugin EAC components is installed and active.
From the editor settings panel (EAC advanced) you have to drag & drop the Advanced Images gallery icon on the panel preview.
Add a custom link for each image and keywords to build a filter
Using default links
The media library screen lets you see which media are attached to a post (Uploaded to column). If you select an attachment (Image) linked to a post, this link will be used as the default URL.
Activate a link and add keywords to the filter
Because we don’t want to add new fields without your consent, you need to activate an option to enable this feature knowingly.
Of course, if you disable this option, the fields will be removed from the media library, but the values will be retained for future use.
From the dashboard EAC components settings, WordPress tab and enable Media custom fields option.
Two new fields have now been added to each image in the media library.
EAC custom URL: to create an image-specific URL
EAC categories: to add image-related keywords that will be used to build the filter.
Add images you want to insert in the gallery
There are four ways to insert images into the gallery
Select the images and fill the fields to display the right content
Click on the media library button and select multiple images and they will appear after your selection.
The set of fields that will be used to display the content of each item.
Fields can be filled in directly when selecting images in the dialog box and saved after clicking on the ‘Insert gallery’ button.
Using dynamic tags to create a gallery
After clicking on the wrench icon you have five tags if the Woocommerce plugin is installed.
EAC post/Image gallery create a gallery from attachments (images) associated with the current post, chapter Using default links.
EAC Woocommerce
Product image gallery create a gallery of a product and related images (Product gallery).
Category image gallery create a gallery of a category with related images.
Categories image gallery create a gallery of all categories with their related images.
Featured image gallery create a gallery with featured images.
Best sellers gallery create a gellery with best-selling products.
Configuring image gallery global settings
This section provides numerous tools, which allow you to entirely personalize the features of your gallery, slideshows, image lightbox and more.
Layout select one of five render types such as Masonry, Grid, Metro, Justify and Slider.
Number of columns per device, random display and right/left display direction.
Content layout you can display content in three ways: as a card, with an overlay or partial overlay in wich you define the height of the overlay.
Content alignment vertical alignment and horizontal alignment for the content.
Image select resolution, delayed loading and apply ratio to images.
Select the content you want to display
Filters display the filter created from the keywords associated with each image. Chapter Activate a link and add keywords to the filter.
Post show or hide certain content elements.
Links add the ‘nofollow’ attribute to all links, especially external links. The link should be on the image or on the title, and activate the Fancybox on images.
Customize the style of image gallery elements
In the style tab, you’ll find all the elements of the selected content and can apply styles to them in line with your graphic guidelines.
You can choose from nine global styles and define the margins between items as well as the background color for the widget.
If the filter is active, you can define its position, apply a shape for each keyword, their color and the background color.
For images, you can define a border, its shape and apply CSS filters.
Title color and typography.
And finally, if you’ve chosen the overlay to display content, you’ll define its color, opacity and internal margins.
