FROM CACHE - en_header

Shopify Mobile image optimisations

jeanniehind
New Member
3 0 0

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 

Replies 3 (3)
BSS-Commerce
Shopify Partner
254 37 41

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
BSS Commerce - Shopify Apps & Store Development Service Provider
Hire a Shopify expert | Shopify Plus Store Development
Install B2B & B2C apps to accelerate sales
jeanniehind
New Member
3 0 0

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 -%}

<section id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="slideshow">
<div class="Slideshow {% if section.settings.show_fullscreen %}Slideshow--fullscreen{% endif %}">
<div class="Slideshow__Carousel {% if section.settings.show_arrow %}Slideshow__Carousel--withScrollButton{% endif %} Carousel Carousel--fadeIn {% if section.settings.show_fullscreen %}Carousel--fixed{% endif %} Carousel--insideDots"
data-flickity-config='{{ flickity_options }}'>
{%- for block in section.blocks -%}
<div id="Slide{{ block.id }}" class="Slideshow__Slide Carousel__Cell {% if forloop.first %}is-selected{% endif %}" {% if forloop.first %}style="visibility: visible"{% endif %} data-slide-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
{%- 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 -%}
<div class="Slideshow__ImageContainer {% if block.settings.apply_overlay %}Image--contrast{% endif %} {% unless section.settings.show_fullscreen %}AspectRatio{% endunless %} hidden-tablet-and-up"
style="{% unless section.settings.show_fullscreen %}--aspect-ratio: {{ mobile_image.aspect_ratio }};{% endunless %} background-image: url({{ mobile_image | img_url: '1x1', format: 'jpg' }})">
<img class="Slideshow__Image Image--lazyLoad"
src="{{ mobile_image | img_url: '1x1' }}"
data-src="{{ mobile_image | img_url: 'x800' }}"
alt="{{ mobile_image.alt | escape }}">

<noscript>
<img class="Slideshow__Image" src="{{ mobile_image | img_url: 'x800' }}" alt="{{ mobile_image.alt | escape }}">
</noscript>
</div>
{%- endif -%}

{%- if block.settings.image -%}
<div class="Slideshow__ImageContainer {% if block.settings.apply_overlay %}Image--contrast{% endif %} {% unless section.settings.show_fullscreen %}AspectRatio{% endunless %} hidden-phone"
style="{% unless section.settings.show_fullscreen %}--aspect-ratio: {{ block.settings.image.aspect_ratio }};{% endunless %} background-image: url({{ block.settings.image | img_url: '1x1', format: 'jpg' }})">
{% assign image_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

<img class="Slideshow__Image Image--lazyLoad hide-no-js"
data-src="{{ image_url }}"
data-optimumx="1.2"
data-widths="[400, 600, 800, 1000, 1200, 1400, 1600, 1800]"
data-sizes="auto"
alt="{{ block.settings.image.alt | escape }}">

<noscript>
<img class="Slideshow__Image" src="{{ block.settings.image | img_url: '1000x' }}" alt="{{ block.settings.image.alt | escape }}">
</noscript>
</div>
{%- else -%}
<div class="Slideshow__ImageContainer {% if block.settings.apply_overlay %}Image--contrast{% endif %} {% if section.settings.show_fullscreen %}PlaceholderBackground{% endif %} PlaceholderSvg--dark">
{%- capture placeholder -%}{% cycle 'lifestyle-1', 'lifestyle-2' %}{%- endcapture -%}
{{ placeholder | placeholder_svg_tag: 'Slideshow__Image PlaceholderBackground__Svg' }}
</div>
{%- endif -%}

<div class="Slideshow__Content Slideshow__Content--{{ block.settings.content_position }}">
{%- if block.settings.subheading != blank or block.settings.title != blank -%}
<header class="SectionHeader">
{%- if block.settings.subheading != blank -%}
<h3 class="SectionHeader__SubHeading Heading u-h6">{{ block.settings.subheading | escape }}</h3>
{%- endif -%}

{%- if block.settings.title != blank -%}
<h2 class="SectionHeader__Heading SectionHeader__Heading--emphasize Heading u-h1">{{ block.settings.title | escape }}</h2>
{%- 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 -%}
<div class="SectionHeader__ButtonWrapper">
<div class="ButtonGroup ButtonGroup--spacingSmall {% if has_two_buttons %}ButtonGroup--sameSize{% endif %}">
{%- if block.settings.button_1_text != blank -%}
<a href="{{ block.settings.button_1_link }}" class="ButtonGroup__Item Button">{{ block.settings.button_1_text | escape }}</a>
{%- endif -%}

{%- if block.settings.button_2_text != blank -%}
<a href="{{ block.settings.button_2_link }}" class="Slideshow__Button ButtonGroup__Item Button">{{ block.settings.button_2_text | escape }}</a>
{%- endif -%}
</div>
</div>
{%- endif -%}
</header>
{%- endif -%}
</div>
</div>
{%- endfor -%}
</div>

{%- if section.settings.show_arrow -%}
<button data-href="#section-{{ section.id }}-end" class="Slideshow__ScrollButton RoundButton RoundButton--medium" data-animate-bottom>
{%- include 'icon' with 'arrow-bottom' -%}
</button>
{%- endif -%}
</div>

<span id="section-{{ section.id }}-end" class="Anchor"></span>
</section>

<style>
#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 }};
}
}
</style>

{% 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. 

 

 

jeanniehind
New Member
3 0 0

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 -%}

<section id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="slideshow">
<div class="Slideshow {% if section.settings.show_fullscreen %}Slideshow--fullscreen{% endif %}">
<div class="Slideshow__Carousel {% if section.settings.show_arrow %}Slideshow__Carousel--withScrollButton{% endif %} Carousel Carousel--fadeIn {% if section.settings.show_fullscreen %}Carousel--fixed{% endif %} Carousel--insideDots"
data-flickity-config='{{ flickity_options }}'>
{%- for block in section.blocks -%}
<div id="Slide{{ block.id }}" class="Slideshow__Slide Carousel__Cell {% if forloop.first %}is-selected{% endif %}" {% if forloop.first %}style="visibility: visible"{% endif %} data-slide-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
{%- 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 -%}
<div class="Slideshow__ImageContainer {% if block.settings.apply_overlay %}Image--contrast{% endif %} {% unless section.settings.show_fullscreen %}AspectRatio{% endunless %} hidden-tablet-and-up"
style="{% unless section.settings.show_fullscreen %}--aspect-ratio: {{ mobile_image.aspect_ratio }};{% endunless %} background-image: url({{ mobile_image | img_url: '1x1', format: 'jpg' }})">
<img class="Slideshow__Image Image--lazyLoad"
src="{{ mobile_image | img_url: '1x1' }}"
data-src="{{ mobile_image | img_url: 'x800' }}"
alt="{{ mobile_image.alt | escape }}">

<noscript>
<img class="Slideshow__Image" src="{{ mobile_image | img_url: 'x800' }}" alt="{{ mobile_image.alt | escape }}">
</noscript>
</div>
{%- endif -%}

{%- if block.settings.image -%}
<div class="Slideshow__ImageContainer {% if block.settings.apply_overlay %}Image--contrast{% endif %} {% unless section.settings.show_fullscreen %}AspectRatio{% endunless %} hidden-phone"
style="{% unless section.settings.show_fullscreen %}--aspect-ratio: {{ block.settings.image.aspect_ratio }};{% endunless %} background-image: url({{ block.settings.image | img_url: '1x1', format: 'jpg' }})">
{% assign image_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

<img class="Slideshow__Image Image--lazyLoad hide-no-js"
data-src="{{ image_url }}"
data-optimumx="1.2"
data-widths="[400, 600, 800, 1000, 1200, 1400, 1600, 1800]"
data-sizes="auto"
alt="{{ block.settings.image.alt | escape }}">

<noscript>
<img class="Slideshow__Image" src="{{ block.settings.image | img_url: '1000x' }}" alt="{{ block.settings.image.alt | escape }}">
</noscript>
</div>
{%- else -%}
<div class="Slideshow__ImageContainer {% if block.settings.apply_overlay %}Image--contrast{% endif %} {% if section.settings.show_fullscreen %}PlaceholderBackground{% endif %} PlaceholderSvg--dark">
{%- capture placeholder -%}{% cycle 'lifestyle-1', 'lifestyle-2' %}{%- endcapture -%}
{{ placeholder | placeholder_svg_tag: 'Slideshow__Image PlaceholderBackground__Svg' }}
</div>
{%- endif -%}

<div class="Slideshow__Content Slideshow__Content--{{ block.settings.content_position }}">
{%- if block.settings.subheading != blank or block.settings.title != blank -%}
<header class="SectionHeader">
{%- if block.settings.subheading != blank -%}
<h3 class="SectionHeader__SubHeading Heading u-h6">{{ block.settings.subheading | escape }}</h3>
{%- endif -%}

{%- if block.settings.title != blank -%}
<h2 class="SectionHeader__Heading SectionHeader__Heading--emphasize Heading u-h1">{{ block.settings.title | escape }}</h2>
{%- 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 -%}
<div class="SectionHeader__ButtonWrapper">
<div class="ButtonGroup ButtonGroup--spacingSmall {% if has_two_buttons %}ButtonGroup--sameSize{% endif %}">
{%- if block.settings.button_1_text != blank -%}
<a href="{{ block.settings.button_1_link }}" class="ButtonGroup__Item Button">{{ block.settings.button_1_text | escape }}</a>
{%- endif -%}

{%- if block.settings.button_2_text != blank -%}
<a href="{{ block.settings.button_2_link }}" class="Slideshow__Button ButtonGroup__Item Button">{{ block.settings.button_2_text | escape }}</a>
{%- endif -%}
</div>
</div>
{%- endif -%}
</header>
{%- endif -%}
</div>
</div>
{%- endfor -%}
</div>

{%- if section.settings.show_arrow -%}
<button data-href="#section-{{ section.id }}-end" class="Slideshow__ScrollButton RoundButton RoundButton--medium" data-animate-bottom>
{%- include 'icon' with 'arrow-bottom' -%}
</button>
{%- endif -%}
</div>

<span id="section-{{ section.id }}-end" class="Anchor"></span>
</section>

<style>
#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 }};
}
}
</style>

{% 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