Shopify proportions / image size

Question

I am trying to get to have two classes for my product images, one portrait class and one landscape class. In my theme (brooklyn), there is an option of

{% if settings.product_image_type == 'portrait' %}

 {% if is_portrait_image %}

But those are from the settings of the theme, and not actually related to the proportions of the images. I have looked at the shopify documentation (https://help.shopify.com/themes/liquid/objects/image#image-variants), but I can't find a solution on how to grab the width/height of an image or their proportions. Does anyone know how I can do this?

Answer 1

Perhaps by doing it on the front-end using jQuery, with something like this:

$(function(){
    $(".grid-product__image").each(function(){
        var width = $(this).width();
        var height = $(this).height();
        if(width > height) {
            $(this).addClass("landscape");
        } else {
            $(this).addClass("portrait");
        }
    });
});