For HIRE: Nivo Slider Tweaking

Highlighted
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
Highlighted
Shopify Partner
1166 32 214

Hi, this issue can be solved using CSS.

inbox me lixon@ecommercestudio.in  

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- Available for hiring. lixon@ecommercestudio.in
0 Likes
Highlighted
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
Highlighted
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