Image Transform 404 From User Session

Question

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> 

Answer 1

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>