For HIRE: Nivo Slider Tweaking

slspeller
New Member
3 0 0

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.

0 Likes
Lixon_Louis
Shopify Partner
1174 34 230

Hi, this issue can be solved using CSS.

inbox me lixon@ecommercestudio.in  

Available for hiring. Reach me at lixon@ecommercestudio.in
0 Likes
teathemes_net
Shopify Partner
34 0 0

Forget nivo slider and use nitro slider app, this app extend full power of revolution slider and you can use every where :https://apps.shopify.com/revolution-slider-app

Shopify customization - Shopify theme development - Visit https://teathemes.net
0 Likes
Widgetic
Shopify Partner
31 0 0

Hey there,

This is usually solved by setting the focus on a proper element, which will automatically scale and position your image accordingly. There's a good library for that: http://jonom.github.io/jquery-focuspoint/demos/grid/dolphin.html.

This will prevent the image from looking bad considering any ratio, not just the width. 

 

 

Cheers,

Andu from Widgetic

0 Likes