<p>Here's what I've ended up with:</p>

<pre><code>{% 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 &gt; maxCssWidth ? maxCssWidth : cssWidth) %}
    {% set height = maxCssHeight %}        

    {# Determine the image size that 2X screens should get #}
    {% set width2x = (width * 2) &gt; image.width ? image.width : (width * 2) %}
    {% set height2x = (height * 2) &gt; 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 %}
</code></pre>

CC BY-SA 3.0
2015-03-03T22:28:46.423Z
2015-03-03T22:39:53.610Z
2015-03-03T22:39:53.610Z
Rob Webb
<p>I've been trying to adapt <a href="https://craftcms.stackexchange.com/questions/1723/how-can-i-automatically-generate-responsive-images-from-a-single-hi-res-asset">this helpful post</a> to work with Image Transforms, so that the starting point for generating the responsive images is a cropped high resolution original.</p>

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

<pre><code>{% do image.setTransform('fullWidth') %}
</code></pre>

<p>Tearing my hair out, would someone be kind enough to assist?</p>

<p>Original code:</p>

<pre><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 &gt; maxCssWidth ? maxCssWidth : cssWidth) %}

    {# Determine the image size that 2X screens should get #}
    {% set width2x = (width * 2) &gt; 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 %}
</code></pre>

CC BY-SA 3.0
2015-03-02T16:31:16.533Z
What is it that isn't working?
Marion Newlevant
CC BY-SA 3.0
2015-03-03T10:25:15.830Z
The image that's being output in the template is the original, full-size image and not the 'fullWidth' cropped version.
Rob Webb
CC BY-SA 3.0
2015-03-03T17:07:49.117Z
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
CC BY-SA 3.0
2015-03-03T22:27:08.430Z
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
<image-transforms><responsive-images>
Generating responsive images from cropped source file
# Generating responsive images from cropped source file

(Asked by: username_0 on 2015-03-01)

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 %}

**Tags:** image-transforms, responsive-images

> **Comments:**
> **username_1**: What is it that isn't working?  
> **username_0**: The image that's being output in the template is the original, full-size image and not the 'fullWidth' cropped version.  
> **username_2**: 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"```  
> **username_0**: Thanks, the issue was that the height wasn't being specified anywhere. I added that to the macro and used "mode : 'crop'" as suggested.  

---

## 1 answers

### Answer by username_0 on 2015-03-03. Score: 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 %}


---

