← Back to Sections
BC Image Row
A flexible image gallery section that displays your images in perfectly organized rows. Ideal for showcasing products, portfolios, team photos, logos, or any visual content that needs clean, structured presentation.
Key Features:
- Configure exactly how many images per row and total rows for desktop, tablet, and mobile
- Default layout: 6 images in 1 row (desktop), 3 per row/2 rows (tablet), 2 per row/3 rows (mobile)
- Automatic width calculation - images size themselves based on available space
- Individual image opacity controls and optional click-through links
- Responsive grid system with customizable gaps between images
- Border radius controls for rounded corners or circular images
- Flexible styling options: use your theme's colors or apply custom branding
- Lazy loading support for optimal page performance
Perfect for: Product showcases, client logos, team galleries, before/after comparisons, portfolio displays, or any content requiring organized visual presentation.
<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.top_padding }}px;
padding-bottom: {{ section.settings.bottom_padding }}px;
padding-left: {{ section.settings.desktop_horizontal_padding }}px;
padding-right: {{ section.settings.desktop_horizontal_padding }}px;
border-top: {{ section.settings.top_border_thickness }}px solid {{ section.settings.border_color }};
border-bottom: {{ section.settings.bottom_border_thickness }}px solid {{ section.settings.border_color }};
}
.section-{{ section.id }} .bc-image-gallery {
display: grid;
grid-template-columns: repeat({{ section.settings.desktop_images_per_row }}, 1fr);
grid-template-rows: repeat({{ section.settings.desktop_rows }}, auto);
gap: {{ section.settings.image_gap }}px;
width: 100%;
max-width: 100%;
}
.section-{{ section.id }} .bc-gallery-image {
width: 100%;
aspect-ratio: 1/1;
object-fit: {{ section.settings.object_fit }};
border-radius: {{ section.settings.image_radius }}px;
display: block;
}
.section-{{ section.id }} .bc-image-link {
display: block;
width: 100%;
}
.section-{{ section.id }} .bc-image-placeholder {
width: 100%;
aspect-ratio: 1/1;
background-color: #f3f3f3;
display: flex;
align-items: center;
justify-content: center;
border-radius: {{ section.settings.image_radius }}px;
color: #666;
}
/* Tablet Styles */
@media screen and (max-width: 991px) {
.section-{{ section.id }} {
padding-left: {{ section.settings.tablet_horizontal_padding }}px;
padding-right: {{ section.settings.tablet_horizontal_padding }}px;
}
.section-{{ section.id }} .bc-image-gallery {
grid-template-columns: repeat({{ section.settings.tablet_images_per_row }}, 1fr);
grid-template-rows: repeat({{ section.settings.tablet_rows }}, auto);
gap: {{ section.settings.tablet_grid_gap }}px;
}
}
/* Mobile Styles */
@media screen and (max-width: 767px) {
.section-{{ section.id }} {
padding-left: {{ section.settings.mobile_horizontal_padding }}px;
padding-right: {{ section.settings.mobile_horizontal_padding }}px;
}
.section-{{ section.id }} .bc-image-gallery {
grid-template-columns: repeat({{ section.settings.mobile_images_per_row }}, 1fr);
grid-template-rows: repeat({{ section.settings.mobile_rows }}, auto);
gap: {{ section.settings.mobile_grid_gap }}px;
}
}
</style>
<section class="section-{{ section.id }}{% unless section.settings.use_custom_colors %} color-{{ section.settings.color_scheme }}{% endunless %}">
{% comment %} Designed and Developed by Bungalow Creative. Get sections like these at The Section Studio https://bungalowcreative.co/pages/the-section-studio {% endcomment %}
<div class="bc-image-gallery">
{% for block in section.blocks %}
{% if block.settings.link != blank %}
<a href="{{ block.settings.link }}" class="bc-image-link">
{% endif %}
{% if block.settings.image != blank %}
<img
src="{{ block.settings.image | img_url: '800x800' }}"
alt="{{ block.settings.alt_text | default: 'Gallery image' }}"
loading="{{ block.settings.loading }}"
class="bc-gallery-image"
style="opacity: {{ block.settings.image_opacity }}%;"
>
{% else %}
<div class="bc-image-placeholder">
<p>Upload an image</p>
</div>
{% endif %}
{% if block.settings.link != blank %}
</a>
{% endif %}
{% endfor %}
</div>
</section>
{% schema %}
{
"name": "BC Image Row",
"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": "top_padding",
"label": "Top Padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "bottom_padding",
"label": "Bottom Padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "desktop_horizontal_padding",
"label": "Desktop Horizontal Padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "tablet_horizontal_padding",
"label": "Tablet Horizontal Padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "mobile_horizontal_padding",
"label": "Mobile Horizontal Padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "top_border_thickness",
"label": "Top Border Thickness",
"min": 0,
"max": 20,
"step": 1,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "bottom_border_thickness",
"label": "Bottom Border Thickness",
"min": 0,
"max": 20,
"step": 1,
"unit": "px",
"default": 0
},
{
"type": "header",
"content": "Layout"
},
{
"type": "range",
"id": "desktop_images_per_row",
"label": "Desktop Images Per Row",
"min": 1,
"max": 12,
"step": 1,
"default": 6
},
{
"type": "range",
"id": "desktop_rows",
"label": "Desktop Rows",
"min": 1,
"max": 10,
"step": 1,
"default": 1
},
{
"type": "range",
"id": "tablet_images_per_row",
"label": "Tablet Images Per Row",
"min": 1,
"max": 8,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "tablet_rows",
"label": "Tablet Rows",
"min": 1,
"max": 10,
"step": 1,
"default": 2
},
{
"type": "range",
"id": "mobile_images_per_row",
"label": "Mobile Images Per Row",
"min": 1,
"max": 4,
"step": 1,
"default": 2
},
{
"type": "range",
"id": "mobile_rows",
"label": "Mobile Rows",
"min": 1,
"max": 10,
"step": 1,
"default": 3
{
"type": "header",
"content": "Media"
},
{
"type": "select",
"id": "object_fit",
"label": "Image Fit",
"options": [
{
"value": "cover",
"label": "Cover"
},
{
"value": "contain",
"label": "Contain"
},
{
"value": "fill",
"label": "Fill"
}
],
"default": "cover"
},
{
"type": "range",
"id": "image_gap",
"label": "Image Gap",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "image_radius",
"label": "Image Border Radius",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "tablet_grid_gap",
"label": "Tablet Grid Gap",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "mobile_grid_gap",
"label": "Mobile Grid Gap",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"default": 0
}
],
"blocks": [
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "alt_text",
"label": "Image Alt Text",
"placeholder": "Describe the image for accessibility"
},
{
"type": "url",
"id": "link",
"label": "Image Link (Optional)"
},
{
"type": "select",
"id": "loading",
"label": "Image Loading",
"options": [
{
"value": "lazy",
"label": "Lazy Load"
},
{
"value": "eager",
"label": "Eager Load"
}
],
"default": "lazy"
},
{
"type": "range",
"id": "image_opacity",
"label": "Image Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
}
]
}
],
"presets": [
{
"name": "BC Image Row",
"blocks": [
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}
