Answers.Body: <p>You can't use FocusPoint like that with the default Craft Transforms, which might be your problem. You'll need to use Imager to get the position as a percentage supported.</p>
  
  <p>Something like:</p>
  
  <pre><code>{% set image   = entry.listingImage.first() %}
  {% set max479  = craft.imager.transformImage(image, {width: 480, height: 200, mode: 'crop', jpegQuality: 70, position: image.focusPctX ~ '% ' ~ image.focusPctY ~ '%'   }) %}
  {% set min480  = craft.imager.transformImage(image, {width: 700, height: 250, mode: 'crop', jpegQuality: 70, position: image.focusPctX ~ '% ' ~ image.focusPctY ~ '%'   }) %}
  {% set min700  = craft.imager.transformImage(image, {width: 960, height: 250, mode: 'crop', jpegQuality: 70, position: image.focusPctX ~ '% ' ~ image.focusPctY ~ '%'   }) %}
  {% set min960  = craft.imager.transformImage(image, {width: 1280, height: 250, mode: 'crop', jpegQuality: 70, position: image.focusPctX ~ '% ' ~ image.focusPctY ~ '%'  }) %}
  {% set min1280 = craft.imager.transformImage(image, {width: 1500, height: 250, mode: 'crop', jpegQuality: 70, position: image.focusPctX ~ '% ' ~ image.focusPctY ~ '%'  }) %}
  
  {# standard Imager image transforms #}
  &lt;picture&gt;
      &lt;source media="(max-width: 479px)" srcset="{{ max479.url }}"&gt;
      &lt;source media="(min-width: 1280px)" srcset="{{ min1280.url }}"&gt;
      &lt;source media="(min-width: 960px)" srcset="{{ min960.url }}"&gt;
      &lt;source media="(min-width: 700px)" srcset="{{ min700.url }}"&gt;
      &lt;source media="(min-width: 480px)" srcset="{{ min480.url }}"&gt;
      &lt;img src="{{ min1280.url }}" alt="" /&gt;
  &lt;/picture&gt;
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-12-19T17:46:51.113Z
Answers.Text: Removing the position key in the thumb allowed it to work, Will look into Imager for future use, thanks!
Answers.UserDisplayName: mcclaskiem
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-12-19T17:34:08.750Z
Answers.LastActivityDate: 2016-12-19T17:34:08.750Z
Answers.UserDisplayName: Matt Wilcox
Body: <p>I am trying to load an image transform and continually get a 404 which references an issue with the UserSessionService. I have a attached a screen shot as well as twig template for one of the transform.</p>
  
  <pre><code>{% set contributor = entry.contributorProfile.first() %}
  {% set headshot = contributor.headshot.first() %}
  
  {% set thumb = {
      mode: 'crop',
      width: 200,
      height: 200,
      quality: 80,
      position: headshot.focusPctX ~ '% ' ~ headshot.focusPctY ~ '%'
  } %}
  
  &lt;aside class="contributor-excerpt"&gt;
      &lt;img src="{{headshot.getUrl(thumb)}}" alt=""&gt;
  &lt;/aside&gt; 
  </code></pre>
  
  <p><a href="https://i.sstatic.net/WnTCJ.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/WnTCJ.png" alt="enter image description here"></a></p>
  
Tags: <image-transforms>
Title: Image Transform 404 From User Session
ThreadText: # Image Transform 404 From User Session
  
  (Asked by: username_0 on 2016-12-19)
  
  I am trying to load an image transform and continually get a 404 which references an issue with the UserSessionService. I have a attached a screen shot as well as twig template for one of the transform.
  
  ```
  {% set contributor = entry.contributorProfile.first() %}
  {% set headshot = contributor.headshot.first() %}
  
  {% set thumb = {
      mode: 'crop',
      width: 200,
      height: 200,
      quality: 80,
      position: headshot.focusPctX ~ '% ' ~ headshot.focusPctY ~ '%'
  } %}
  
  <aside class="contributor-excerpt">
      <img src="{{headshot.getUrl(thumb)}}" alt="">
  </aside> 
  
  ```
  
  [![enter image description here](https://i.sstatic.net/WnTCJ.png)](https://i.sstatic.net/WnTCJ.png)
  
  **Tags:** image-transforms
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2016-12-19. Score: 2
  
  You can't use FocusPoint like that with the default Craft Transforms, which might be your problem. You'll need to use Imager to get the position as a percentage supported.
  
  Something like:
  
  ```
  {% set image   = entry.listingImage.first() %}
  {% set max479  = craft.imager.transformImage(image, {width: 480, height: 200, mode: 'crop', jpegQuality: 70, position: image.focusPctX ~ '% ' ~ image.focusPctY ~ '%'   }) %}
  {% set min480  = craft.imager.transformImage(image, {width: 700, height: 250, mode: 'crop', jpegQuality: 70, position: image.focusPctX ~ '% ' ~ image.focusPctY ~ '%'   }) %}
  {% set min700  = craft.imager.transformImage(image, {width: 960, height: 250, mode: 'crop', jpegQuality: 70, position: image.focusPctX ~ '% ' ~ image.focusPctY ~ '%'   }) %}
  {% set min960  = craft.imager.transformImage(image, {width: 1280, height: 250, mode: 'crop', jpegQuality: 70, position: image.focusPctX ~ '% ' ~ image.focusPctY ~ '%'  }) %}
  {% set min1280 = craft.imager.transformImage(image, {width: 1500, height: 250, mode: 'crop', jpegQuality: 70, position: image.focusPctX ~ '% ' ~ image.focusPctY ~ '%'  }) %}
  
  {# standard Imager image transforms #}
  <picture>
      <source media="(max-width: 479px)" srcset="{{ max479.url }}">
      <source media="(min-width: 1280px)" srcset="{{ min1280.url }}">
      <source media="(min-width: 960px)" srcset="{{ min960.url }}">
      <source media="(min-width: 700px)" srcset="{{ min700.url }}">
      <source media="(min-width: 480px)" srcset="{{ min480.url }}">
      <img src="{{ min1280.url }}" alt="" />
  </picture>
  
  ```
  
  > **Comments:**
  > **username_0**: Removing the position key in the thumb allowed it to work, Will look into Imager for future use, thanks!  
  
  ---
  
  