9

How do image focal points work in Craft 3? I see the dot in the CP, but I'm unable to set the focus.

3 Answers 3

6

Focal points are used mainly for when Asset transforms (i.e. cropping) are performed in Craft. They tell Craft where it should focus on the image when performing these actions.

4
  • 2
    How would one get the focal point data (presumably as an X/Y in percentages) in a template? Is it assetFieldName.getFocalPoint()? (as a non-programmer, I find the Craft 3 Classes docs very confusing for purposes of templating...)
    – Sandwich
    Commented Jul 10, 2018 at 15:48
  • I would like to know this as well...
    – outline4
    Commented Aug 24, 2018 at 10:23
  • Here it is! docs.craftcms.com/api/v3/… Commented Aug 30, 2018 at 9:38
  • 1
    @Sandwich {% if slide.backgroundImage.one.hasFocalPoint %} {% set x = slide.backgroundImage.one.focalPoint | first %} {% set y = slide.backgroundImage.one.focalPoint | last %} {{ x }}, {{ y }} {% endif %} Commented Oct 5, 2018 at 15:50
13

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

<div class="block-header" style="{{ imgStyles is defined ? imgStyles }}">
    <h1>Mmm, backgrounds</h1>
</div>
4
  • 1
    Length values in CSS are space separated, not comma separated. Join(',') would make the browser disregard the second value. You should use join(' ') instead.
    – nordhagen
    Commented Feb 12, 2019 at 13:38
  • Good catch. I think I managed to overlook that as the X axis was all that was relevant to my implementation and browsers seem to respect that initial value despite the comma.
    – Dom Stubbs
    Commented Feb 12, 2019 at 15:38
  • Just be aware that this method doesn't necessarily keep the focal point in the centre. For example, setting a focal point along the x-axis of 0.1 might actually require a background-position of 0% (not 10%) to keep it closest to the centre. It requires some more complex math to get it properly correct. Although for many cases this is "good enough".
    – Simon East
    Commented Mar 11, 2019 at 4:16
  • For the record, this CSS Tricks article seems like it has the key to figuring out the exact BG position values given a desired focal point: css-tricks.com/… Still working on how to convert this to Twig. Unfortunately, it may also need JS for fluidly-sized elements.
    – Sandwich
    Commented Dec 21, 2021 at 8:50
3

To piggyback off Brad, Focal Points tell craft where to crop the image but can also be used to position background images.

Here's how you can get focal point positions:

  {% if slide.backgroundImage.one.hasFocalPoint %}
    {% set x = slide.backgroundImage.one.focalPoint | first %}
    {% set y = slide.backgroundImage.one.focalPoint | last %}
    {{ x }}, {{ y }}
  {% endif %}

This will return the focal point position at a decimal (ie .32, .55)

1
  • To get this working with CSS you need to multiply the number by 100 and add % after the number. Commented Dec 10, 2018 at 15:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.