Adding custom code to add mobile image

JackNagle94
Shopify Partner
1 0 0

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; } }

 

 

 

Replies 0 (0)