Filter Gallery add-on

Gallery with filter tags. Filter or sort items in any given layout by meta data.

Link Type Button

Link Type Title

Different Hover Image

Content Fields

Here is a list of common content fields for Gallery add-on.

Setting Description
Image An image field with an image picker.
Image ALT Insert Alt text, which is an important for SEO purposes and part of making a site accessible.
Title A text field used for title.
Meta A text field used for meta.
Content A text field for the main text blocks.
Tag Name Enter a comma-separated list of tags, for example: blue, white, black.
Link Enter the destination URL.
Hover Image Select an optional image that appears on hover.
Text Color Set light or dark color mode for text, buttons and controls.

Gallery settings, The Gallery Settings contains all the specific settings for an add-on. Here is a short overview.

Setting Description
Enable lightbox gallery Enable lightbox feature for gallery, default enabled.
Enable masonry effect The masonry effect creates a layout free of gap even if grid cell have different height.
Parallax To move single columns of a grid at different speeds while scrolling
Gutter Set the grid gutter width for columns.
Show dividers Select this option to separate grid cells with lines.

Filter Settings

Filter settings, The Filter Settings contains all the specific settings for an add-on. Here is a short overview.

Setting Description
Enable filter navigation Enable filter navigation for gallery
Replace All tag Add your text to replace the 'All' tag title
Style Select the filter style. The pill and divider styles are only available for horizontal subnavs
Position Position the navigation at the top, bottom, left or right. A larger style can be applied to left and right navigations.
Alignment Align the navigation's items.
Margin Set the vertical margin.

Column Settings

Columns control the grid layout of your content.

Setting Description
Phone Portrait/Phone Landscape/Tablet Landscape/Desktop/Large Screens Set the number of grid columns for each breakpoint. Inherit refers to the number of columns on the next smaller screen size.

Overlay Settings

Create an image overlay, which comes in different styles.

Setting Description
Mode: Cover/Caption/Icon When using cover mode, you need to set the text color manually
Display overlay on hover Display Image content on hover
Image Transition Select a hover transition for the Image (support 03 styles)
Style Select a style for the overlay(support 07 styles)
Text color Set light or dark color mode for text, buttons and controls
Padding Set the padding between the overlay and its content.
Overlay Positions A collection of utility classes to position content (13 positions support).
Margin Apply a margin between the overlay and the image container.

General Settings

General settings, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.

Setting Description
Margin Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. Margins of an element can be removed from the top and bottom.
Remove top margin. Use this option to remove the add-on's top margin
Remove bottom margin. Use this option to remove the add-on's bottom margin
Animation Overwrite the animation settings from the section. This won't have any effect unless animations are enabled for the add-on.
Alignment This option specifies the alignment of an add-on according to the surrounding element
Text Breakpoint Define the device width from which the alignment will apply.
Visibility Define when the add-on should be hidden.
CSS Class If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file.

Information

Joomla! name is used under a limited license from Open Source Matters in the United States and other countries. WarpTheme.com is not affiliated with or endorsed by Open Source Matters or the Joomla! project