How can I optimize a mobile image on my ecommerce site?

Store Design
, , , ,
1

Hi everyone!

Hoping someone can help with some code to optimise a mobile image. It is a landscape image but cropping or adding in a colour background isn’t right.

I tried the below in the theme scss liquid folder in assets but nothing changed? What am I doing wrong?

@media only screen and (max-width: 749px) {
.collection_grid-item {
background-size: contain;
background-repeat: no-repeat;
padding-top: 100%;
}
}

thanks so much

2

Hi @jeanniehind

The “img” tag needs to apply the background-image attribute. For details, please refer to the link: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

I hope that it’s useful for you.

3

Thank you, I mean I get the idea and it’s helpful to read, I’m just not a coder so I’m still unsure where or what I add. Any further clues? Super grateful for this thank you!!!

When I look at this theme it’s the slide show that’s set for the background of the 2 images I want to optimise sizes for so this is the code:

{%- capture flickity_options -%}
{
“prevNextButtons”: false,
“setGallerySize”: {% if section.settings.show_fullscreen %}false{% else %}true{% endif %},
“adaptiveHeight”: {% if section.settings.show_fullscreen %}false{% else %}true{% endif %},
“wrapAround”: true,
“dragThreshold”: 15,
“pauseAutoPlayOnHover”: false,
“autoPlay”: {% if section.settings.autoplay %}{{ section.settings.cycle_speed | times: 1000 }}{% else %}false{% endif %},
“pageDots”: {% if section.blocks.size > 1 %}true{% else %}false{% endif %}
}
{%- endcapture -%}

{%- for block in section.blocks -%}
{%- comment -%} Implementation note: this is an art driven image selection so it would have been better to be able to use the "picture" tag instead. However, as the mobile and desktop image could have different aspect ratio, the image allocation space would not have work properly without explicitly distinguishing the two images, hence the two containers. {%- endcomment -%}

{%- assign mobile_image = block.settings.mobile_image | default: block.settings.image -%}

{%- if mobile_image -%}

{{ mobile_image.alt | escape }} {{ mobile_image.alt | escape }}
{%- endif -%}

{%- if block.settings.image -%}

{% assign image_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

{{ block.settings.image.alt | escape }}

{{ block.settings.image.alt | escape }}
{%- else -%}
{%- capture placeholder -%}{% cycle 'lifestyle-1', 'lifestyle-2' %}{%- endcapture -%} {{ placeholder | placeholder_svg_tag: 'Slideshow__Image PlaceholderBackground__Svg' }}
{%- endif -%}
{%- if block.settings.subheading != blank or block.settings.title != blank -%} {%- if block.settings.subheading != blank -%}

{{ block.settings.subheading | escape }}

{%- endif -%}

{%- if block.settings.title != blank -%}

{{ block.settings.title | escape }}

{%- endif -%}

{%- if block.settings.button_1_text != blank and block.settings.button_2_text != blank -%}
{%- assign has_two_buttons = true -%}
{%- else -%}
{%- assign has_two_buttons = false -%}
{%- endif -%}

{%- if block.settings.button_1_text != blank or block.settings.button_2_text != blank -%}

{%- if block.settings.button_1_text != blank -%} {{ block.settings.button_1_text | escape }} {%- endif -%}

{%- if block.settings.button_2_text != blank -%}
{{ block.settings.button_2_text | escape }}
{%- endif -%}

{%- endif -%} {%- endif -%}
{%- endfor -%}

{%- if section.settings.show_arrow -%}

{%- include ‘icon’ with ‘arrow-bottom’ -%}

{%- endif -%}

#section-{{ section.id }} .Heading, #section-{{ section.id }} .flickity-page-dots { color: {{ section.settings.text_color }}; } #section-{{ section.id }} .Button { color: {{ section.settings.button_color }}; border-color: {{ section.settings.text_color }}; } #section-{{ section.id }} .Button::before { background-color: {{ section.settings.text_color }}; } @media (-moz-touch-enabled: 0), (hover: hover) { #section-{{ section.id }} .Button:hover { color: {{ section.settings.text_color }}; } }

{% schema %}
{
“name”: “Slideshow”,
“class”: “shopify-section–slideshow”,
“max_blocks”: 5,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_fullscreen”,
“label”: “Show full-screen images”,
“info”: “If enabled, images will be resized to fit the entire screen.”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_arrow”,
“label”: “Show bottom arrow”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “autoplay”,
“label”: “Auto rotate between slides”,
“default”: true
},
{
“type”: “range”,
“id”: “cycle_speed”,
“min”: 3,
“max”: 8,
“step”: 1,
“unit”: “sec”,
“label”: “Change slides every”,
“default”: 5
},
{
“type”: “color”,
“id”: “text_color”,
“label”: “Text”,
“default”: “#ffffff”
},
{
“type”: “color”,
“id”: “button_color”,
“label”: “Button text”,
“default”: “#363636”
}
],
“blocks”: [
{
“type”: “image”,
“name”: “Slide”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”,
“info”: “1560 x 1050px jpg recommended”
},
{
“type”: “image_picker”,
“id”: “mobile_image”,
“label”: “Mobile image”,
“info”: “750 x 1100px jpg recommended. If none is set, desktop image will be cropped.”
},
{
“type”: “checkbox”,
“id”: “apply_overlay”,
“label”: “Apply overlay on image”,
“info”: “This can improve text visibility.”,
“default”: true
},
{
“type”: “select”,
“id”: “content_position”,
“label”: “Desktop content position”,
“options”: [
{
“value”: “middleLeft”,
“label”: “Middle left”
},
{
“value”: “middleCenter”,
“label”: “Middle center”
},
{
“value”: “bottomLeft”,
“label”: “Bottom left”
},
{
“value”: “bottomCenter”,
“label”: “Bottom center”
}
],
“default”: “bottomLeft”
},
{
“type”: “text”,
“id”: “subheading”,
“label”: “Sub-heading”,
“default”: “Slide title”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Tell your story”
},
{
“type”: “header”,
“content”: “Button 1”
},
{
“type”: “text”,
“id”: “button_1_text”,
“label”: “Text”
},
{
“type”: “url”,
“id”: “button_1_link”,
“label”: “Link”
},
{
“type”: “header”,
“content”: “Button 2”
},
{
“type”: “text”,
“id”: “button_2_text”,
“label”: “Text”
},
{
“type”: “url”,
“id”: “button_2_link”,
“label”: “Link”
}
]
}
],
“presets”: [
{
“category”: “Image”,
“name”: “Slideshow”,
“settings”: {},
“blocks”: [
{
“type”: “image”
},
{
“type”: “image”
}
]
}
]
}
{% endschema %}

Perhaps I need to adjust or add something here?
Image is being stretched but it is a landscape image, it’s not far off fitting.

Outside of that the buttons aren’t right on mobile they’re over the centre and I need them on the bottom left. I’m not sure if this can be adjusted or not either?

I know i’m asking a lot sorry, thank you.

4

I’m not sure if you got my reply, but thank you - I’m unsure how to use the above but I realise now the images I want to change are in the “slideshow” section.

the code for the slide show aspect is;

{%- capture flickity_options -%}
{
“prevNextButtons”: false,
“setGallerySize”: {% if section.settings.show_fullscreen %}false{% else %}true{% endif %},
“adaptiveHeight”: {% if section.settings.show_fullscreen %}false{% else %}true{% endif %},
“wrapAround”: true,
“dragThreshold”: 15,
“pauseAutoPlayOnHover”: false,
“autoPlay”: {% if section.settings.autoplay %}{{ section.settings.cycle_speed | times: 1000 }}{% else %}false{% endif %},
“pageDots”: {% if section.blocks.size > 1 %}true{% else %}false{% endif %}
}
{%- endcapture -%}

{%- for block in section.blocks -%}
{%- comment -%} Implementation note: this is an art driven image selection so it would have been better to be able to use the "picture" tag instead. However, as the mobile and desktop image could have different aspect ratio, the image allocation space would not have work properly without explicitly distinguishing the two images, hence the two containers. {%- endcomment -%}

{%- assign mobile_image = block.settings.mobile_image | default: block.settings.image -%}

{%- if mobile_image -%}

{{ mobile_image.alt | escape }} {{ mobile_image.alt | escape }}
{%- endif -%}

{%- if block.settings.image -%}

{% assign image_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

{{ block.settings.image.alt | escape }}

{{ block.settings.image.alt | escape }}
{%- else -%}
{%- capture placeholder -%}{% cycle 'lifestyle-1', 'lifestyle-2' %}{%- endcapture -%} {{ placeholder | placeholder_svg_tag: 'Slideshow__Image PlaceholderBackground__Svg' }}
{%- endif -%}
{%- if block.settings.subheading != blank or block.settings.title != blank -%} {%- if block.settings.subheading != blank -%}

{{ block.settings.subheading | escape }}

{%- endif -%}

{%- if block.settings.title != blank -%}

{{ block.settings.title | escape }}

{%- endif -%}

{%- if block.settings.button_1_text != blank and block.settings.button_2_text != blank -%}
{%- assign has_two_buttons = true -%}
{%- else -%}
{%- assign has_two_buttons = false -%}
{%- endif -%}

{%- if block.settings.button_1_text != blank or block.settings.button_2_text != blank -%}

{%- if block.settings.button_1_text != blank -%} {{ block.settings.button_1_text | escape }} {%- endif -%}

{%- if block.settings.button_2_text != blank -%}
{{ block.settings.button_2_text | escape }}
{%- endif -%}

{%- endif -%} {%- endif -%}
{%- endfor -%}

{%- if section.settings.show_arrow -%}

{%- include ‘icon’ with ‘arrow-bottom’ -%}

{%- endif -%}

#section-{{ section.id }} .Heading, #section-{{ section.id }} .flickity-page-dots { color: {{ section.settings.text_color }}; } #section-{{ section.id }} .Button { color: {{ section.settings.button_color }}; border-color: {{ section.settings.text_color }}; } #section-{{ section.id }} .Button::before { background-color: {{ section.settings.text_color }}; } @media (-moz-touch-enabled: 0), (hover: hover) { #section-{{ section.id }} .Button:hover { color: {{ section.settings.text_color }}; } }

{% schema %}
{
“name”: “Slideshow”,
“class”: “shopify-section–slideshow”,
“max_blocks”: 5,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_fullscreen”,
“label”: “Show full-screen images”,
“info”: “If enabled, images will be resized to fit the entire screen.”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_arrow”,
“label”: “Show bottom arrow”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “autoplay”,
“label”: “Auto rotate between slides”,
“default”: true
},
{
“type”: “range”,
“id”: “cycle_speed”,
“min”: 3,
“max”: 8,
“step”: 1,
“unit”: “sec”,
“label”: “Change slides every”,
“default”: 5
},
{
“type”: “color”,
“id”: “text_color”,
“label”: “Text”,
“default”: “#ffffff”
},
{
“type”: “color”,
“id”: “button_color”,
“label”: “Button text”,
“default”: “#363636”
}
],
“blocks”: [
{
“type”: “image”,
“name”: “Slide”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”,
“info”: “1560 x 1050px jpg recommended”
},
{
“type”: “image_picker”,
“id”: “mobile_image”,
“label”: “Mobile image”,
“info”: “750 x 1100px jpg recommended. If none is set, desktop image will be cropped.”
},
{
“type”: “checkbox”,
“id”: “apply_overlay”,
“label”: “Apply overlay on image”,
“info”: “This can improve text visibility.”,
“default”: true
},
{
“type”: “select”,
“id”: “content_position”,
“label”: “Desktop content position”,
“options”: [
{
“value”: “middleLeft”,
“label”: “Middle left”
},
{
“value”: “middleCenter”,
“label”: “Middle center”
},
{
“value”: “bottomLeft”,
“label”: “Bottom left”
},
{
“value”: “bottomCenter”,
“label”: “Bottom center”
}
],
“default”: “bottomLeft”
},
{
“type”: “text”,
“id”: “subheading”,
“label”: “Sub-heading”,
“default”: “Slide title”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Tell your story”
},
{
“type”: “header”,
“content”: “Button 1”
},
{
“type”: “text”,
“id”: “button_1_text”,
“label”: “Text”
},
{
“type”: “url”,
“id”: “button_1_link”,
“label”: “Link”
},
{
“type”: “header”,
“content”: “Button 2”
},
{
“type”: “text”,
“id”: “button_2_text”,
“label”: “Text”
},
{
“type”: “url”,
“id”: “button_2_link”,
“label”: “Link”
}
]
}
],
“presets”: [
{
“category”: “Image”,
“name”: “Slideshow”,
“settings”: {},
“blocks”: [
{
“type”: “image”
},
{
“type”: “image”
}
]
}
]
}
{% endschema %}

Any ideas then how to fit the image? it’s only for mobile the rest is fine.

Sorry, i’m not a coder so i’m really unsure.

thank you