All things Shopify and commerce
Hi @LitCommerce
I'm currently using the following code to have different image for desktop and mobile banner, BUT as the result of using this code, the "desktop image banner(s) is extremely blurry". NEED HELP : (
.banner__media:first-child {
width: 100%;
}
.banner__media+.banner__media {
display: none;
}
@media screen and (max-width: 749px) {
.banner__media:first-child {
display: none;
}
.banner__media+.banner__media {
width: 100%;
display: block !important;
}
}
Thanks in advance !!
Solved! Go to the solution
This is an accepted solution.
Hi @DIG,
Please change all code:
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{%- if section.settings.adapt_height_first_image and section.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 749px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before,
#Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
@media screen and (min-width: 750px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
{%- endstyle -%}
{%- endif -%}
{%- style -%}
#Banner-{{ section.id }}::after {
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}
<div id="Banner-{{ section.id }}" class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.adapt_height_first_image and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}">
{%- if section.settings.image != blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
{%-liquid
assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
if section.settings.image_2 != blank
assign image_class = "banner__media-image-half"
endif
if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
assign sizes = "(min-width: 750px) 50vw, 100vw"
elsif section.settings.image_2 != blank
assign sizes = "50vw"
else
assign sizes = "100vw"
endif
-%}
<img
src="{{ section.settings.image | img_url: 'master' }}"
loading="lazy"
alt="{{ section.settings.image.alt | escape }}"
width="{{ section.settings.image.width }}"
height="{{ image_height }}"
class="{{ image_class }}"
>
</div>
{%- elsif section.settings.image_2 == blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
{%- if section.settings.image_2 != blank -%}
<div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}">
{%-liquid
assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
if section.settings.image != blank
assign image_class_2 = "banner__media-image-half"
endif
if section.settings.image != blank and section.settings.stack_images_on_mobile
assign sizes = "(min-width: 750px) 50vw, 100vw"
elsif section.settings.image != blank
assign sizes = "50vw"
else
assign sizes = "100vw"
endif
-%}
{{ section.settings.image_2 | image_url: width: 1500 | image_tag:
loading: 'lazy',
width: section.settings.image_2.width,
height: image_height_2,
class: image_class_2,
sizes: sizes,
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
alt: section.settings.image_2.alt | escape
}}
</div>
{%- endif -%}
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width">
<div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2 class="banner__heading {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
<span>{{ block.settings.heading | escape }}</span>
</h2>
{%- when 'text' -%}
<div class="banner__text {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
<span>{{ block.settings.text | escape }}</span>
</div>
{%- when 'buttons' -%}
<div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
{%- if block.settings.button_label_1 != blank -%}
<a{% if block.settings.button_link_1 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_1 }}"{% endif %} class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label_1 | escape }}</a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
<a{% if block.settings.button_link_2 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_2 }}"{% endif %} class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label_2 | escape }}</a>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
{% schema %}
{
"name": "t:sections.image-banner.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.image-banner.settings.image.label"
},
{
"type": "image_picker",
"id": "image_2",
"label": "t:sections.image-banner.settings.image_2.label"
},
{
"type": "range",
"id": "image_overlay_opacity",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "t:sections.image-banner.settings.image_overlay_opacity.label",
"default": 0
},
{
"type": "select",
"id": "image_height",
"options": [
{
"value": "small",
"label": "t:sections.image-banner.settings.image_height.options__1.label"
},
{
"value": "medium",
"label": "t:sections.image-banner.settings.image_height.options__2.label"
},
{
"value": "large",
"label": "t:sections.image-banner.settings.image_height.options__3.label"
}
],
"default": "medium",
"label": "t:sections.image-banner.settings.image_height.label",
"info": "t:sections.image-banner.settings.image_height.info"
},
{
"type": "checkbox",
"id": "adapt_height_first_image",
"default": false,
"label": "t:sections.image-banner.settings.adapt_height_first_image.label",
"info": "t:sections.image-banner.settings.adapt_height_first_image.info"
},
{
"type": "select",
"id": "desktop_content_position",
"options": [
{
"value": "top-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
},
{
"value": "top-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
},
{
"value": "top-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
},
{
"value": "middle-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
},
{
"value": "middle-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
},
{
"value": "middle-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
},
{
"value": "bottom-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
},
{
"value": "bottom-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
},
{
"value": "bottom-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
}
],
"default": "middle-center",
"label": "t:sections.image-banner.settings.desktop_content_position.label"
},
{
"type": "checkbox",
"id": "show_text_box",
"default": true,
"label": "t:sections.image-banner.settings.show_text_box.label"
},
{
"type": "select",
"id": "desktop_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.image-banner.settings.desktop_content_alignment.label"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.image-banner.settings.color_scheme.info"
},
{
"type": "header",
"content": "t:sections.image-banner.settings.header.content"
},
{
"type": "select",
"id": "mobile_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.image-banner.settings.mobile_content_alignment.label"
},
{
"type": "checkbox",
"id": "stack_images_on_mobile",
"default": true,
"label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
},
{
"type": "checkbox",
"id": "show_text_below",
"default": true,
"label": "t:sections.image-banner.settings.show_text_below.label"
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.image-banner.blocks.heading.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "heading",
"default": "Image banner",
"label": "t:sections.image-banner.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "text",
"name": "t:sections.image-banner.blocks.text.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "text",
"default": "Give customers details about the banner image(s) or content on the template.",
"label": "t:sections.image-banner.blocks.text.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "body",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
}
],
"default": "body",
"label": "t:sections.image-banner.blocks.text.settings.text_style.label"
}
]
},
{
"type": "buttons",
"name": "t:sections.image-banner.blocks.buttons.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "button_label_1",
"default": "Button label",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
},
{
"type": "url",
"id": "button_link_1",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_1",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
},
{
"type": "text",
"id": "button_label_2",
"default": "Button label",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
},
{
"type": "url",
"id": "button_link_2",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_2",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
}
]
}
],
"presets": [
{
"name": "t:sections.image-banner.presets.name",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "buttons"
}
]
}
]
}
{% endschema %}
Hello @DIG
To resolve this issue, I will need to access your store via collaborator request and try to check it further in your theme. I've sent a collab request, please check and approve this.Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you? 😁
Kind & Best regards!
GemPages Support Team
Hi @DIG,
Please send me the code of image-banner.liquid file, I will help you to check it
Appreciate your help @LitCommerce
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{%- if section.settings.adapt_height_first_image and section.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 749px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before,
#Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
@media screen and (min-width: 750px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
{%- endstyle -%}
{%- endif -%}
{%- style -%}
#Banner-{{ section.id }}::after {
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}
<div id="Banner-{{ section.id }}" class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.adapt_height_first_image and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}">
{%- if section.settings.image != blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
{%-liquid
assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
if section.settings.image_2 != blank
assign image_class = "banner__media-image-half"
endif
if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
assign sizes = "(min-width: 750px) 50vw, 100vw"
elsif section.settings.image_2 != blank
assign sizes = "50vw"
else
assign sizes = "100vw"
endif
-%}
{{ section.settings.image | image_url: width: 1500 | image_tag:
loading: 'lazy',
width: section.settings.image.width,
height: image_height,
class: image_class,
sizes: sizes,
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
alt: section.settings.image.alt | escape
}}
</div>
{%- elsif section.settings.image_2 == blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
{%- if section.settings.image_2 != blank -%}
<div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}">
{%-liquid
assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
if section.settings.image != blank
assign image_class_2 = "banner__media-image-half"
endif
if section.settings.image != blank and section.settings.stack_images_on_mobile
assign sizes = "(min-width: 750px) 50vw, 100vw"
elsif section.settings.image != blank
assign sizes = "50vw"
else
assign sizes = "100vw"
endif
-%}
{{ section.settings.image_2 | image_url: width: 1500 | image_tag:
loading: 'lazy',
width: section.settings.image_2.width,
height: image_height_2,
class: image_class_2,
sizes: sizes,
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
alt: section.settings.image_2.alt | escape
}}
</div>
{%- endif -%}
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width">
<div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2 class="banner__heading {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
<span>{{ block.settings.heading | escape }}</span>
</h2>
{%- when 'text' -%}
<div class="banner__text {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
<span>{{ block.settings.text | escape }}</span>
</div>
{%- when 'buttons' -%}
<div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
{%- if block.settings.button_label_1 != blank -%}
<a{% if block.settings.button_link_1 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_1 }}"{% endif %} class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label_1 | escape }}</a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
<a{% if block.settings.button_link_2 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_2 }}"{% endif %} class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label_2 | escape }}</a>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
{% schema %}
{
"name": "t:sections.image-banner.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.image-banner.settings.image.label"
},
{
"type": "image_picker",
"id": "image_2",
"label": "t:sections.image-banner.settings.image_2.label"
},
{
"type": "range",
"id": "image_overlay_opacity",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "t:sections.image-banner.settings.image_overlay_opacity.label",
"default": 0
},
{
"type": "select",
"id": "image_height",
"options": [
{
"value": "small",
"label": "t:sections.image-banner.settings.image_height.options__1.label"
},
{
"value": "medium",
"label": "t:sections.image-banner.settings.image_height.options__2.label"
},
{
"value": "large",
"label": "t:sections.image-banner.settings.image_height.options__3.label"
}
],
"default": "medium",
"label": "t:sections.image-banner.settings.image_height.label",
"info": "t:sections.image-banner.settings.image_height.info"
},
{
"type": "checkbox",
"id": "adapt_height_first_image",
"default": false,
"label": "t:sections.image-banner.settings.adapt_height_first_image.label",
"info": "t:sections.image-banner.settings.adapt_height_first_image.info"
},
{
"type": "select",
"id": "desktop_content_position",
"options": [
{
"value": "top-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
},
{
"value": "top-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
},
{
"value": "top-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
},
{
"value": "middle-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
},
{
"value": "middle-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
},
{
"value": "middle-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
},
{
"value": "bottom-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
},
{
"value": "bottom-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
},
{
"value": "bottom-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
}
],
"default": "middle-center",
"label": "t:sections.image-banner.settings.desktop_content_position.label"
},
{
"type": "checkbox",
"id": "show_text_box",
"default": true,
"label": "t:sections.image-banner.settings.show_text_box.label"
},
{
"type": "select",
"id": "desktop_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.image-banner.settings.desktop_content_alignment.label"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.image-banner.settings.color_scheme.info"
},
{
"type": "header",
"content": "t:sections.image-banner.settings.header.content"
},
{
"type": "select",
"id": "mobile_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.image-banner.settings.mobile_content_alignment.label"
},
{
"type": "checkbox",
"id": "stack_images_on_mobile",
"default": true,
"label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
},
{
"type": "checkbox",
"id": "show_text_below",
"default": true,
"label": "t:sections.image-banner.settings.show_text_below.label"
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.image-banner.blocks.heading.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "heading",
"default": "Image banner",
"label": "t:sections.image-banner.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "text",
"name": "t:sections.image-banner.blocks.text.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "text",
"default": "Give customers details about the banner image(s) or content on the template.",
"label": "t:sections.image-banner.blocks.text.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "body",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
}
],
"default": "body",
"label": "t:sections.image-banner.blocks.text.settings.text_style.label"
}
]
},
{
"type": "buttons",
"name": "t:sections.image-banner.blocks.buttons.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "button_label_1",
"default": "Button label",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
},
{
"type": "url",
"id": "button_link_1",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_1",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
},
{
"type": "text",
"id": "button_label_2",
"default": "Button label",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
},
{
"type": "url",
"id": "button_link_2",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_2",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
}
]
}
],
"presets": [
{
"name": "t:sections.image-banner.presets.name",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "buttons"
}
]
}
]
}
{% endschema %}
This is an accepted solution.
Hi @DIG,
Please change all code:
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{%- if section.settings.adapt_height_first_image and section.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 749px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before,
#Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
@media screen and (min-width: 750px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
{%- endstyle -%}
{%- endif -%}
{%- style -%}
#Banner-{{ section.id }}::after {
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}
<div id="Banner-{{ section.id }}" class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.adapt_height_first_image and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}">
{%- if section.settings.image != blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
{%-liquid
assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
if section.settings.image_2 != blank
assign image_class = "banner__media-image-half"
endif
if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
assign sizes = "(min-width: 750px) 50vw, 100vw"
elsif section.settings.image_2 != blank
assign sizes = "50vw"
else
assign sizes = "100vw"
endif
-%}
<img
src="{{ section.settings.image | img_url: 'master' }}"
loading="lazy"
alt="{{ section.settings.image.alt | escape }}"
width="{{ section.settings.image.width }}"
height="{{ image_height }}"
class="{{ image_class }}"
>
</div>
{%- elsif section.settings.image_2 == blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
{%- if section.settings.image_2 != blank -%}
<div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}">
{%-liquid
assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
if section.settings.image != blank
assign image_class_2 = "banner__media-image-half"
endif
if section.settings.image != blank and section.settings.stack_images_on_mobile
assign sizes = "(min-width: 750px) 50vw, 100vw"
elsif section.settings.image != blank
assign sizes = "50vw"
else
assign sizes = "100vw"
endif
-%}
{{ section.settings.image_2 | image_url: width: 1500 | image_tag:
loading: 'lazy',
width: section.settings.image_2.width,
height: image_height_2,
class: image_class_2,
sizes: sizes,
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
alt: section.settings.image_2.alt | escape
}}
</div>
{%- endif -%}
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width">
<div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2 class="banner__heading {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
<span>{{ block.settings.heading | escape }}</span>
</h2>
{%- when 'text' -%}
<div class="banner__text {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
<span>{{ block.settings.text | escape }}</span>
</div>
{%- when 'buttons' -%}
<div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
{%- if block.settings.button_label_1 != blank -%}
<a{% if block.settings.button_link_1 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_1 }}"{% endif %} class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label_1 | escape }}</a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
<a{% if block.settings.button_link_2 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_2 }}"{% endif %} class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label_2 | escape }}</a>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
{% schema %}
{
"name": "t:sections.image-banner.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.image-banner.settings.image.label"
},
{
"type": "image_picker",
"id": "image_2",
"label": "t:sections.image-banner.settings.image_2.label"
},
{
"type": "range",
"id": "image_overlay_opacity",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "t:sections.image-banner.settings.image_overlay_opacity.label",
"default": 0
},
{
"type": "select",
"id": "image_height",
"options": [
{
"value": "small",
"label": "t:sections.image-banner.settings.image_height.options__1.label"
},
{
"value": "medium",
"label": "t:sections.image-banner.settings.image_height.options__2.label"
},
{
"value": "large",
"label": "t:sections.image-banner.settings.image_height.options__3.label"
}
],
"default": "medium",
"label": "t:sections.image-banner.settings.image_height.label",
"info": "t:sections.image-banner.settings.image_height.info"
},
{
"type": "checkbox",
"id": "adapt_height_first_image",
"default": false,
"label": "t:sections.image-banner.settings.adapt_height_first_image.label",
"info": "t:sections.image-banner.settings.adapt_height_first_image.info"
},
{
"type": "select",
"id": "desktop_content_position",
"options": [
{
"value": "top-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
},
{
"value": "top-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
},
{
"value": "top-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
},
{
"value": "middle-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
},
{
"value": "middle-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
},
{
"value": "middle-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
},
{
"value": "bottom-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
},
{
"value": "bottom-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
},
{
"value": "bottom-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
}
],
"default": "middle-center",
"label": "t:sections.image-banner.settings.desktop_content_position.label"
},
{
"type": "checkbox",
"id": "show_text_box",
"default": true,
"label": "t:sections.image-banner.settings.show_text_box.label"
},
{
"type": "select",
"id": "desktop_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.image-banner.settings.desktop_content_alignment.label"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.image-banner.settings.color_scheme.info"
},
{
"type": "header",
"content": "t:sections.image-banner.settings.header.content"
},
{
"type": "select",
"id": "mobile_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.image-banner.settings.mobile_content_alignment.label"
},
{
"type": "checkbox",
"id": "stack_images_on_mobile",
"default": true,
"label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
},
{
"type": "checkbox",
"id": "show_text_below",
"default": true,
"label": "t:sections.image-banner.settings.show_text_below.label"
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.image-banner.blocks.heading.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "heading",
"default": "Image banner",
"label": "t:sections.image-banner.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "text",
"name": "t:sections.image-banner.blocks.text.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "text",
"default": "Give customers details about the banner image(s) or content on the template.",
"label": "t:sections.image-banner.blocks.text.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "body",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
}
],
"default": "body",
"label": "t:sections.image-banner.blocks.text.settings.text_style.label"
}
]
},
{
"type": "buttons",
"name": "t:sections.image-banner.blocks.buttons.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "button_label_1",
"default": "Button label",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
},
{
"type": "url",
"id": "button_link_1",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_1",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
},
{
"type": "text",
"id": "button_label_2",
"default": "Button label",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
},
{
"type": "url",
"id": "button_link_2",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_2",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
}
]
}
],
"presets": [
{
"name": "t:sections.image-banner.presets.name",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "buttons"
}
]
}
]
}
{% endschema %}
Dear LitCommerce, i am facing the same problem 'desktop's image banner became blurred after adding codes for separate desktop/mobile image'. Appreciate if you could help me to check the image-banner.liquid
Thank you in advance!
Dear @LitCommerce ,
I am now using the latest dawn 11.0.0 and added codes to have different image for desktop and mobile banner, however desktop's image became 'blurred'. Could you help? thanks...
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024