7

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

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.

| improve this answer | |
  • 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 Jul 10 '18 at 15:48
  • I would like to know this as well... – outline4 Aug 24 '18 at 10:23
  • Here it is! docs.craftcms.com/api/v3/… – Luke Pearce Aug 30 '18 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 %} – Matthew Rotter Oct 5 '18 at 15:50
8

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>
| improve this answer | |
  • 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 Feb 12 '19 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 Feb 12 '19 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 Mar 11 '19 at 4:16
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)

| improve this answer | |
  • To get this working with CSS you need to multiply the number by 100 and add % after the number. – mateostabio Dec 10 '18 at 15:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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