Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-03T22:28:46.423Z
Answers.LastActivityDate: 2015-03-03T22:39:53.610Z
Answers.LastEditDate: 2015-03-03T22:39:53.610Z
Answers.UserDisplayName: Rob Webb
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-03-02T16:31:16.533Z
Comments.Text: What is it that isn't working?
Comments.UserDisplayName: Marion Newlevant
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-03-03T10:25:15.830Z
Comments.Text: The image that's being output in the template is the original, full-size image and not the 'fullWidth' cropped version.
Comments.UserDisplayName: Rob Webb
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-03-03T17:07:49.117Z
Comments.Text: 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"```
Comments.UserDisplayName: Mats Mikkel Rummelhoff
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-03-03T22:27:08.430Z
Comments.Text: Thanks, the issue was that the height wasn't being specified anywhere. I added that to the macro and used "mode : 'crop'" as suggested.
Comments.UserDisplayName: Rob Webb
Tags: <image-transforms><responsive-images>
Title: Generating responsive images from cropped source file
ThreadText: # Generating responsive images from cropped source file
  
  (Asked by: username_0 on 2015-03-01)
  
  I've been trying to adapt [this helpful post](https://craftcms.stackexchange.com/questions/1723/how-can-i-automatically-generate-responsive-images-from-a-single-hi-res-asset) 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 %}
  
  ```
  
  
  ---
  
  