JQuery test for landscape or portrait image in Shopify

Question

I'm developing a shopfront in Shopify and test whether a product image in a Flexslider is landscape or portrait:

    <script type="text/javascript">
       $(document).ready(function (){

      $('.flexslider .slides li img').each(function() {
        if ($(this).width() > $(this).height()) {
         $(this).addClass('slide-landscape');
         $('.flex-control-thumbs li img').addClass('thumb-landscape');

       } else if ($(this).height() > $(this).width()) {
         $(this).addClass('slide-portrait');
         $('.flex-control-thumbs li img').addClass('thumb-portrait');
       }
     });
   });
 </script>

For some reason, the images all get the 'landscape' classes, and never the portrait. Not sure what I'm doing wrong. Any advice would be great.

Answer 1

Your basic if/else works for me to write classes to your main images. See fiddle: jsfiddle.net/g28ugzdp

However the 2nd statement in each condition $('.flex-control-thumbs li img').addClass(...); actually adds the class to ALL images that are children of list items within the flex-control-thumbs class. See fiddle: jsfiddle.net/g28ugzdp/1/

You can solve for that in 1 of 2 ways.

1. If your thumbnail images are displayed at their correct aspect ratios, you can simply run the main loop over the $('.flex-control-thumbs li img') object in the same way that you do with $('.flexslider .slides li img').
2. If your thumbnails need to have their classes match the main image, but don't render on the page in the correct aspect ratio, then I would use a for loop and the array properties of your javascript objects to select each image sequentially and modify the matching thumbnail with the same conditional logic. See code below: (also on this fiddle)

$(document).ready(function(){
  var images = $('.flexslider .slides li img'),
      thumbs = $('.flex-control-thumbs li img');
   
  for ( var i = 0; i < images.length; i++ ) {
      if (images[i].width > images[i].height) {
        $(images[i]).addClass('slide-landscape');
        $(thumbs[i]).addClass('thumb-landscape');
      } else {
        $(images[i]).addClass('slide-portrait');
        $(thumbs[i]).addClass('thumb-portrait');
      }
  };
});

.slide-landscape {border-top:8px solid orange;}
.slide-portrait {border-left:8px solid green;}

.thumb-landscape {border-top:4px solid red;}
.thumb-portrait {border-left:4px solid blue;}

li {display:inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="flexslider">
<article class="flex-control-thumbs">
<ul>
<li><img src="http://placekitten.com/g/20/40" /></li>
<li><img src="http://placekitten.com/g/40/20" /></li>
<li><img src="http://placekitten.com/g/20/40" /></li>
<li><img src="http://placekitten.com/g/40/20" /></li>
</ul>
</article>

<article class="slides">
<ul>
<li><img src="http://placekitten.com/g/200/300" /></li>
<li><img src="http://placekitten.com/g/300/200" /></li>
<li><img src="http://placekitten.com/g/200/300" /></li>
<li><img src="http://placekitten.com/g/300/200" /></li>
</ul>
</article>
</div>

Also you may want to set your if condition to be >= or change your else if to be just else so that you can catch any cases where the image is perfectly square.