How do image focal points work in Craft 3? How do image focal points work in Craft 3? I see the dot in the CP, but I'm unable to set the focus.
While we’re piggybacking, here’s a snippet that goes one step further and generates the necessary CSS to position an untransformed image:



{% set img = entry.headingImage.one %}

{% if img %}
    {% set imgStyles = "background-image: url('" ~ img.getUrl() ~ "');"|raw %}

    {% if img.hasFocalPoint %}
        {% set x = img.focalPoint | first * 100 ~ '%' %}
        {% set y = img.focalPoint | last * 100 ~ '%' %}
        {% set imgStyles = imgStyles ~ ' background-position: ' ~ [x, y]|join(' ') %}
    {% endif %}
{% endif %}

&lt;div class="block-header" style="{{ imgStyles is defined ? imgStyles }}"&gt;
    &lt;h1&gt;Mmm, backgrounds&lt;/h1&gt;
&lt;/div&gt;