Hi,
I created a gallery with a filter and some space on the right section of the page to customize certain elements. Overall, it looks pretty good, but there are still some features it’s not doing that I need. I think I need help with the code. I’m not sure how to implement this or if I should do it differently without using AI.
I’m using the Dawn theme and I want to create a gallery page that shows 4 pictures per row, with the ability to freely add or remove images in the future. Each picture should be linked to a specific theme and that’s what the filter is for.
Also, the background behind the gallery isn’t changing, and the padding adjustments aren’t applying either.
Here’s the code:
{% doc %}
@prompt
Gallery template with a padding of 6px on top of the gallery and 6px padding 4 at the bottom of the gallery. Full background color of this gallery to be black and i can edit easily.aGallery is where Ii can drop images inside, 4 columns, 6 rows, I can edit and add more in the future so give me a section where i can easily delete and add in the editing section. I want to add filter buttons on top of this gallery and for each button to be linked to picture that connects it to a theme., Vertical instead of square pictures
{% enddoc %}
{% assign ai_gen_id = block.id | replace: ‘_’, ‘’ | downcase %}
{% style %}
.ai-gallery-container-{{ ai_gen_id }} {
background-color: {{ block.settings.background_color }};
padding: {{ block.settings.padding_top }}px 0 {{ block.settings.padding_bottom }}px 0;
}
.ai-gallery-wrapper-{{ ai_gen_id }} {
max-width: 100%;
margin: 0 auto;
padding: 0 20px;
}
.ai-gallery-filters-{{ ai_gen_id }} {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 30px;
justify-content: center;
}
.ai-gallery-filter-button-{{ ai_gen_id }} {
padding: 10px 20px;
background-color: {{ block.settings.filter_button_bg }};
color: {{ block.settings.filter_button_text }};
border: 1px solid {{ block.settings.filter_button_border }};
border-radius: {{ block.settings.filter_button_radius }}px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
font-weight: 500;
}
.ai-gallery-filter-button-{{ ai_gen_id }}:hover,
.ai-gallery-filter-button-{{ ai_gen_id }}.active {
background-color: {{ block.settings.filter_button_active_bg }};
color: {{ block.settings.filter_button_active_text }};
border-color: {{ block.settings.filter_button_active_border }};
}
.ai-gallery-grid-{{ ai_gen_id }} {
display: grid;
grid-template-columns: repeat({{ block.settings.columns_desktop }}, 1fr);
gap: {{ block.settings.image_spacing }}px;
}
.ai-gallery-item-{{ ai_gen_id }} {
position: relative;
aspect-ratio: {{ block.settings.aspect_ratio }};
overflow: hidden;
border-radius: {{ block.settings.image_border_radius }}px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.ai-gallery-item-{{ ai_gen_id }}.hidden {
display: none;
}
.ai-gallery-item-{{ ai_gen_id }}:hover {
transform: scale(1.05);
}
.ai-gallery-item-{{ ai_gen_id }} img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ai-gallery-placeholder-{{ ai_gen_id }} {
width: 100%;
height: 100%;
background-color: #f4f4f4;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.ai-gallery-placeholder-{{ ai_gen_id }} svg {
width: 60%;
height: 60%;
opacity: 0.3;
}
.ai-gallery-empty-state-{{ ai_gen_id }} {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #666;
text-align: center;
pointer-events: none;
}
@media screen and (max-width: 749px) {
.ai-gallery-grid-{{ ai_gen_id }} {
grid-template-columns: repeat({{ block.settings.columns_mobile }}, 1fr);
}
.ai-gallery-filters-{{ ai_gen_id }} {
gap: 8px;
margin-bottom: 20px;
}
.ai-gallery-filter-button-{{ ai_gen_id }} {
padding: 8px 16px;
font-size: 13px;
}
}
@media screen and (max-width: 480px) {
.ai-gallery-wrapper-{{ ai_gen_id }} {
padding: 0 15px;
}
}
{% endstyle %}<gallery-filter-{{ ai_gen_id }}
class=“ai-gallery-container-{{ ai_gen_id }}”
{{ block.shopify_attributes }}
>
{% if block.settings.show_filters %}
<div class="ai-gallery-filters-{{ ai_gen_id }}"><button
class="ai-gallery-filter-button-{{ ai_gen_id }} active"
data-filter="all"
>
All
</button>
{% for i in (1..6) %}
{% assign filter_name_key = ‘filter_’ | append: i | append: ‘_name’ %}
{% assign filter_name = block.settings[filter_name_key] %}
{% if filter_name != blank %}
<button
class="ai-gallery-filter-button-{{ ai_gen_id }}"
data-filter="filter-{{ i }}"
>
{{ filter_name }}
</button>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% for i in (1..24) %}
{% assign image_key = ‘image_’ | append: i %}
{% assign filter_key = ‘image_’ | append: i | append: ‘_filter’ %}
{% assign image = block.settings[image_key] %}
{% assign image_filter = block.settings[filter_key] %}
<div
class="ai-gallery-item-{{ ai_gen_id }}"
data-category="{% if image_filter != blank %}filter-{{ image_filter }}{% else %}all{% endif %}"
>
{% if image %}
<img
src="{{ image | image_url: width: 600}}"
alt="{{ image.alt | escape }}"
loading="lazy"
width="600"
height="800"
>
{% else %}
<div class="ai-gallery-placeholder-{{ ai_gen_id }}">
{{ ‘image’ | placeholder_svg_tag }}
Add image {{ i }}
</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</gallery-filter-{{ ai_gen_id }}>
{% schema %}
{
“name”: “Gallery with filters”,
“settings”: [
{
"type": "header",
"content": "Gallery style"
},
{
"type": "color",
"id": "background_color",
"label": "Background color",
"default": "#000000"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Top padding",
"default": 6
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Bottom padding",
"default": 6
},
{
"type": "select",
"id": "aspect_ratio",
"label": "Image aspect ratio",
"options": \[
{"value": "3/4", "label": "Portrait (3:4)"},
{"value": "2/3", "label": "Tall portrait (2:3)"},
{"value": "9/16", "label": "Vertical (9:16)"},
{"value": "1/1", "label": "Square (1:1)"},
{"value": "4/3", "label": "Landscape (4:3)"}
\],
"default": "3/4"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 6,
"step": 1,
"label": "Columns on desktop",
"default": 4
},
{
"type": "select",
"id": "columns_mobile",
"label": "Columns on mobile",
"options": \[
{"value": "1", "label": "1"},
{"value": "2", "label": "2"}
\],
"default": "2"
},
{
"type": "range",
"id": "image_spacing",
"min": 0,
"max": 40,
"step": 2,
"unit": "px",
"label": "Image spacing",
"default": 8
},
{
"type": "range",
"id": "image_border_radius",
"min": 0,
"max": 20,
"step": 2,
"unit": "px",
"label": "Image border radius",
"default": 4
},
{
"type": "header",
"content": "Filter buttons"
},
{
"type": "checkbox",
"id": "show_filters",
"label": "Show filter buttons",
"default": true
},
{
"type": "color",
"id": "filter_button_bg",
"label": "Button background",
"default": "#ffffff"
},
{
"type": "color",
"id": "filter_button_text",
"label": "Button text",
"default": "#000000"
},
{
"type": "color",
"id": "filter_button_border",
"label": "Button border",
"default": "#cccccc"
},
{
"type": "color",
"id": "filter_button_active_bg",
"label": "Active button background",
"default": "#000000"
},
{
"type": "color",
"id": "filter_button_active_text",
"label": "Active button text",
"default": "#ffffff"
},
{
"type": "color",
"id": "filter_button_active_border",
"label": "Active button border",
"default": "#000000"
},
{
"type": "range",
"id": "filter_button_radius",
"min": 0,
"max": 20,
"step": 2,
"unit": "px",
"label": "Button border radius",
"default": 6
},
{
"type": "header",
"content": "Filter categories"
},
{
"type": "text",
"id": "filter_1_name",
"label": "Filter 1 name"
},
{
"type": "text",
"id": "filter_2_name",
"label": "Filter 2 name"
},
{
"type": "text",
"id": "filter_3_name",
"label": "Filter 3 name"
},
{
"type": "text",
"id": "filter_4_name",
"label": "Filter 4 name"
},
{
"type": "text",
"id": "filter_5_name",
"label": "Filter 5 name"
},
{
"type": "text",
"id": "filter_6_name",
"label": "Filter 6 name"
},
{
"type": "header",
"content": "Gallery images"
},
{
"type": "image_picker",
"id": "image_1",
"label": "Image 1"
},
{
"type": "select",
"id": "image_1_filter",
"label": "Image 1 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "1"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Image 2"
},
{
"type": "select",
"id": "image_2_filter",
"label": "Image 2 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "1"
},
{
"type": "image_picker",
"id": "image_3",
"label": "Image 3"
},
{
"type": "select",
"id": "image_3_filter",
"label": "Image 3 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "1"
},
{
"type": "image_picker",
"id": "image_4",
"label": "Image 4"
},
{
"type": "select",
"id": "image_4_filter",
"label": "Image 4 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "1"
},
{
"type": "image_picker",
"id": "image_5",
"label": "Image 5"
},
{
"type": "select",
"id": "image_5_filter",
"label": "Image 5 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "2"
},
{
"type": "image_picker",
"id": "image_6",
"label": "Image 6"
},
{
"type": "select",
"id": "image_6_filter",
"label": "Image 6 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "2"
},
{
"type": "image_picker",
"id": "image_7",
"label": "Image 7"
},
{
"type": "select",
"id": "image_7_filter",
"label": "Image 7 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "2"
},
{
"type": "image_picker",
"id": "image_8",
"label": "Image 8"
},
{
"type": "select",
"id": "image_8_filter",
"label": "Image 8 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "2"
},
{
"type": "image_picker",
"id": "image_9",
"label": "Image 9"
},
{
"type": "select",
"id": "image_9_filter",
"label": "Image 9 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "3"
},
{
"type": "image_picker",
"id": "image_10",
"label": "Image 10"
},
{
"type": "select",
"id": "image_10_filter",
"label": "Image 10 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "3"
},
{
"type": "image_picker",
"id": "image_11",
"label": "Image 11"
},
{
"type": "select",
"id": "image_11_filter",
"label": "Image 11 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "3"
},
{
"type": "image_picker",
"id": "image_12",
"label": "Image 12"
},
{
"type": "select",
"id": "image_12_filter",
"label": "Image 12 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "3"
},
{
"type": "image_picker",
"id": "image_13",
"label": "Image 13"
},
{
"type": "select",
"id": "image_13_filter",
"label": "Image 13 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "4"
},
{
"type": "image_picker",
"id": "image_14",
"label": "Image 14"
},
{
"type": "select",
"id": "image_14_filter",
"label": "Image 14 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "4"
},
{
"type": "image_picker",
"id": "image_15",
"label": "Image 15"
},
{
"type": "select",
"id": "image_15_filter",
"label": "Image 15 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "4"
},
{
"type": "image_picker",
"id": "image_16",
"label": "Image 16"
},
{
"type": "select",
"id": "image_16_filter",
"label": "Image 16 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "4"
},
{
"type": "image_picker",
"id": "image_17",
"label": "Image 17"
},
{
"type": "select",
"id": "image_17_filter",
"label": "Image 17 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "5"
},
{
"type": "image_picker",
"id": "image_18",
"label": "Image 18"
},
{
"type": "select",
"id": "image_18_filter",
"label": "Image 18 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "5"
},
{
"type": "image_picker",
"id": "image_19",
"label": "Image 19"
},
{
"type": "select",
"id": "image_19_filter",
"label": "Image 19 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "5"
},
{
"type": "image_picker",
"id": "image_20",
"label": "Image 20"
},
{
"type": "select",
"id": "image_20_filter",
"label": "Image 20 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "5"
},
{
"type": "image_picker",
"id": "image_21",
"label": "Image 21"
},
{
"type": "select",
"id": "image_21_filter",
"label": "Image 21 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "6"
},
{
"type": "image_picker",
"id": "image_22",
"label": "Image 22"
},
{
"type": "select",
"id": "image_22_filter",
"label": "Image 22 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "6"
},
{
"type": "image_picker",
"id": "image_23",
"label": "Image 23"
},
{
"type": "select",
"id": "image_23_filter",
"label": "Image 23 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "6"
},
{
"type": "image_picker",
"id": "image_24",
"label": "Image 24"
},
{
"type": "select",
"id": "image_24_filter",
"label": "Image 24 filter",
"options": \[
{"value": "1", "label": "Filter 1"},
{"value": "2", "label": "Filter 2"},
{"value": "3", "label": "Filter 3"},
{"value": "4", "label": "Filter 4"},
{"value": "5", "label": "Filter 5"},
{"value": "6", "label": "Filter 6"}
\],
"default": "6"
}
],
“presets”: [
{
"name": "Gallery with filters"
}
]
}
{% endschema %}
