Hi!
I added the following code to create a fully linkable banner for pipeline theme in Shopify - which is awesome for desktops. However, Whenever I go to add a Mobile image - specifically for mobile aka with a bigger font and all that. The image gets cut off for mobile devices Sharing a screen shot of it, this is not happened previously. Anyone have any recommendations on how to fix this? My goal is for the mobile image to size correctly to the mobile image I am uploading.
Thanks!
Sorry it wouldn’t let me upload the code - Sharing it here:
{%- liquid
assign alt = section.settings.image.alt | default: alt_default
assign wh_ratio = section.settings.image.aspect_ratio | default: 1.77
assign page_gutter_width = settings.layout_outer
assign layout_max_width = settings.layout_site_width
assign total_page_gutter_width = page_gutter_width | times: 2
assign calculated_width = layout_max_width | minus: total_page_gutter_width | times: section.settings.max_width | divided_by: 100
assign sizes = 'min(100vw, ’ | append: calculated_width | append: ‘px)’
if section.settings.image != blank and section.settings.mobile_image != blank
assign mobile_alt = section.settings.mobile_image.alt | default: alt
assign wh_ratio_mobile = section.settings.mobile_image.aspect_ratio | default: wh_ratio
assign desktop_image_modifier = ‘hidden md:block’
comment
Mobile image
endcomment
capture mobile_image
render ‘image’, img_object: section.settings.mobile_image, height: ‘use_image’, wh_ratio: wh_ratio_mobile, sizes: sizes, class: ‘md:hidden’, alt: mobile_alt, placeholder: ‘lifestyle-1’
endcapture
endif
comment
Desktop image
endcomment
capture desktop_image
render ‘image’, img_object: section.settings.image, height: ‘use_image’, wh_ratio: wh_ratio, sizes: sizes, class: desktop_image_modifier, alt: alt, placeholder: ‘lifestyle-1’
endcapture
capture desktop_image
render ‘image’, img_object: section.settings.image, height: ‘use_image’, wh_ratio: wh_ratio, sizes: sizes, class: desktop_image_modifier, alt: alt, placeholder: ‘lifestyle-1’
endcapture
if section.settings.x_align == ‘center’
assign x_align = ‘mx-auto’
elsif section.settings.x_align == ‘right’
assign x_align = ‘ml-auto’
endif
-%}
{% schema %}
{
“name”: “Image”,
“settings”: [
{
“type”: “url”,
“id”: “image_link”,
“label”: “Image Link”
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
},
{
“type”: “image_picker”,
“id”: “mobile_image”,
“label”: “Mobile image”
},
{
“type”: “range”,
“id”: “max_width”,
“min”: 1,
“max”: 100,
“step”: 1,
“unit”: “%”,
“label”: “Max width of the image”,
“default”: 100
},
{
“type”: “select”,
“id”: “x_align”,
“label”: “Alignment”,
“default”: “center”,
“options”: [
{ “value”: “left”, “label”: “Left” },
{ “value”: “center”, “label”: “Center” },
{ “value”: “right”, “label”: “Right” }
]
},
{
“type”: “select”,
“id”: “color_bg”,
“label”: “Background color”,
“default”: “palette–light bg–neutral”,
“options”: [
{ “value”: “palette–light bg–neutral”, “label”: “Default”},
{ “value”: “palette–light bg–accent”, “label”: “Light”},
{ “value”: “palette–dark bg–invert”, “label”: “Dark”},
{ “value”: “palette–dark bg–invert–accent”, “label”: “Dark accent”},
{ “value”: “palette–bright bg–bright”, “label”: “Bright”},
{ “value”: “palette–bright bg–bright–accent”, “label”: “Bright accent”}
]
},
{
“type”: “header”,
“content”: “Section spacing”
},
{
“type”: “select”,
“id”: “width”,
“label”: “Width”,
“default”: “wrapper”,
“options”: [
{ “value”: “wrapper–none”, “label”: “Full width” },
{ “value”: “wrapper–full”, “label”: “Full width padded” },
{ “value”: “wrapper”, “label”: “Page width” },
{ “value”: “wrapper–narrow”, “label”: “Page width narrow” },
{ “value”: “wrapper–tiny”, “label”: “Page width extra narrow” }
]
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 180,
“step”: 2,
“unit”: “px”,
“label”: “Padding top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 180,
“step”: 2,
“unit”: “px”,
“label”: “Padding bottom”,
“default”: 36
}
],
“presets”: [
{
“name”: “Image”,
“category”: “Image”
}
],
“disabled_on”: {
“groups”: [“header”, “aside”]
}
}
{% endschema %}
Could you share the link to your store so I can check?
