Different Images for Mobile and Desktop on Collage Taste Theme

Store Design
, , ,
1

Hi Community,

I am using the section collage on the Taste Theme.

On the desktop view the image looks fine, but on mobile devices the image gets cropped and looks bad.

How can I set different images for different devices, eg. desktop and mobile or tablet?

I managed to include the setting into the code of the collage.liquid but I can’t make it display the correct image on the corresponding device:

Vapes4You_0-1698407943027.png
Vapes4You_0-1698407943027.png672×369 8.31 KB

Vapes4You_1-1698408019382.png
Vapes4You_1-1698408019382.png1387×817 267 KB

Vapes4You_2-1698408069479.png
Vapes4You_2-1698408069479.png586×789 397 KB

2

I just finished doing this for the Slideshow section. You need to add another image element that only displays an image on mobile devices. So you end up with two: one for desktop and one for mobile. Then use media queries to hide one or the other depending on the viewport width.

You need to duplicate and adjust the following Liquid code:

{
    {
    block.settings.image | image_url: width: 3200 | image_tag: loading: 'lazy',
      sizes: sizes,
      widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
  }
}

Then add CSS media queries.

3

Hi @fadi_yousif ,

thanks for the response, but I get stuck at exactly that part. This is the code part where the image gets drawn but I can’t make it work:

{{ 'collage.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-modal-video.css' | asset_url | stylesheet_tag }}
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- case block.type -%}
            {%- when 'image' -%}
              
                

                  {%- if block.settings.image != blank -%}
                    {%- capture sizes -%}(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px){%- endcapture -%}
                    {{
                      block.settings.image
                      | image_url: width: 3000
                      | image_tag: loading: 'lazy', sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
                    }}
                  {%- else -%}
                    {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
                  {%- endif -%}
                

              

[...]
4

Hi @Vapes4You

You can check this one.

5

Hi @Made4uo-Ribe ,

thanks for sharing, but that is not exactly what I am looking for. I don’t want to make a copy of an entire section. This would is not practical for my problem.

I am defining a second image inside a block of the collage. And I am failing to understand what I have to alter in the code section I provided even with the video.

6

It depends on you how you use it, if you like to add another section or not. Its not neccessary to add section though.

7

The simplest solution is probably to have 2 sections with the collage blocks in different orders. Then display the mobile collage on mobile and hide the desktop collage. Then do the same for the other device type (the section for the other device type is hidden)

This code will hide a section on mobile, it can be adjusted to do the same for desktop. You input your own Section ID and add to the base.css file:

@media screen and (max-width:749px){
#shopify-section-template--14204364990728__cf564e79-f18f-4564-b421-0ab4e6fc975c {display:none; visibility:hidden;}
}

Sorry if that is somewhat confusing I think another user has a video above based on a similar concept, hope this helps!

@biznazz101