{"id":4268,"date":"2026-09-20T20:21:13","date_gmt":"2026-09-20T20:21:13","guid":{"rendered":"https:\/\/marketplace.emcptools.com\/widgets\/filterable-gallery\/"},"modified":"2026-09-21T17:36:36","modified_gmt":"2026-09-21T17:36:36","slug":"filterable-gallery","status":"publish","type":"page","link":"https:\/\/marketplace.emcptools.com\/widgets\/filterable-gallery\/","title":{"rendered":"Filterable Gallery"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4268\" class=\"elementor elementor-4268\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-334ecc8 e-flex e-con-boxed e-con e-parent\" data-id=\"334ecc8\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-44f0ec0 e-flex e-con-full e-con e-child\" data-id=\"44f0ec0\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-867285b elementor-widget elementor-widget-html\" data-id=\"867285b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><div class=\"top\"><a href=\"https:\/\/marketplace.emcptools.com\/widgets\/\">&larr; All widgets<\/a><span>Widget 89 &middot; <code>emcp_custom_89<\/code><\/span><\/div><h2 style=\"font-size:36px;margin-bottom:8px\">Filterable Gallery<\/h2><div class=\"chips\"><span class=\"chip dark\">Elementor widget<\/span><span class=\"chip\">1 layout<\/span><span class=\"chip\">5 content options<\/span><span class=\"chip\">9 style options<\/span><span class=\"chip\">2 panel sections<\/span><\/div><p>Built with the EMCP Widget Builder and registered under the <b>EMCP Custom<\/b> category of the Elementor panel. Search the panel for: gallery, filter, portfolio, grid.<\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c26eebf e-flex e-con-full e-con e-child\" data-id=\"c26eebf\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dc7e494 elementor-widget elementor-widget-html\" data-id=\"dc7e494\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><h2>Setup guide<\/h2><ol><li>Open a page in Elementor, search the panel for <b>Filterable Gallery<\/b> and drag it into a container.<\/li><li><b>Content &rsaquo; Content<\/b>: Columns, Show filters, &quot;All&quot; label, Title HTML Tag, Items.<\/li><li><b>Style tab<\/b> sections: Style. Colours, typography and spacing set here are scoped to this widget instance.<\/li><li>Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.<\/li><\/ol><div class=\"note\">Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.<\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d76889f e-flex e-con-full e-con e-child\" data-id=\"d76889f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b95eaf9 elementor-widget elementor-widget-html\" data-id=\"b95eaf9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><div class=\"demo-head\"><span>Demo<\/span><h3>Default<\/h3><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-16edca2 elementor-widget elementor-widget-emcp_custom_89\" data-id=\"16edca2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"emcp_custom_89.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"emcp-fg\" data-cols=\"3\" data-all=\"All\" data-filters=\"1\"><div class=\"emcp-fg__filters\"><\/div><div class=\"emcp-fg__grid\"><div class=\"emcp-fg__item\" data-cat=\"Branding\" data-link=\"\"><img decoding=\"async\" class=\"emcp-fg__img\" src=\"http:\/\/marketplace.emcptools.com\/widgets\/wp-content\/uploads\/2026\/09\/photo-1507915135761-41a0a222c709.jpg\" alt=\"Brand refresh\" \/><span class=\"emcp-fg__cap\"><h3 class=\"emcp-fg__title\">Brand refresh<\/h3><em class=\"emcp-fg__cat\">Branding<\/em><\/span><\/div><div class=\"emcp-fg__item\" data-cat=\"Web\" data-link=\"\"><img decoding=\"async\" class=\"emcp-fg__img\" src=\"http:\/\/marketplace.emcptools.com\/widgets\/wp-content\/uploads\/2026\/09\/photo-1510563800743-aed236490d08.jpg\" alt=\"Landing page\" \/><span class=\"emcp-fg__cap\"><h3 class=\"emcp-fg__title\">Landing page<\/h3><em class=\"emcp-fg__cat\">Web<\/em><\/span><\/div><div class=\"emcp-fg__item\" data-cat=\"Design\" data-link=\"\"><img decoding=\"async\" class=\"emcp-fg__img\" src=\"http:\/\/marketplace.emcptools.com\/widgets\/wp-content\/uploads\/2026\/09\/photo-1517701550927-30cf4ba1dba5.jpg\" alt=\"Packaging set\" \/><span class=\"emcp-fg__cap\"><h3 class=\"emcp-fg__title\">Packaging set<\/h3><em class=\"emcp-fg__cat\">Design<\/em><\/span><\/div><div class=\"emcp-fg__item\" data-cat=\"Web\" data-link=\"\"><img decoding=\"async\" class=\"emcp-fg__img\" src=\"http:\/\/marketplace.emcptools.com\/widgets\/wp-content\/uploads\/2026\/09\/photo-1518235506717-e1ed3306a89b.jpg\" alt=\"Mobile app\" \/><span class=\"emcp-fg__cap\"><h3 class=\"emcp-fg__title\">Mobile app<\/h3><em class=\"emcp-fg__cat\">Web<\/em><\/span><\/div><div class=\"emcp-fg__item\" data-cat=\"Design\" data-link=\"\"><img decoding=\"async\" class=\"emcp-fg__img\" src=\"http:\/\/marketplace.emcptools.com\/widgets\/wp-content\/uploads\/2026\/09\/photo-1544367567-0f2fcb009e0b.jpg\" alt=\"Poster series\" \/><span class=\"emcp-fg__cap\"><h3 class=\"emcp-fg__title\">Poster series<\/h3><em class=\"emcp-fg__cat\">Design<\/em><\/span><\/div><div class=\"emcp-fg__item\" data-cat=\"Branding\" data-link=\"\"><img decoding=\"async\" class=\"emcp-fg__img\" src=\"http:\/\/marketplace.emcptools.com\/widgets\/wp-content\/uploads\/2026\/09\/photo-1561658286-ecb9fe9d8480.jpg\" alt=\"Identity system\" \/><span class=\"emcp-fg__cap\"><h3 class=\"emcp-fg__title\">Identity system<\/h3><em class=\"emcp-fg__cat\">Branding<\/em><\/span><\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8a3ce31 e-flex e-con-full e-con e-child\" data-id=\"8a3ce31\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7c52fd7 elementor-widget elementor-widget-html\" data-id=\"7c52fd7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><h2>Options reference<\/h2><p>Every control the widget exposes, grouped by panel section. Names in <code>code<\/code> are the setting keys used by the MCP tools (<code>add-free-widget<\/code>, <code>update-widget<\/code>).<\/p><h3 style=\"margin-top:8px\">Content tab<\/h3><p style=\"margin:14px 0 6px;font-weight:700\">Content<\/p><table><thead><tr><th style=\"width:24%\">Option<\/th><th style=\"width:11%\">Type<\/th><th style=\"width:27%\">Choices \/ range<\/th><th style=\"width:12%\">Default<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><b>Columns<\/b><br><code>columns<\/code><\/td><td>Dropdown<\/td><td>2, 3, 4<\/td><td>3<\/td><td><\/td><\/tr><tr><td><b>Show filters<\/b><br><code>show_filters<\/code><\/td><td>Toggle<\/td><td>on \/ off<\/td><td>yes<\/td><td><\/td><\/tr><tr><td><b>&quot;All&quot; label<\/b><br><code>all_label<\/code><\/td><td>Text<\/td><td><\/td><td>All<\/td><td><\/td><\/tr><tr><td><b>Title HTML Tag<\/b><br><code>title_tag<\/code><\/td><td>Dropdown<\/td><td>H1, H2, H3, H4, H5, H6, DIV, P, SPAN<\/td><td>h3<\/td><td><\/td><\/tr><tr><td><b>Items<\/b><br><code>items<\/code><\/td><td>Repeater<\/td><td><\/td><td>3 items<\/td><td><\/td><\/tr><tr><td>&#8627; <b>Image<\/b><br><code>image<\/code><\/td><td>Image<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td>&#8627; <b>Title<\/b><br><code>title<\/code><\/td><td>Text<\/td><td><\/td><td>Project<\/td><td><\/td><\/tr><tr><td>&#8627; <b>Category<\/b><br><code>category<\/code><\/td><td>Text<\/td><td><\/td><td>Design<\/td><td><\/td><\/tr><tr><td>&#8627; <b>Link<\/b><br><code>link<\/code><\/td><td>Link<\/td><td><\/td><td><\/td><td><\/td><\/tr><\/tbody><\/table><h3 style=\"margin-top:8px\">Style tab<\/h3><p style=\"margin:14px 0 6px;font-weight:700\">Style<\/p><table><thead><tr><th style=\"width:24%\">Option<\/th><th style=\"width:11%\">Type<\/th><th style=\"width:27%\">Choices \/ range<\/th><th style=\"width:12%\">Default<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><b>Image Fit<\/b><br><code>img_fit<\/code><\/td><td>Dropdown<\/td><td>Cover (fill &amp; crop), Contain (fit whole)<\/td><td>cover<\/td><td><\/td><\/tr><tr><td><b>Image Position<\/b><br><code>img_position<\/code><\/td><td>Dropdown<\/td><td>Center, Top, Bottom, Left, Right<\/td><td>center<\/td><td><\/td><\/tr><tr><td><b>Corner Radius<\/b><br><code>radius<\/code><\/td><td>Slider<\/td><td>min 0, max 40, px<\/td><td>12<\/td><td><\/td><\/tr><tr><td><b>Filter Accent<\/b><br><code>accent<\/code><\/td><td>Color<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Title Typography<\/b><br><code>title_typo<\/code><\/td><td>Typography<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Category Typography<\/b><br><code>cat_typo<\/code><\/td><td>Typography<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Caption Text Color<\/b><br><code>cap_color<\/code><\/td><td>Color<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Overlay Gradient (bottom)<\/b><br><code>ov_end<\/code><\/td><td>Color<\/td><td><\/td><td>rgba(0,0,0,0.85)<\/td><td><\/td><\/tr><tr><td><b>Overlay Gradient (top)<\/b><br><code>ov_start<\/code><\/td><td>Color<\/td><td><\/td><td>rgba(0,0,0,0)<\/td><td><\/td><\/tr><\/tbody><\/table><h3>Add it with the MCP tools<\/h3><p>Any connected agent can place this widget: call <code>add-free-widget<\/code> with <code>widget_type: \"emcp_custom_89\"<\/code> and a <code>settings<\/code> object using the keys above. Run <code>get-custom-widget<\/code> with id <code>89<\/code> for the full JSON spec.<\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>&larr; All widgetsWidget 89 &middot; emcp_custom_89 Filterable Gallery Elementor widget1 layout5 content options9 style options2 panel sections Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: gallery, filter, portfolio, grid. Setup guide Open a page in Elementor, search the panel for Filterable Gallery [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-4268","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/pages\/4268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/comments?post=4268"}],"version-history":[{"count":13,"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/pages\/4268\/revisions"}],"predecessor-version":[{"id":6315,"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/pages\/4268\/revisions\/6315"}],"wp:attachment":[{"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/media?parent=4268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}