Hey There,
Im new to Shopify and am currently trying to add a Mobile banner section that will change the banner to a new image based on the screen size.
I’ve managed to add into the block of the liquid file the section to be able to upload the mobile banner image.
But i can’t seem to manage to get the theme to pick the image based on the screen size.
Currently the banner only shows the mobile banner, regardless of screen size.
This is the liquid code that i have. I haven’t added the schema part of the code, if that is needed to help with this question please let me know and i will add that in.
{%- liquid
assign mobile_height = section.settings.mobile_height
assign content_position = section.settings.content_position
assign desktop_height = section.settings.desktop_height
assign desktop_image_width = section.settings.desktop_image_width
assign desktop_layout = section.settings.layout
assign full_width = section.settings.full_width
assign autoplay = section.settings.autoplay
assign disable_top_spacing = section.settings.disable_top_spacing
assign disable_bottom_spacing = section.settings.disable_bottom_spacing
case mobile_height
when 'mobile-height-350'
assign mobile_image_height = 350
when 'mobile-height-400'
assign mobile_image_height = 400
when 'mobile-height-450'
assign mobile_image_height = 450
when 'mobile-height-500'
assign mobile_image_height = 500
else
assign mobile_image_height = 500
endcase
if autoplay
assign autoplay = section.settings.autoplay_length | times: 1000
endif
assign dots = true
if section.blocks.size < 2
assign dots = false
endif
if desktop_height == 'desktop-height-auto'
assign image_carousel_class = 'adapt-to-content'
endif
if section.index == 1
assign priority = 'high'
endif
-%}
<div class="row{% if full_width %} full-width-row-full{% endif %}">
<div class="small-12 columns">
<div class="image-with-text-slideshow grid--image-{{ desktop_image_width }} {{ desktop_layout }} {{ content_position }} section-spacing{% if disable_top_spacing %} section-spacing--disable-top{% endif %}{% if disable_bottom_spacing %} section-spacing--disable-bottom{% endif %}">
<div class="image-with-text-slideshow__image carousel inner-carousel {{ image_carousel_class }}" data-fade="true">
{% for block in section.blocks %}
<div class="image-with-text-slideshow__image-slide carousel__slide">
<div class="image-with-text-slideshow__image-media {{ mobile_height }} {{ desktop_height }}">
{% if block.settings.image %}
{% assign image = block.settings.image %}
{% assign small_width = image.src.height | times: '375' | divided_by: image.src.width %}
{% assign master_width = image.src.width | append: 'x' | append: image.src.height %}
{% assign width = '375x500' | append: small_width | append: master_width %}
{%- render 'responsive-image', image: image, sizes: width, class: 'image-with-text-slideshow--desktop', priority: priority -%}
{% else %}
{%- assign index = forloop.index | modulo: 2 | plus: 1 -%}
{{ 'hero-apparel-' | append: index | placeholder_svg_tag: 'placeholder_svg_tag' }}
{% endif %}
{% if block.settings.mobile_image %}
{% assign image = block.settings.mobile_image %}
{% assign master_width = image.src.width | append: 'x' | append: image.src.height %}
{% assign width = '375x500' | append: mobile_image_height | append: ',' | append: master_width %}
{%- render 'responsive-image', image: image, sizes: width, class: 'image-with-text-slideshow--mobile', priority: priority -%}
{% else %}
{%- assign index = forloop.index | modulo: 2 | plus: 1 -%}
{{ 'hero-apparel-' | append: index | placeholder_svg_tag: 'placeholder_svg_tag' }}
{% endif %}
</div>
</div>
{% endfor %}
</div>
<div class="image-with-text-slideshow__content carousel inner-carousel" data-dots="{{ dots }}" data-autoplay="{{ autoplay }}" data-fade="true">
{% for block in section.blocks %}
<div class="image-with-text-slideshow__content-content carousel__slide {{ desktop_height }}" {{ block.shopify_attributes }}>
{% if block.settings.heading %}
<h3>{{ block.settings.heading | newline_to_br }}</h3>
{% endif %}
{% if block.settings.content %}
<p>{{ block.settings.content | newline_to_br }}</p>
{% endif %}
{% if block.settings.button_text != blank %}
<a class="text-button" href="{{ block.settings.button_link }}" role="button" title="{{ block.settings.button_text | escape }}">{{ block.settings.button_text }}</a>
{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
This is the css code that i added
.image-with-text-slideshow--mobile {
display: block; }
@media only screen and (min-width: 768px) {
.image-with-text-slideshow--mobile {
display: none; } }
.image-with-text-slideshow--desktop {
display: none; }
@media only screen and (min-width: 768px) {
.image-with-text-slideshow--desktop {
display: block; } }