Summary

  • Overview
  • Enable Image Gallery Filter
  • Add Image Gallery Category
  • Edit Image Gallery Category Name
  • Change Image Category Order
  • Image Gallery Category Options
  • Assign Category To Each Image
  • Image Gallery Filter Spacing And Size
  • Image Gallery Filter Styling
  • Test Image Gallery Filter

Overview

You can have too many Images added to the Image Gallery Element. Therefore, we have added the Image Gallery Filter, allowing your users only to see the Images of the specific Category in which they are most interested.

This helps add more helpful content to a page, not complicating the user interface.

image-gallery-filter.png

Enable Image Gallery Filter

You can enable the Filter property in the Property Panel for the selected Image Gallery Element.

enable-gallery-filter.png

Add Image Gallery Category

To add a new Image Category, click the Add button in the Image Gallery Panel in the Properties.

Enter the new Category Name in the dialog.

add-image-category.gif

Assign Category To Each Image

To assign a Category to each Image, select an Image in the Gallery, go to the Property Panel, and choose the Category.

If you do not assign the specific Category, the Image will be shown for All.

assign-category-gallery-image.png

Edit Image Gallery Category Name

To add a new Image Category Name, click on it in the Property Panel's Filter section list.

edit-gallery-category-name.png

Change Image Category Order

To change the Category Order in the Filter, You can move the Image Gallery Category by dragging the Move Icon at the Category Name.

move-gallery-category.gif

Image Gallery Category Options

Click the Options icon for the Category Name to open the list of available options.

gallery-category-options.png

Delete Gallery Category

Click on the Bucket icon to delete the Image Gallery Category.

delete-gallery-category.png

Image Gallery Filter Spacing And Size

You can change the Spacing and Size of the Gallery Image tabs in the Property Panel.

gallery-filter-spacing-size.png

Image Gallery Filter Styling

You can also stylize the Category Tabs of the Image Gallery Filter in the Property Panel.

gallery-filter-styling.png

Test Image Gallery Filter

Publish or Preview the page and test the Image Gallery Filter live by clicking on the Tabs.

test-gallery-filter.gif

## Summary - Overview - Enable Image Gallery Filter - Add Image Gallery Category - Edit Image Gallery Category Name - Change Image Category Order - Image Gallery Category Options - Assign Category To Each Image - Image Gallery Filter Spacing And Size - Image Gallery Filter Styling - Test Image Gallery Filter ## Overview You can have too many Images added to the Image Gallery Element. Therefore, we have added the Image Gallery Filter, allowing your users only to see the Images of the specific Category in which they are most interested. This helps add more helpful content to a page, not complicating the user interface. !image-gallery-filter.png! ## Enable Image Gallery Filter You can enable the Filter property in the Property Panel for the selected Image Gallery Element. !enable-gallery-filter.png! ## Add Image Gallery Category To add a new Image Category, click the Add button in the Image Gallery Panel in the Properties. Enter the new Category Name in the dialog. !add-image-category.gif! ## Assign Category To Each Image To assign a Category to each Image, select an Image in the Gallery, go to the Property Panel, and choose the Category. If you do not assign the specific Category, the Image will be shown for All. !assign-category-gallery-image.png! ## Edit Image Gallery Category Name To add a new Image Category Name, click on it in the Property Panel's Filter section list. !edit-gallery-category-name.png! ## Change Image Category Order To change the Category Order in the Filter, You can move the Image Gallery Category by dragging the Move Icon at the Category Name. !move-gallery-category.gif! ## Image Gallery Category Options Click the Options icon for the Category Name to open the list of available options. !gallery-category-options.png! ## Delete Gallery Category Click on the Bucket icon to delete the Image Gallery Category. !delete-gallery-category.png! ## Image Gallery Filter Spacing And Size You can change the Spacing and Size of the Gallery Image tabs in the Property Panel. !gallery-filter-spacing-size.png! ## Image Gallery Filter Styling You can also stylize the Category Tabs of the Image Gallery Filter in the Property Panel. !gallery-filter-styling.png! ## Test Image Gallery Filter Publish or Preview the page and test the Image Gallery Filter live by clicking on the Tabs. !test-gallery-filter.gif! ##