{"id":17410,"date":"2025-06-22T05:40:29","date_gmt":"2025-06-22T05:40:29","guid":{"rendered":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/gallery-filter\/"},"modified":"2025-11-04T08:41:30","modified_gmt":"2025-11-04T08:41:30","slug":"gallery-filter","status":"publish","type":"docs","link":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/gallery-filter\/","title":{"rendered":"Gallery Filter Extension Documentation"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Gallery Filter lets you organize your images by category, making everything easier to view and manage. After turning it on from the settings, you can start adding filters, pick a layout style, and choose how your images should look.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s a simple way to build a neat and clear gallery, whether you&#8217;re showing photos, projects, or products.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Requirement<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Elementor (Page Builder)<\/li>\n\n\n\n<li>Animations Addons for Elementor (Our Plugin)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tip<\/strong>: Make sure Animation Addons is installed and activated on your WordPress site before you start.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How To Activate Gallery Filter<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to your<strong> WordPress Dashboard.<\/strong><\/li>\n\n\n\n<li>Click on <strong>Animation Addons.<\/strong><\/li>\n\n\n\n<li>Head to the<strong> Extension Tab.<\/strong><\/li>\n\n\n\n<li>Under <strong>Flips, <\/strong>toggle on <strong>Gallery Filter.<\/strong><\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1750\" height=\"876\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-1.webp\" alt=\"Gallery Filter 1\" class=\"wp-image-17418\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-1.webp 1750w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-1-300x150.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-1-1024x513.webp 1024w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-1-768x384.webp 768w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-1-20x10.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-1-32x16.webp 32w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-1-1536x769.webp 1536w\" sizes=\"(max-width: 1750px) 100vw, 1750px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 1: Insert and Activate Gallery<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">First, click on the \u2018<strong>+\u2019<\/strong> icon, then type <strong>\u201cFilterable Gallery<\/strong>\u201d in the search box.<\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img decoding=\"async\" width=\"1899\" height=\"844\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-2.webp\" alt=\"Gallery Filter 2\" class=\"wp-image-17419\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-2.webp 1899w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-2-300x133.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-2-1024x455.webp 1024w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-2-768x341.webp 768w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-2-20x9.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-2-32x14.webp 32w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-2-1536x683.webp 1536w\" sizes=\"(max-width: 1899px) 100vw, 1899px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Once you click on the Filterable gallery, you will find three options: <strong>Layer, Filter, and Gallery<\/strong>. Each setting helps you improve your gallery filter design. For example, I\u2019ll start with Layer, but you can start with any of them.<\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img decoding=\"async\" width=\"1754\" height=\"794\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-3.webp\" alt=\"Gallery Filter 3\" class=\"wp-image-17420\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-3.webp 1754w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-3-300x136.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-3-1024x464.webp 1024w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-3-768x348.webp 768w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-3-20x9.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-3-32x14.webp 32w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-3-1536x695.webp 1536w\" sizes=\"(max-width: 1754px) 100vw, 1754px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 2: Adjust Layout Style and Columns<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Choose a layout style to decide how your images will be shown, then pick how many columns you want to display items in each row. This makes your gallery look neat and well-arranged.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Layout&nbsp;<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now, in the Layout Style section, you will find two options: <strong>Grid<\/strong> and <strong>Masonry.<\/strong> The Grid setting ensures that all gallery items are placed in equal-sized rows and columns.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On the other hand, Masonry arranges items in columns, but their heights can vary based on the actual height of the images. For example, I chose Grid, but you can pick either one based on your preference.<\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img loading=\"lazy\" decoding=\"async\" width=\"331\" height=\"385\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-4.webp\" alt=\"Gallery Filter 4\" class=\"wp-image-17421\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-4.webp 331w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-4-258x300.webp 258w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-4-17x20.webp 17w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-4-28x32.webp 28w\" sizes=\"(max-width: 331px) 100vw, 331px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The Column setting lets you choose how many items line up in each row of your gallery. For example, I selected 3, but you can choose any number you prefer.<\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img loading=\"lazy\" decoding=\"async\" width=\"495\" height=\"489\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-5.webp\" alt=\"Gallery Filter 5\" class=\"wp-image-17422\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-5.webp 495w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-5-300x296.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-5-20x20.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-5-32x32.webp 32w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-5-70x70.webp 70w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-5-16x16.webp 16w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-5-40x40.webp 40w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-5-100x100.webp 100w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-5-50x50.webp 50w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-5-60x60.webp 60w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-5-18x18.webp 18w\" sizes=\"(max-width: 495px) 100vw, 495px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 3:\u00a0 Set Up Filters and Gallery Items<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Filters let you organize your gallery so visitors can easily find what they\u2019re looking for. Just add your categories, link them to each item, and set up the layout the way you want.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Filter<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Enable Filter:<\/strong> The Enable Filter setting has two options: <strong>Show<\/strong> and <strong>Hide<\/strong>. If you select Hide, the filter item settings won\u2019t be visible. However, if you select Show, the filter item settings will appear.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Filter All labels: <\/strong>In the Filter All Labels setting, you&#8217;ll see options like <strong>\u2018All\u2019<\/strong> set as the default, but you can change it to something like <strong>Show All<\/strong>, <strong>Everything,<\/strong> or <strong>All Projects.<\/strong> In this case, I kept it as the default, but you can customize it however you prefer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Filter Items: <\/strong>The Filter Items settings let you manage and organize the categories (or filters) that appear above your gallery. You can also set a title based on your preference.<br>For example, I named it<strong> Item 1<\/strong>, <strong>Item 2<\/strong>, and <strong>Item 3<\/strong> in categories.<\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img loading=\"lazy\" decoding=\"async\" width=\"1753\" height=\"771\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-6.webp\" alt=\"Gallery Filter 6\" class=\"wp-image-17423\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-6.webp 1753w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-6-300x132.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-6-1024x450.webp 1024w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-6-768x338.webp 768w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-6-20x9.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-6-32x14.webp 32w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-6-1536x676.webp 1536w\" sizes=\"(max-width: 1753px) 100vw, 1753px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Gallary<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In the Gallery settings, you can add and manage the images or items that will appear in the gallery. You can include multiple images for each item.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, I set it to show three or four images per item, but you can add as many as you like.<\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img loading=\"lazy\" decoding=\"async\" width=\"1739\" height=\"749\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-7.webp\" alt=\"Gallery Filter 7\" class=\"wp-image-17424\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-7.webp 1739w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-7-300x129.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-7-1024x441.webp 1024w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-7-768x331.webp 768w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-7-20x9.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-7-32x14.webp 32w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-7-1536x662.webp 1536w\" sizes=\"(max-width: 1739px) 100vw, 1739px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Filter Name:<\/strong> After that, click on any item and enter the filter name you already set in the Filter Items settings.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In my case, I used<strong> \u201cItem 1,\u201d<\/strong> <strong>\u201cItem 2,\u201d<\/strong> and <strong>\u201cItem 3,\u201d <\/strong>so I will enter the names <strong>\u201cItem 1,\u201d<\/strong> <strong>\u201cItem 2,\u201d <\/strong>and <strong>\u201cItem 3\u201d<\/strong> three or four times in the Gallery Filter Name field for each item I want to display under that filter.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Type: <\/strong>In type settings, you will find options like Image, Audio, and Video. For example, I have picked an image since I like to show my audience to image gallery on my site. However, you can choose anything.<\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img loading=\"lazy\" decoding=\"async\" width=\"1714\" height=\"787\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-8.webp\" alt=\"Gallery Filter 8\" class=\"wp-image-17426\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-8.webp 1714w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-8-300x138.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-8-1024x470.webp 1024w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-8-768x353.webp 768w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-8-20x9.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-8-32x15.webp 32w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-8-1536x705.webp 1536w\" sizes=\"(max-width: 1714px) 100vw, 1714px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img loading=\"lazy\" decoding=\"async\" width=\"1714\" height=\"783\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-9.webp\" alt=\"Gallery Filter 9\" class=\"wp-image-17428\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-9.webp 1714w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-9-300x137.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-9-1024x468.webp 1024w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-9-768x351.webp 768w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-9-20x9.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-9-32x15.webp 32w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-9-1536x702.webp 1536w\" sizes=\"(max-width: 1714px) 100vw, 1714px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Lightbox<\/strong>: The Lightbox setting lets you control whether images open in a pop-up (overlay view) when clicked. If you turn it on, the image will open in a pop-up.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you keep it off, the image won\u2019t open in a pop-up. I set it to <strong>Show, <\/strong>but you can choose whatever works best for you.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Masonry Class:<\/strong> It offers four options: Default, Big, Horizontal, and Vertical.&nbsp; If you choose <strong>Default<\/strong>, the items will stay at their regular size.&nbsp; <strong>Big<\/strong> makes the items larger than usual. <strong>Horizontal<\/strong> makes the items wider but keeps the height the same.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Vertical<\/strong> makes the items taller and stretches them across two rows. For example, I chose <strong>Big<\/strong>, but you can pick any option that works best for you.<\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img loading=\"lazy\" decoding=\"async\" width=\"461\" height=\"432\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-10.webp\" alt=\"\" class=\"wp-image-17429\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-10.webp 461w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-10-300x281.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-10-20x20.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-10-32x30.webp 32w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-10-16x16.webp 16w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-10-18x18.webp 18w\" sizes=\"(max-width: 461px) 100vw, 461px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Final Result<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img loading=\"lazy\" decoding=\"async\" width=\"1152\" height=\"648\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-11.gif\" alt=\"Gallery Filter 11\" class=\"wp-image-17430\" title=\"Dashboard\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>You Did It<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You\u2019ve successfully finished setting up the Gallery Filter. Now your content is grouped and easy to browse, with filters that let visitors jump right to what they\u2019re looking for. Whether it\u2019s images, designs, or anything else, the gallery feels smooth and organized.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Additionally, if you have any questions or need a hand, feel free to reach out to our support team\u2014we\u2019re always here to help.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gallery Filter lets you organize your images by category, making everything easier to view and manage. After turning it on from the settings, you can start adding filters, pick a layout style, and choose how your images should look. It\u2019s a simple way to build a neat and clear gallery, whether you&#8217;re showing photos, projects, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":18388,"parent":24,"menu_order":8,"comment_status":"closed","ping_status":"closed","template":"","doc_tag":[],"doc_badge":[],"class_list":["post-17410","docs","type-docs","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Gallery Filter Extension Documentation - Animation Addons<\/title>\n<meta name=\"description\" content=\"Organize images by category with Gallery Filter in Elementor. Create neat, filterable galleries that are easy to browse and visually appealing.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/animation-addons.com\/docs\/gsap-extensions\/gallery-filter\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gallery Filter Extension Documentation - Animation Addons\" \/>\n<meta property=\"og:description\" content=\"Organize images by category with Gallery Filter in Elementor. Create neat, filterable galleries that are easy to browse and visually appealing.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/animation-addons.com\/docs\/gsap-extensions\/gallery-filter\/\" \/>\n<meta property=\"og:site_name\" content=\"Animation Addons\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/animationaddons\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-04T08:41:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-Extension-Documentation.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"48\" \/>\n\t<meta property=\"og:image:height\" content=\"48\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@animationaddons\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/gsap-extensions\\\/gallery-filter\\\/\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/gsap-extensions\\\/gallery-filter\\\/\",\"name\":\"Gallery Filter Extension Documentation - Animation Addons\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/gsap-extensions\\\/gallery-filter\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/gsap-extensions\\\/gallery-filter\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/Gallery-Filter-Extension-Documentation.webp\",\"datePublished\":\"2025-06-22T05:40:29+00:00\",\"dateModified\":\"2025-11-04T08:41:30+00:00\",\"description\":\"Organize images by category with Gallery Filter in Elementor. Create neat, filterable galleries that are easy to browse and visually appealing.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/gsap-extensions\\\/gallery-filter\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/animation-addons.com\\\/docs\\\/gsap-extensions\\\/gallery-filter\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/gsap-extensions\\\/gallery-filter\\\/#primaryimage\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/Gallery-Filter-Extension-Documentation.webp\",\"contentUrl\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/Gallery-Filter-Extension-Documentation.webp\",\"width\":48,\"height\":48,\"caption\":\"Gallery filter extension documentation\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/gsap-extensions\\\/gallery-filter\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"GSAP Extensions\",\"item\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/gsap-extensions\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Gallery Filter Extension Documentation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#website\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/\",\"name\":\"Animation Addons\",\"description\":\"Best Animation Plugin for WordPress\",\"publisher\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#organization\"},\"alternateName\":\"Animation Addons for Elementor\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#organization\",\"name\":\"Animation Addons\",\"alternateName\":\"Animation Addons for Elementor\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/logo.svg\",\"width\":48,\"height\":48,\"caption\":\"Animation Addons\"},\"image\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/animationaddons\",\"https:\\\/\\\/x.com\\\/animationaddons\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/animation-addons\\\/\",\"https:\\\/\\\/www.pinterest.com\\\/animationaddons\\\/\",\"https:\\\/\\\/www.instagram.com\\\/aimationaddons\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@animationaddons\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gallery Filter Extension Documentation - Animation Addons","description":"Organize images by category with Gallery Filter in Elementor. Create neat, filterable galleries that are easy to browse and visually appealing.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/gallery-filter\/","og_locale":"en_US","og_type":"article","og_title":"Gallery Filter Extension Documentation - Animation Addons","og_description":"Organize images by category with Gallery Filter in Elementor. Create neat, filterable galleries that are easy to browse and visually appealing.","og_url":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/gallery-filter\/","og_site_name":"Animation Addons","article_publisher":"https:\/\/www.facebook.com\/animationaddons","article_modified_time":"2025-11-04T08:41:30+00:00","og_image":[{"width":48,"height":48,"url":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-Extension-Documentation.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_site":"@animationaddons","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/gallery-filter\/","url":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/gallery-filter\/","name":"Gallery Filter Extension Documentation - Animation Addons","isPartOf":{"@id":"https:\/\/animation-addons.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/gallery-filter\/#primaryimage"},"image":{"@id":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/gallery-filter\/#primaryimage"},"thumbnailUrl":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-Extension-Documentation.webp","datePublished":"2025-06-22T05:40:29+00:00","dateModified":"2025-11-04T08:41:30+00:00","description":"Organize images by category with Gallery Filter in Elementor. Create neat, filterable galleries that are easy to browse and visually appealing.","breadcrumb":{"@id":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/gallery-filter\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/animation-addons.com\/docs\/gsap-extensions\/gallery-filter\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/gallery-filter\/#primaryimage","url":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-Extension-Documentation.webp","contentUrl":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/06\/Gallery-Filter-Extension-Documentation.webp","width":48,"height":48,"caption":"Gallery filter extension documentation"},{"@type":"BreadcrumbList","@id":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/gallery-filter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/animation-addons.com\/docs\/"},{"@type":"ListItem","position":2,"name":"GSAP Extensions","item":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/"},{"@type":"ListItem","position":3,"name":"Gallery Filter Extension Documentation"}]},{"@type":"WebSite","@id":"https:\/\/animation-addons.com\/docs\/#website","url":"https:\/\/animation-addons.com\/docs\/","name":"Animation Addons","description":"Best Animation Plugin for WordPress","publisher":{"@id":"https:\/\/animation-addons.com\/docs\/#organization"},"alternateName":"Animation Addons for Elementor","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/animation-addons.com\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/animation-addons.com\/docs\/#organization","name":"Animation Addons","alternateName":"Animation Addons for Elementor","url":"https:\/\/animation-addons.com\/docs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/animation-addons.com\/docs\/#\/schema\/logo\/image\/","url":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/logo.svg","contentUrl":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/logo.svg","width":48,"height":48,"caption":"Animation Addons"},"image":{"@id":"https:\/\/animation-addons.com\/docs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/animationaddons","https:\/\/x.com\/animationaddons","https:\/\/www.linkedin.com\/company\/animation-addons\/","https:\/\/www.pinterest.com\/animationaddons\/","https:\/\/www.instagram.com\/aimationaddons\/","https:\/\/www.tiktok.com\/@animationaddons"]}]}},"author_avatar":"https:\/\/secure.gravatar.com\/avatar\/d0824328e817de9f5f8d005a4b8d1fcea87dd03cee2b85f00c4d3cb2da172cfe?s=96&d=mm&r=g","author_name":"docs_admin","_links":{"self":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/17410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/comments?post=17410"}],"version-history":[{"count":10,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/17410\/revisions"}],"predecessor-version":[{"id":18080,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/17410\/revisions\/18080"}],"up":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/24"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/media\/18388"}],"wp:attachment":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/media?parent=17410"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/doc_tag?post=17410"},{"taxonomy":"doc_badge","embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/doc_badge?post=17410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}