← Back to Sections
Simple Images
A flexible image gallery section for displaying multiple images in a clean, organized layout. Perfect for showcasing product collections, brand imagery, portfolio work, or any visual content that needs to be presented side-by-side with consistent styling.
Key Features:
- Display up to 4 images in a responsive flex layout that adapts beautifully across all devices
- Video support with automatic fallback - upload videos that take precedence over images when both are provided
- Customizable aspect ratios including original proportions, square (1:1), portrait (3:4), and portrait (4:5) formats
- Individual opacity controls for each image and video with precise percentage adjustments
- Flexible linking options - connect images to collections, external URLs, or leave unlinked
- Optional hover effect that gently lifts images on interaction for enhanced user engagement
- Separate gap controls for desktop and mobile to optimize spacing across all screen sizes
- Comprehensive padding controls with device-specific settings for perfect spacing
- Color scheme integration with custom color override options for brand consistency
- Loading optimization with lazy/eager loading preferences for performance
- Full accessibility support with proper alt text fields and semantic HTML structure
Perfect for: Product showcases, brand galleries, portfolio displays, collection previews, testimonial images, team photos, or any visual content that benefits from consistent presentation and professional styling.
{% comment %} Designed and Developed by Bungalow Creative. Get sections like these at The Section Studio https://bungalowcreative.co/pages/the-section-studio {% endcomment %}
<style>
.section-{{ section.id }} {
{% if section.settings.use_custom_colors %}
background-color: {{ section.settings.background_color }};
color: {{ section.settings.text_color }};
{% else %}
color: rgb(var(--color-foreground));
{% endif %}
padding-top: {{ section.settings.padding_top_desktop }}px;
padding-bottom: {{ section.settings.padding_bottom_desktop }}px;
padding-left: {{ section.settings.padding_left_desktop }}px;
padding-right: {{ section.settings.padding_right_desktop }}px;
{% if section.settings.border_top_thickness > 0 %}
border-top: {{ section.settings.border_top_thickness }}px solid {{ section.settings.border_color }};
{% endif %}
{% if section.settings.border_bottom_thickness > 0 %}
border-bottom: {{ section.settings.border_bottom_thickness }}px solid {{ section.settings.border_color }};
{% endif %}
}
.section-{{ section.id }} .bc-image-blocks {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: {{ section.settings.gap }}px;
}
.section-{{ section.id }} .bc-image-block {
flex: 1;
{% if section.settings.enable_hover_effect %}
transition: transform 0.3s ease;
{% endif %}
}
{% if section.settings.enable_hover_effect %}
.section-{{ section.id }} .bc-image-block:hover {
transform: translateY(-10px);
}
{% endif %}
.section-{{ section.id }} .bc-image-block img {
width: 100%;
height: auto;
display: block;
}
.section-{{ section.id }} .bc-image-block video {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
{% for block in section.blocks %}
.section-{{ section.id }} .bc-image-block-{{ block.id }} img {
opacity: {{ block.settings.image_opacity | default: 100 | divided_by: 100.0 }};
{% if block.settings.aspect_ratio != 'original' %}
aspect-ratio: {{ block.settings.aspect_ratio }};
object-fit: cover;
{% endif %}
}
.section-{{ section.id }} .bc-image-block-{{ block.id }} video {
opacity: {{ block.settings.video_opacity | default: 100 | divided_by: 100.0 }};
{% if block.settings.aspect_ratio != 'original' %}
aspect-ratio: {{ block.settings.aspect_ratio }};
object-fit: cover;
{% endif %}
}
{% endfor %}
@media screen and (max-width: 991px) {
.section-{{ section.id }} {
padding-top: {{ section.settings.padding_top_tablet }}px;
padding-bottom: {{ section.settings.padding_bottom_tablet }}px;
padding-left: {{ section.settings.padding_left_tablet }}px;
padding-right: {{ section.settings.padding_right_tablet }}px;
}
}
@media screen and (max-width: 767px) {
.section-{{ section.id }} {
padding-top: {{ section.settings.padding_top_mobile }}px;
padding-bottom: {{ section.settings.padding_bottom_mobile }}px;
padding-left: {{ section.settings.padding_left_mobile }}px;
padding-right: {{ section.settings.padding_right_mobile }}px;
}
.section-{{ section.id }} .bc-image-blocks {
flex-direction: column;
gap: {{ section.settings.gap_mobile }}px;
}
}
</style>
<section class="section-{{ section.id }}{% unless section.settings.use_custom_colors %} color-{{ section.settings.color_scheme }}{% endunless %}">
<div class="bc-image-blocks">
{% for block in section.blocks %}
{% if block.type == 'image' %}
<div class="bc-image-block bc-image-block-{{ block.id }}">
{% assign link_url = '' %}
{% if block.settings.link_type == 'collection' and block.settings.collection != blank %}
{% assign link_url = block.settings.collection.url %}
{% elsif block.settings.link_type == 'external' and block.settings.external_link != blank %}
{% assign link_url = block.settings.external_link %}
{% endif %}
{% if link_url != '' %}
<a href="{{ link_url }}">
{% endif %}
{% if block.settings.video != blank %}
{{
block.settings.video
| video_tag: controls: false, autoplay: true, loop: true, muted: true, preload: 'auto'
}}
{% elsif block.settings.image != blank %}
{{
block.settings.image
| image_url: width: 1000
| image_tag: loading: block.settings.image_loading, alt: block.settings.alt
| default: 'Image'
}}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if link_url != '' %}
</a>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</section>
{% schema %}
{
"name": "BC Simple Images",
"max_blocks": 4,
"settings": [
{
"type": "header",
"content": "Colors"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color Scheme",
"default": "scheme-1"
},
{
"type": "checkbox",
"id": "use_custom_colors",
"label": "Use custom colors instead of a Dawn color scheme",
"default": false
},
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#000000"
},
{
"type": "color",
"id": "border_color",
"label": "Border Color",
"default": "#000000"
},
{
"type": "header",
"content": "Section Settings"
},
{
"type": "range",
"id": "padding_top_desktop",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Desktop Top Padding",
"default": 50
},
{
"type": "range",
"id": "padding_bottom_desktop",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Desktop Bottom Padding",
"default": 50
},
{
"type": "range",
"id": "padding_left_desktop",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Desktop Left Padding",
"default": 50
},
{
"type": "range",
"id": "padding_right_desktop",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Desktop Right Padding",
"default": 50
},
{
"type": "range",
"id": "padding_top_tablet",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Tablet Top Padding",
"default": 40
},
{
"type": "range",
"id": "padding_bottom_tablet",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Tablet Bottom Padding",
"default": 40
},
{
"type": "range",
"id": "padding_left_tablet",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Tablet Left Padding",
"default": 40
},
{
"type": "range",
"id": "padding_right_tablet",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Tablet Right Padding",
"default": 40
},
{
"type": "range",
"id": "padding_top_mobile",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Mobile Top Padding",
"default": 10
},
{
"type": "range",
"id": "padding_bottom_mobile",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Mobile Bottom Padding",
"default": 10
},
{
"type": "range",
"id": "padding_left_mobile",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Mobile Left Padding",
"default": 10
},
{
"type": "range",
"id": "padding_right_mobile",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Mobile Right Padding",
"default": 10
},
{
"type": "range",
"id": "border_top_thickness",
"min": 0,
"max": 20,
"step": 1,
"unit": "px",
"label": "Top Border Thickness",
"default": 0
},
{
"type": "range",
"id": "border_bottom_thickness",
"min": 0,
"max": 20,
"step": 1,
"unit": "px",
"label": "Bottom Border Thickness",
"default": 0
},
{
"type": "range",
"id": "gap",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Gap between images",
"default": 20,
"info": "Space between each image in the section on desktop and tablet"
},
{
"type": "range",
"id": "gap_mobile",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Gap between images - Mobile",
"default": 10,
"info": "Space between each image in the section on mobile devices"
},
{
"type": "checkbox",
"id": "enable_hover_effect",
"label": "Enable hover effect",
"default": true,
"info": "When enabled, images will lift up slightly when hovered over"
}
],
"blocks": [
{
"type": "image",
"name": "Image Block",
"settings": [
{
"type": "header",
"content": "Media"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "video",
"id": "video",
"label": "Video",
"info": "Upload a video file. Video will take precedence over image if both are uploaded."
},
{
"type": "text",
"id": "alt",
"label": "Alt text",
"info": "Copy and paste the text that is in the design of this image here. This is important to do for accessibility screen readers and SEO crawling.",
"placeholder": "Describe the image content"
},
{
"type": "select",
"id": "image_loading",
"label": "Image Loading",
"options": [
{ "value": "lazy", "label": "Lazy" },
{ "value": "eager", "label": "Eager" }
],
"default": "lazy",
"info": "Use 'Eager' for images above the fold, 'Lazy' for others"
},
{
"type": "select",
"id": "aspect_ratio",
"label": "Image Aspect Ratio",
"options": [
{ "value": "original", "label": "Keep original ratio" },
{ "value": "1", "label": "Square (1:1)" },
{ "value": "3/4", "label": "Portrait (3:4)" },
{ "value": "4/5", "label": "Portrait (4:5)" }
],
"default": "original",
"info": "Choose the aspect ratio for this image. Original maintains the uploaded image proportions."
},
{
"type": "range",
"id": "image_opacity",
"label": "Image Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "range",
"id": "video_opacity",
"label": "Video Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "header",
"content": "Link Settings"
},
{
"type": "select",
"id": "link_type",
"label": "Link type",
"options": [
{ "value": "none", "label": "No link" },
{ "value": "collection", "label": "Collection" },
{ "value": "external", "label": "External link" }
],
"default": "none"
},
{
"type": "collection",
"id": "collection",
"label": "Collection",
"info": "Select a collection to link to"
},
{
"type": "url",
"id": "external_link",
"label": "External link",
"info": "Enter a URL to link to"
}
]
}
],
"presets": [
{
"name": "BC Simple Images",
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}
