Shopify Design

jeanniehind · ‎11-24-2022

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

BSS-Commerce · ‎11-24-2022

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 | Shopify Customization Services
Install B2B & B2C apps to accelerate sales

jeanniehind · ‎11-25-2022

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

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

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

#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 · ‎11-25-2022

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;