Focal point option on images

✋ Feature Requests
,
1

As far as I see, you use the imgix CDN service for your image assets, which provides several image editing options. Now, other CMS like Wagtail or CraftCMS provide an option to set focal points on each image individually through the CMS admin interface, whereas this seems impossible with DatoCMS.

2

This would be quite a nice enhancement for Dato, given that imgix makes this so easy if the information is there; what would be needed is an interface for setting a cross-hair like target on the image…

Originally posted by lunelson@gmail.com

3

This would be an excellent addition. There are definitely occasions where we’d like to add constraints on image dimensions in the content model.

4

@stefano.verna I think the way Sanity does it with an ellipse over the focused area (instead of a crosshair) and a preview of how it would render on different aspect ratios is very handy.

5

Hi, Is this already available?

6

@glenn.bostoen it is available via the API but we haven’t developed an interface for this yet

1 Like
7

Working on it!

2020-08-21 16.27.42

3 Likes
8

Launched! https://www.datocms.com/blog/new-feature-control-the-cropping-of-your-images-with-focal-points

9

Unfortunately, the focal point doesn’t update when I change it in the CMS. I’m still getting the center center focal point.

image
image613×655 179 KB

Here’s the link params I’m using:
?ar=16%3A9&auto=format&dpr=1&fit=crop&w=800&crop=focalpoint&fp-debug=true

EDIT: Seems like graphQl doesn’t retrieve the focal point. It returns it null.

"focalPoint": null
10

Hi @kamil.jura! I need a little more info! Can you give me the ID of the image, and how you’re getting the URL of the image inside your code?

11

So I took some more time to investigate. The focalpoint cropping works wonders when it’s a Single Asset field. But fails when it’s a Gallery (i.e. multiple assets).

I changed my code to use Featured Image (as featured image, instead of gallery[0] as a first image).

EDIT:

What I was trying to do was, to use 1st image of a Gallery as Featured Image of a post. I’ve now created a Featured Image field, and it’s working.

I would still love the Gallery to have focalpoints working. As I will need it very soon.

12

Should be working @kamil.jura. If you could give me some specific information as asked in my previous message we can try to debug and see what’s not working!

  • What GraphQL query are you using to get the gallery image URL?
  • Can you give me the ID of the image that’s failing?

Thanks!

13

@s.verna so here’s the query I was using:

         gallery{
          fluid(imgixParams: {fit: "crop", w: "1280", h: "720", crop: "focalpoint"}) {
            aspectRatio
            base64
            height
            sizes
            src
            srcSet
            tracedSVG
            width
          }
          title
          alt

The image ID that’s failing is 2942319. But I tried different ones and they’re failing too.

What I did to make it work was really just changing gallery {} to featuredImage {} and the images started working right away.

14

ok, so you’re on Gatsby

1 Like
15

Alright, v2.5.7 of gatsby-source-datocms should fix the issue! Thanks for reporting!

1 Like