In the theme we are using for our shopify store, it has a Nivo slider that acts as a snippet, and is included using the liquid include function. Basic stuff. Well, we are trying to modify the the code so that if the screen size is less than 480px, it references a different image file. We need to do this because the current full size image file is a 16:9 ratio cut, which scales down too slim on mobile devices. We need the code modified so that the slider references a 4:3 ratio image file on mobile, but references 16:9 image file in all other cases.
See Larger Image Here: https://c2.staticflickr.com/6/5640/30260403071_e579b20c13_o.png
Current Code Snippet that renders the slideshow (widget-homepage-nivoslider.liquid):
{% if settings.slider_toggle %}<div class="slider_wrap"><div class="nivoSlider">
{% for i in (1..6) %}
{% capture slide_toggle %}slide{{ i }}_toggle{% endcapture %}
{% capture slide_link %}slide{{ i }}_link{% endcapture %}
{% capture slide_image %}slide{{ i }}_image.jpg{% endcapture %}
{% if settings[slide_toggle] and settings[slide_toggle] != '' %}
{% if settings[slide_link] and settings[slide_link] != '' %}
<a href="{{ settings[slide_link] }}">
{% endif %}<img src="{{ slide_image | asset_url }}" alt="" title="#htmlcaption-{{ i }}" />
{% if settings[slide_link] and settings[slide_link] != '' %}</a>{% endif %}
{% endif %}
{% endfor %}</div></div>
{% endif %}
We don't want the code changes to be over engineered or to deviate too far from the existing code base, if possible. We're thinking a simple solution as shown below would work, but don't know to get this working in a liquid template, so we need the hired help from an expert developer.
