Answers.Body: <p>While we’re piggybacking, here’s a snippet that goes one step further and generates the necessary CSS to position an untransformed image:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>{% 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;
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-02-12T13:38:18.490Z
Answers.Text: Length values in CSS are space separated, not comma separated. Join(',') would make the browser disregard the second value. You should use join(' ') instead.
Answers.UserDisplayName: nordhagen
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-02-12T15:38:30.400Z
Answers.Text: 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.
Answers.UserDisplayName: Dom Stubbs
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-03-11T04:16:44.580Z
Answers.Text: 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".
Answers.UserDisplayName: Simon East
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-12-21T08:50:09.370Z
Answers.Text: 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: https://css-tricks.com/focusing-background-image-precise-location-percentages/
  Still working on how to convert this to Twig. Unfortunately, it may also need JS for fluidly-sized elements.
Answers.UserDisplayName: Sandwich
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-10-26T16:20:24.903Z
Answers.LastActivityDate: 2019-02-12T15:43:53.117Z
Answers.LastEditDate: 2019-02-12T15:43:53.117Z
Answers.UserDisplayName: Dom Stubbs
Answers.Body: <p>To piggyback off Brad, Focal Points tell craft where to crop the image but can also be used to position background images. </p>
  
  <p>Here's how you can get focal point positions: </p>
  
  <pre><code>  {% if slide.backgroundImage.one.hasFocalPoint %}
      {% set x = slide.backgroundImage.one.focalPoint | first %}
      {% set y = slide.backgroundImage.one.focalPoint | last %}
      {{ x }}, {{ y }}
    {% endif %}
  </code></pre>
  
  <p>This will return the focal point position at a decimal (ie .32, .55)</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-10T15:58:13.067Z
Answers.Text: To get this working with CSS you need to multiply the number by 100 and add % after the number.
Answers.UserDisplayName: mateostabio
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-10-05T14:57:23.160Z
Answers.LastActivityDate: 2018-10-05T14:57:23.160Z
Answers.UserDisplayName: Matthew Rotter
Answers.Body: <p>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.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-10T15:48:35.307Z
Answers.Text: 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...)
Answers.UserDisplayName: Sandwich
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-24T10:23:20.413Z
Answers.Text: I would like to know this as well...
Answers.UserDisplayName: outline4
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-30T09:38:47.050Z
Answers.Text: Here it is! https://docs.craftcms.com/api/v3/craft-elements-asset.html#property-focalpoint
Answers.UserDisplayName: Luke Pearce
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-10-05T15:50:57.093Z
Answers.Text: @Sandwich {% if slide.backgroundImage.one.hasFocalPoint %}
      {% set x = slide.backgroundImage.one.focalPoint | first %}
      {% set y = slide.backgroundImage.one.focalPoint | last %}
      {{ x }}, {{ y }}
    {% endif %}
Answers.UserDisplayName: Matthew Rotter
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-06-04T22:47:37.770Z
Answers.LastActivityDate: 2018-06-04T22:47:37.770Z
Answers.UserDisplayName: Brad Bell
Body: <p>How do image focal points work in Craft 3? I see the dot in the CP, but I'm unable to set the focus.</p>
  
Tags: <image-transforms><craft-pro>
Title: How do image focal points work in Craft 3?
ThreadText: # How do image focal points work in Craft 3?
  
  (Asked by: username_0 on 2018-06-04)
  
  How do image focal points work in Craft 3? I see the dot in the CP, but I'm unable to set the focus.
  
  **Tags:** image-transforms, craft-pro
  
  
  ---
  
  ## 3 answers
  
  ### Answer by username_7 on 2018-06-04. Score: 6 | Accepted answer
  
  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.
  
  > **Comments:**
  > **username_4**: 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...)  
  > **username_8**: I would like to know this as well...  
  > **username_9**: Here it is! https://docs.craftcms.com/api/v3/craft-elements-asset.html#property-focalpoint  
  > **username_5**: @username_4 {% if slide.backgroundImage.one.hasFocalPoint %}     {% set x = slide.backgroundImage.one.focalPoint | first %}     {% set y = slide.backgroundImage.one.focalPoint | last %}     {{ x }}, {{ y }}   {% endif %}  
  
  ---
  
  ### Answer by username_1 on 2018-10-26. Score: 13
  
  While we’re piggybacking, here’s a snippet that goes one step further and generates the necessary CSS to position an untransformed image:
  
  ```html
  {% 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>
  
  ```
  
  > **Comments:**
  > **username_2**: Length values in CSS are space separated, not comma separated. Join(',') would make the browser disregard the second value. You should use join(' ') instead.  
  > **username_1**: 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.  
  > **username_3**: 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".  
  > **username_4**: 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: https://css-tricks.com/focusing-background-image-precise-location-percentages/ Still working on how to convert this to Twig. Unfortunately, it may also need JS for fluidly-sized elements.  
  
  ---
  
  ### Answer by username_5 on 2018-10-05. Score: 3
  
  To piggyback off username_7, 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)
  
  > **Comments:**
  > **username_6**: To get this working with CSS you need to multiply the number by 100 and add % after the number.  
  
  ---
  
  