My current theme has the image gallery section that I want but it only allows 3 images per row. I want to change this to 4 images per row. Attached is the source code for Sections > gallery. liquid
<div class="row-double-space section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="gallery">
{% style %}
{% for block in section.blocks %}
.section-{{ section.id }} .gallery__item-{{ forloop.index }} .rimage-background {
background-position: {{ block.settings.mobile_alignment }};
}
{% endfor %}
{%- if section.settings.overlay_style == 'box' -%}
{% assign bg_alpha = section.settings.tint_opacity | divided_by: 100.0 %}
.section-{{ section.id }} .overlay__inner {
background-color: {{ section.settings.tint | color_modify: 'alpha', bg_alpha }};
}
{%- endif -%}
.section-{{ section.id }} .overlay__title,
.section-{{ section.id }} .overlay__text {
color: {{ section.settings.text_color }};
text-decoration: none;
}
{%- if section.settings.overlay_style == 'full' and section.settings.tint_opacity > 0 -%}
.section-{{ section.id }} .gallery__item::before,
.section-{{ section.id }} .swiper-slide::before {
content: '';
background-color: {{ section.settings.tint }};
opacity: {{ section.settings.tint_opacity | divided_by: 100.0 }};
}
{%- endif -%}
.section-{{ section.id }} .gallery__row {
height: auto;
}
{%- if section.settings.carousel_enabled -%}
.section-{{ section.id }} .gallery--mobile-carousel {
height: {{ section.settings.row_height_mobile }}px;
}
{%- else -%}
.section-{{ section.id }} .gallery__item {
height: {{ section.settings.row_height_mobile }}px;
}
{%- endif -%}
@media (min-width: 560px) {
{% for block in section.blocks %}
.section-{{ section.id }} .gallery__item-{{ forloop.index }} .rimage-background {
background-position: {{ block.settings.desktop_alignment }};
}
{% endfor %}
{%- if section.settings.carousel_enabled -%}
.section-{{ section.id }} .gallery--mobile-carousel {
height: auto;
}
{%- endif -%}
{%- assign mob_plus_height = section.settings.row_height | divided_by: 1.7 -%}
.section-{{ section.id }} .gallery__item {
height: {{ mob_plus_height | floor }}px;
}
}
@media (min-width: 760px) {
{%- assign tablet_height = section.settings.row_height | divided_by: 1.3 -%}
.section-{{ section.id }} .gallery__row {
height: {{ tablet_height | floor }}px;
}
.section-{{ section.id }} .gallery__item {
height: auto;
max-height: 100%;
}
}
@media (min-width: 900px) {
.section-{{ section.id }} .gallery__row {
height: {{ section.settings.row_height }}px;
}
}
{% endstyle %}
<div class="gallery {% if section.settings.carousel_enabled %}gallery--mobile-carousel carousel-mobile-off-edge{% endif %}{% if section.settings.enable_margin %} gallery--with-margins{% endif %} gallery--{{ section.settings.layout }}">
<div class="gallery__row gallery__row--odd">
{%- for block in section.blocks -%}
{%- assign forloop_mod_grid = forloop.index0 | modulo: 3 -%}
{%- assign add_odd_row_class = forloop.index0 | modulo: 6 -%}
{%- if forloop.index0 > 0 and forloop_mod_grid == 0 -%}
</div><div class="gallery__row {% if add_odd_row_class == 0 %} gallery__row--odd{% else %} gallery__row--even{% endif %}">
{%- endif -%}
{% if forloop.last == true %}
{% assign last_item = forloop.index | modulo: 3 %}
{% endif %}
{%- assign second_last_item = forloop.length | minus: 1 -%}
{%- if forloop.index == second_last_item -%}
{% assign second_last = forloop.index | modulo: 3 %}
{%- endif -%}
{%- assign show_overlay_text = false -%}
{%- if block.settings.title != blank or block.settings.text != blank or block.settings.button_text != blank -%}
{%- assign show_overlay_text = true -%}
{%- endif -%}
<div class="gallery__item gallery__item-{{ forloop.index }} {% if section.settings.enable_margin == true %} global-border-radius{% endif %} lazyload--placeholder {% if forloop.index == second_last_item %} second-last-item-{{ second_last }}{% endif %}{% if forloop.last == true %}last-item-{{ last_item }}{% endif %}" {{ block.shopify_attributes }}>
{%- if block.settings.link != blank -%}<a class="gallery__item-link" href="{{ block.settings.link }}">{%- endif -%}
{%- if block.settings.image == blank -%}
<div class="gallery__image-container">
<div class="gallery__image placeholder-image">
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
{%- else -%}
<div class="gallery__image-container">
<div class="gallery__image rimage-background fade-in lazyload"
data-bgset="{% render 'bgset', image: block.settings.image %}"
data-sizes="auto"
data-parent-fit="cover">
<noscript>
<img src="{{ block.settings.image | img_url: '1024x1024' }}" alt="{{ block.settings.image.alt | escape }}" class="rimage-background__image">
</noscript>
</div>
</div>
{%- endif -%}
{% assign tint_opacity = section.settings.tint_opacity | divided_by: 100.00 | round: 2 %}
{% assign tint_color = section.settings.tint_color | color_modify: 'alpha', tint_opacity %}
{%- assign has_content = false -%}
{%- if block.settings.title != blank or block.settings.text != blank -%}{%- assign has_content = true -%}{%- endif -%}
<div class="gallery__overlay-position overlay overlay--position-{{ block.settings.overlay_position }} overlay--style-{{ section.settings.overlay_style }}">
<div class="gallery__overlay-container overlay--center {% if section.settings.overlay_style == 'box' %} global-border-radius-overlays{% endif %}">
<div class="overlay__bg {% if has_content == false %} overlay__bg--empty{% endif %}{% if bg_alpha == 0 %} overlay__bg--transparent"{% else %} style="background-color: {{ tint_color }}"{% endif %}></div>
<div class="overlay__inner global-border-radius">
{%- if block.settings.title != blank -%}
<h3 class="overlay__title medium-title {% if block.settings.text == blank %}overlay__title--no-margin{% endif %}">{{ block.settings.title | newline_to_br }}</h3>
{%- endif -%}
{%- if block.settings.text != blank -%}
<div class="overlay__text">{{ block.settings.text | newline_to_br }}</div>
{%- endif -%}
{%- if block.settings.button_label != blank -%}
<span class="btn btn--over-image">{{ block.settings.button_label }}</span>
{%- endif -%}
</div>
</div>
</div>
{%- if block.settings.link != blank -%}</a>{%- endif -%}
</div>
{%- endfor -%}
</div>
</div>
</div>
{% schema %}
{
"name": "Image gallery",
"tag": "section",
"settings": [
{
"id": "layout",
"type": "radio",
"label": "Layout",
"default": "mosaic",
"options": [
{
"value": "mosaic",
"label": "Mosaic"
},
{
"value": "grid",
"label": "Grid"
}
]
},
{
"type": "range",
"id": "row_height",
"min": 300,
"max": 1000,
"step": 10,
"unit": "px",
"label": "Row height desktop",
"default": 460,
"info": "When using the Mosaic layout the row height should be at least 400px."
},
{
"type": "range",
"id": "row_height_mobile",
"min": 200,
"max": 1000,
"step": 10,
"unit": "px",
"label": "Row height mobile",
"default": 300
},
{
"id": "enable_margin",
"type": "checkbox",
"label": "Add spacing",
"default": true
},
{
"id": "carousel_enabled",
"type": "checkbox",
"label": "Enable mobile slideshow",
"default": true
},
{
"type": "header",
"content": "Overlays"
},
{
"id": "overlay_style",
"type": "select",
"label": "Overlay style",
"default": "full",
"options": [
{
"value": "full",
"label": "Full image"
},
{
"value": "box",
"label": "Text box"
},
{
"value": "no_background",
"label": "No background"
}
]
},
{
"type": "color",
"id": "tint",
"label": "Overlay color",
"default": "#ffffff"
},
{
"type": "range",
"id": "tint_opacity",
"min": 0,
"max": 100,
"step": 1,
"label": "Overlay opacity",
"default": 40,
"unit": "%"
},
{
"type": "color",
"id": "text_color",
"label": "Text color",
"default": "#333333"
}
],
"blocks": [
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "select",
"id": "desktop_alignment",
"label": "Desktop image alignment",
"info": "Used to keep the subject of your focus in view",
"default": "center center",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center left",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "center right",
"label": "Middle right"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
]
},
{
"type": "select",
"id": "mobile_alignment",
"label": "Mobile image alignment",
"info": "Used to keep the subject of your focus in view",
"default": "center center",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center left",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "center right",
"label": "Middle right"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
]
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "header",
"content": "Overlay"
},
{
"type": "textarea",
"id": "title",
"label": "Heading",
"default": "Image title"
},
{
"type": "textarea",
"id": "text",
"label": "Text"
},
{
"type": "text",
"id": "button_label",
"label": "Button label"
},
{
"type": "select",
"id": "overlay_position",
"label": "Text alignment",
"default": "center-center",
"options": [
{
"label": "Top left",
"value": "top-left"
},
{
"label": "Top center",
"value": "top-center"
},
{
"label": "Top right",
"value": "top-right"
},
{
"label": "Center left",
"value": "center-left"
},
{
"label": "Center center",
"value": "center-center"
},
{
"label": "Center right",
"value": "center-right"
},
{
"label": "Bottom left",
"value": "bottom-left"
},
{
"label": "Bottom center",
"value": "bottom-center"
},
{
"label": "Bottom right",
"value": "bottom-right"
}
]
}
]
}
],
"presets": [
{
"name": "Image gallery",
"blocks": [
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}
