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 %}
Community
  • 1
Rob Webb
  • 113
  • 7
  • What is it that isn't working? – Marion Newlevant Mar 02 '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 03 '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 03 '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 03 '15 at 22:27

1 Answers1

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 %}
Rob Webb
  • 113
  • 7