Liquid, JavaScript, themes, sales channels
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;
}
}
}
Solved! Go to the solution
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
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>
@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...
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?
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
Thank you, I will try this one and let you know.
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>
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024