Shopify 比例/图片大小

Question

我正在尝试为我的产品图片添加两个 classes，一幅肖像 class 和一幅风景 class。在我的主题（布鲁克林）中，有一个选项

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

 {% if is_portrait_image %}

但这些都是主题的设置，与图片的比例关系不大。我查看了 shopify 文档 (https://help.shopify.com/themes/liquid/objects/image#image-variants)，但找不到有关如何获取图像的 width/height 或其比例的解决方案。有谁知道我该怎么做？

Answer 1

也许可以在前端使用 jQuery，像这样：

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

Shopify 比例/图片大小

Shopify proportions / image size

liquid

shopify