2

I've been trying to adapt this helpful post to work with Image Transforms, so that the starting point for generating the responsive images is a cropped high resolution original.

I've defined a Transform called 'fullWidth' in the CMS, and have tried calling:

{% do image.setTransform('fullWidth') %}

Tearing my hair out, would someone be kind enough to assist?

Original code:

{% macro srcset(image, maxCssWidth, includeDimensions) %}
{%- spaceless %}
    {# Is this a 2X image? #}
    {% set is2x = image.filename matches '/@2x\\.\\w+$/' %}

    {# Determine the CSS width for the image, if it were output at 100% #}
    {% set cssWidth = (is2x ? round(image.width / 2) : image.width) %}

    {# Determine the image size that 1X screens should get #}
    {% set width = (cssWidth > maxCssWidth ? maxCssWidth : cssWidth) %}

    {# Determine the image size that 2X screens should get #}
    {% set width2x = (width * 2) > image.width ? image.width : (width * 2) %}

    {# Output the srcset= attribute value #}
    srcset="{{ image.getUrl(image.width != width ? { width: width }) }}, {{ image.getUrl(image.width != width2x ? { width: width2x }) }} 2x"

    {#- Output the width= and height= attributes if needed #}
    {%- if includeDimensions %} width="{{ width }}" height="{{ image.getHeight({ width: width }) }}"{% endif %}
{% endspaceless -%}
{% endmacro %}
  • What is it that isn't working? – Marion Newlevant Mar 2 '15 at 16:31
  • The image that's being output in the template is the original, full-size image and not the 'fullWidth' cropped version. – Rob Webb Mar 3 '15 at 10:25
  • I don't get it, why can't you add the crop directive to the getUrl() calls when you build the srcset? E.g. srcset="{{ image.getUrl(image.width != width ? { width: width, mode : 'crop' }) }}, {{ image.getUrl(image.width != width2x ? { width: width2x, mode : 'crop' }) }} 2x" – Mats Mikkel Rummelhoff Mar 3 '15 at 17:07
  • Thanks, the issue was that the height wasn't being specified anywhere. I added that to the macro and used "mode : 'crop'" as suggested. – Rob Webb Mar 3 '15 at 22:27
2

Here's what I've ended up with:

{% macro srcset(image, maxCssWidth, maxCssHeight, includeDimensions) %}
{%- spaceless %}

    {# Is this a 2X image? #}
    {% set is2x = image.is2x %}

    {# Determine the CSS width for the image, if it were output at 100% #}
    {% set cssWidth = (is2x ? round(image.width / 2) : image.width) %}      

    {# Determine the image size that 1X screens should get #}
    {% set width = (cssWidth > maxCssWidth ? maxCssWidth : cssWidth) %}
    {% set height = maxCssHeight %}        

    {# Determine the image size that 2X screens should get #}
    {% set width2x = (width * 2) > image.width ? image.width : (width * 2) %}
    {% set height2x = (height * 2) > image.height ? image.height : (height * 2) %}

    {# Output the srcset= attribute value #}
    srcset="{{ image.getUrl(image.width != width ? { width: width, height: height, mode: 'crop' }) }}, {{ image.getUrl(image.width != width2x ? { width: width2x, height: height2x, mode: 'crop' }) }} 2x"

    {#- Output the width= and height= attributes if needed #}
    {%- if includeDimensions %} width="{{ width }}" height="{{ image.getHeight({ width: width }) }}"{% endif %}
{% endspaceless -%}
{% endmacro %}
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.