Change image from web to mobile

Solved
alexandrek
Tourist
4 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;
        }
      }
    }
0 Likes
AvidBrio
Shopify Expert
144 7 12

@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
0 Likes
alexandrek
Tourist
4 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?

0 Likes

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Add a slider to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Contact: ezfycode@gmail.com.
0 Likes
alexandrek
Tourist
4 1 0

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

0 Likes
alexandrek
Tourist
4 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>
0 Likes