Solved

Change image from web to mobile

alexandrek
Tourist
7 1 0

Hello everyone,
I'm beginner in Shopify and I try to learn myself coding🙂
So I want to see banerimage on web & banermobile on mobile. I can't fix it.
This is the template code:
(I add myself blocks banermobile class="mobile" and mobile.jpg?v=1619698723)

Thank you for your help
Alexandrek

 <div class="section-slideshow-v3">
    <div class="">
      <div class="slick-side-h3">       
        {% if section.blocks.size > 0 %}
        {% for block in section.blocks %}
        {% if block.type == "slideshow" %}
        <div class="itemv-slide-h3">
          <div class="info-sideh3">
            <div class="picture-slideshow">
              {% if block.settings.block_banerimage != blank %}
               <!--     <a href="{{block.settings.block_url}}"> --> 
                <img src="{{block.settings.block_banerimage | img_url: 'master'}}" class="web" alt="web">

          <!--     	<img src="{{block.settings.block_banermobile | img_url: 'mobile'}}" class="mobile" alt="mobile">--> 
         <!--      <img src="https://cdn.shopify.com/s/files/1/0519/0287/3791/files/mobile.jpg?v=1619698723" alt="mobile">--> 
              <!--      </a> --> 

              {% else %}
              <img src="//placehold.it/1920x900" class="img-responsive img_slideh1" alt="slideshow">
              {% endif %}
            </div>

 

.section-slideshow-v3 {
  .slick-dots{
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: unset;
    li{
      margin: 0 3px;
      button{
        &:before{
          opacity: 0;
        }
        font-size: unset;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 12px;
        height: 12px;
        border: 2px solid #fff;
        border-radius: 50%;
      }
    }
    .slick-active{
      button{
        background-color: #fff;
      }
    }
    @media only screen and (max-width: 576px) {
      bottom: 20px;
    }
    @media only screen and (min-width: 576px) {
      bottom: 30px;
    }
  }  
  .slick-dotted.slick-slider {
    margin-bottom: 0px;
    padding: 0;
  } 
  .info-sideh3 {
    position:relative;
    .picture-slideshow {
      overflow: hidden;
      img {
        width: 100%;
        transform: scale(1.1);
        transition: all 8s ease;
        @media only screen and (max-width: 576px) {
          min-height: 400px;
          object-fit: cover;
        }
      }
    }
Accepted Solutions (2)
diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@alexandrek 

Using the <picture> element will be the easiest way to achieve what you are after, but kindly do bear in mind that some HTML knowledge will be necessary to properly implement it.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

alexandrek
Tourist
7 1 0

This is an accepted solution.

@diego_ezfy 

It's working ! Thanks

That's the code I used

             <picture>
    <source srcset="{{block.settings.block_banerimage | img_url: 'master'}}"
            media="(min-width: 600px)">
    <img src="{{block.settings.block_banermobile | img_url: 'master'}} " />
</picture>

View solution in original post

Replies 5 (5)

AvidBrio
Shopify Expert
295 17 29

@alexandrek 

here is my code that work with all themes 
https://community.shopify.com/c/Shopify-Design/how-to-create-top-banner-section-for-section-themes/m...

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
alexandrek
Tourist
7 1 0

Thank you for your answer, but I'm not looking to create a new section. I already organize the schema.

I want to use an image for web screen and use another image for mobile screen. So hide one when the other is used.
How can I do that ? Do I have to play with the alt, the class?

diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@alexandrek 

Using the <picture> element will be the easiest way to achieve what you are after, but kindly do bear in mind that some HTML knowledge will be necessary to properly implement it.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

alexandrek
Tourist
7 1 0

Thank you, I will try this one and let you know.

alexandrek
Tourist
7 1 0

This is an accepted solution.

@diego_ezfy 

It's working ! Thanks

That's the code I used

             <picture>
    <source srcset="{{block.settings.block_banerimage | img_url: 'master'}}"
            media="(min-width: 600px)">
    <img src="{{block.settings.block_banermobile | img_url: 'master'}} " />
</picture>