Focal points on images

I’m trying to add focal_point to my images in liquid.

According to the documentation i need to do something like this:

style="object-position: {{ image.presentation.focal_point }};"

However the presentation is always null. It is not set.

Code too use focal point

The following checks that i have done are:

  1. Can I set focal points on images, I can.
  2. Does my theme support focal points, It does because it works on the Slideshow section

Does anyone know how to get it activated or what i need to do too get the focal point on images?

At the moment i’m using the default code of Dawn and just added the extra code.
I also checked it with the latest Dawn template and even there it didn’t work.

This is the original code of the Dawn template

{%- if article.image -%}
                    
                        

                        
                        

                    

                {%- endif -%}

This is what i added to the default code

{% if article.image.presentation.focal_point %}style="object-position:{{ article.image.presentation.focal_point }}"{% endif %}

I’m not sure what else i can update to qualify for the focal_point to be activated.
Any idea?

Some extra information.
I did some more testing and it looks like the focal_points only works when you are using the sections in the edit mode.
So like image and text end you choose a image in the settings then it works.

But if you are using the image from a blog post or page that are set in the settings of the blog it self.
It doesn’t work. This makes me think that in the BE of Shopify it doesn’t return with the focal points if you are not using the components of the editor mode.

Does anyone know how i can put a request in with the Developers team of Shopify?

Hi,

I’m having the same exact problem. Collection’s featured_image does not contain the focal_point that we set under Contents/Files. I don’t think that variable is passed down to the collection’s featured_image. Did you find any solution for this?

Thanks