Logos/Images Section with links
Code:
{% doc %}
@prompt
I want to create a section or slider of logos wih option to control number of logos in row
{% enddoc %}
{% assign ai_gen_id = block.id | replace: '_', '' | downcase %}
{% style %}
.ai-logo-slider-{{ ai_gen_id }} {
padding: {{ block.settings.section_padding }}px 0;
background-color: {{ block.settings.background_color }};}
.ai-logo-slider-container-{{ ai_gen_id }} {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.ai-logo-slider-heading-{{ ai_gen_id }} {
text-align: center;
margin-bottom: {{ block.settings.heading_margin }}px;
color: {{ block.settings.heading_color }};
font-size: {{ block.settings.heading_size }}px;
}
.ai-logo-grid-{{ ai_gen_id }} {
display: grid;
grid-template-columns: repeat({{ block.settings.logos_per_row }}, 1fr);
gap: {{ block.settings.logo_spacing }}px;
align-items: center;
}
.ai-logo-item-{{ ai_gen_id }} {
display: flex;
align-items: center;
justify-content: center;
padding: {{ block.settings.logo_padding }}px;
background-color: {{ block.settings.logo_background }};
border-radius: {{ block.settings.logo_border_radius }}px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.ai-logo-item-{{ ai_gen_id }}:hover {
transform: scale({{ block.settings.hover_scale }});
opacity: {{ block.settings.hover_opacity }};
}
.ai-logo-image-{{ ai_gen_id }} {
max-width: 100%;
height: {{ block.settings.logo_height }}px;
object-fit: contain;
filter: grayscale({{ block.settings.grayscale }}%);
transition: filter 0.3s ease;
}
.ai-logo-item-{{ ai_gen_id }}:hover .ai-logo-image-{{ ai_gen_id }} {
filter: grayscale(0%);
}
.ai-logo-placeholder-{{ ai_gen_id }} {
width: 100%;
height: {{ block.settings.logo_height }}px;
background-color: #f4f4f4;
display: flex;
align-items: center;
justify-content: center;
border-radius:8px;
position: relative;
}
.ai-logo-placeholder-{{ ai_gen_id }} svg {
width:60%;
height: 60%;
opacity: 0.3;
}
.ai-logo-empty-state-{{ ai_gen_id }} {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #666;
text-align: center;
pointer-events: none;
}
@media screen and (max-width: 990px) {
.ai-logo-grid-{{ ai_gen_id }} {
grid-template-columns: repeat({{ block.settings.logos_per_row_tablet }}, 1fr);
}
}
@media screen and (max-width: 749px) {
.ai-logo-grid-{{ ai_gen_id }} {
grid-template-columns: repeat({{ block.settings.logos_per_row_mobile }}, 1fr);
}
.ai-logo-slider-container-{{ ai_gen_id }} {
padding: 0 15px;
}
}
{% endstyle %}
<div class="ai-logo-slider-{{ ai_gen_id }}" {{ block.shopify_attributes }}>
<div class="ai-logo-slider-container-{{ ai_gen_id }}">
{% if block.settings.heading != blank %}
<h2 class="ai-logo-slider-heading-{{ ai_gen_id }}">{{ block.settings.heading }}</h2>
{% endif %}
<div class="ai-logo-grid-{{ ai_gen_id }}">
{% for i in (1..12) %}
{% assign logo_key = 'logo_' | append: i %}
{% assign logo_url_key = 'logo_url_' | append: i %}
{% assign logo = block.settings[logo_key] %}
{% assign logo_url = block.settings[logo_url_key] %}
{% if logo != blank %}
<div class="ai-logo-item-{{ ai_gen_id }}">
{% if logo_url != blank %}
<a href="{{ logo_url }}" target="_blank" rel="noopener"><img
src="{{ logo | image_url: width: 300 }}"
alt="{{ logo.alt | escape }}"
class="ai-logo-image-{{ ai_gen_id }}"
loading="lazy"width="300"
height="{{ block.settings.logo_height }}"
>
</a>
{% else %}
<img
src="{{ logo | image_url: width: 300 }}"
alt="{{ logo.alt | escape }}"
class="ai-logo-image-{{ ai_gen_id }}"
loading="lazy"
width="300"
height="{{ block.settings.logo_height }}"
>
{% endif %}
</div>
{% elsif forloop.index <=6 %}
<div class="ai-logo-item-{{ ai_gen_id }}">
<div class="ai-logo-placeholder-{{ ai_gen_id }}">
{{ 'image' | placeholder_svg_tag }}
<div class="ai-logo-empty-state-{{ ai_gen_id }}">
Add logo {{ forloop.index }}
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% schema %}
{
"name": "Logo slider",
"settings": [
{
"type": "header",
"content": "General"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Trusted by leading brands"
},
{
"type": "color",
"id": "background_color",
"label": "Background color",
"default": "#ffffff"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading color",
"default": "#000000"
},
{
"type": "range",
"id": "section_padding",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Section padding",
"default": 50
},
{
"type": "range",
"id": "heading_size",
"min": 16,
"max": 48,
"step": 2,
"unit": "px",
"label": "Heading size",
"default": 32
},
{
"type": "range",
"id": "heading_margin",
"min": 0,
"max": 60,
"step": 5,
"unit": "px",
"label": "Heading margin bottom",
"default": 40
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "logos_per_row",
"label": "Logos per row (desktop)",
"options": [
{"value": "2", "label": "2"},
{"value": "3", "label": "3"},
{"value": "4", "label": "4"},
{"value": "5", "label": "5"},
{"value": "6", "label": "6"},
{"value": "7", "label": "7"},
{"value": "8", "label": "8"}
],
"default": "4"
},
{
"type": "select",
"id": "logos_per_row_tablet",
"label": "Logos per row (tablet)",
"options": [
{"value": "2", "label": "2"},
{"value": "3", "label": "3"},
{"value": "4", "label": "4"}
],
"default": "3"
},
{
"type": "select",
"id": "logos_per_row_mobile",
"label": "Logos per row (mobile)",
"options": [
{"value": "1", "label": "1"},
{"value": "2", "label": "2"}
],
"default": "2"
},
{
"type": "range",
"id": "logo_spacing",
"min": 10,
"max": 60,
"step": 5,
"unit": "px",
"label": "Logo spacing",
"default": 30
},
{
"type": "header",
"content": "Logo style"
},
{
"type": "range",
"id": "logo_height",
"min": 40,
"max": 120,
"step": 5,
"unit": "px",
"label": "Logo height",
"default": 80
},
{
"type": "range",
"id": "logo_padding",
"min": 0,
"max": 40,
"step": 5,
"unit": "px",
"label": "Logo padding",
"default": 20
},
{
"type": "color",
"id": "logo_background",
"label": "Logo background",
"default": "#ffffff"
},
{
"type": "range",
"id": "logo_border_radius",
"min": 0,
"max": 20,
"step": 2,
"unit": "px",
"label": "Logo border radius",
"default": 8
},
{
"type": "range",
"id": "grayscale",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "Grayscale filter",
"default": 50
},
{
"type": "header",
"content": "Hover effects"
},
{
"type": "range",
"id": "hover_scale",
"min": 1,
"max": 1.2,
"step": 0.1,
"label": "Hover scale",
"default": 1.1
},
{
"type": "range",
"id": "hover_opacity",
"min": 0.5,
"max": 1,
"step": 0.1,
"label": "Hover opacity",
"default": 1
},
{
"type": "header",
"content": "Logo1"
},
{
"type": "image_picker",
"id": "logo_1",
"label": "Logo image"
},
{
"type": "url",
"id": "logo_url_1",
"label": "Logo link"
},
{
"type": "header",
"content": "Logo 2"
},
{
"type": "image_picker",
"id": "logo_2",
"label": "Logo image"
},
{
"type": "url",
"id": "logo_url_2",
"label": "Logo link"
},
{
"type": "header",
"content": "Logo 3"
},
{
"type": "image_picker",
"id": "logo_3",
"label": "Logo image"
},
{
"type": "url",
"id": "logo_url_3",
"label": "Logo link"
},
{
"type": "header",
"content": "Logo 4"
},
{
"type": "image_picker",
"id": "logo_4",
"label": "Logo image"
},
{
"type": "url",
"id": "logo_url_4",
"label": "Logo link"
},
{
"type": "header",
"content": "Logo 5"
},
{
"type": "image_picker",
"id": "logo_5",
"label": "Logo image"
},
{
"type": "url",
"id": "logo_url_5",
"label": "Logo link"
},
{
"type": "header",
"content": "Logo 6"
},
{
"type": "image_picker",
"id": "logo_6",
"label": "Logo image"
},
{
"type": "url",
"id": "logo_url_6",
"label": "Logo link"
},
{
"type": "header",
"content": "Logo 7"
},
{
"type": "image_picker",
"id": "logo_7",
"label": "Logo image"
},
{
"type": "url",
"id": "logo_url_7",
"label": "Logo link"
},
{
"type": "header",
"content": "Logo 8"
},
{
"type": "image_picker",
"id": "logo_8",
"label": "Logo image"
},
{
"type": "url",
"id": "logo_url_8",
"label": "Logo link"
},
{
"type": "header",
"content": "Logo 9"
},
{
"type": "image_picker",
"id": "logo_9",
"label": "Logo image"
},
{
"type": "url",
"id": "logo_url_9",
"label": "Logo link"
},
{
"type": "header",
"content": "Logo 10"
},
{
"type": "image_picker",
"id": "logo_10",
"label": "Logo image"
},
{
"type": "url",
"id": "logo_url_10",
"label": "Logo link"
},
{
"type": "header",
"content": "Logo 11"
},
{
"type": "image_picker",
"id": "logo_11",
"label": "Logo image"
},
{
"type": "url",
"id": "logo_url_11",
"label": "Logo link"
},
{
"type": "header",
"content": "Logo 12"
},
{
"type": "image_picker",
"id": "logo_12",
"label": "Logo image"
},
{
"type": "url",
"id": "logo_url_12",
"label": "Logo link"
}
],
"presets": [
{
"name": "Logo slider"
}
],
"tag": null
}
{% endschema %}