How focal points make sure content editors never have to worry about cropped images again?

Visual content is king in the digital world, but poorly cropped images can ruin the user experience and make your website look unprofessional. Thankfully, DatoCMS has a solution: focal points. This powerful feature ensures that your images always look their best, no matter how they're resized or displayed. Here's how it works and why it's a game-changer for content editors:

What are focal points?

Simply put: focal points are the most important part of an image – the area that you want to be visible, even when the image is cropped when displayed on a website. In DatoCMS an Drupal, you can easily set focal points for each image in the media library. This ensures that when cropping or resizing an image, the key elements are always in view.

The problem with traditional cropping

Traditional image cropping methods often result in awkward cuts and missing elements.  For example, a headshot might get cropped so that the person's face is partially cut off, or a product image might lose important details. This is especially problematic when images are displayed on different devices with varying screen sizes.

How focal points solve the problem

With focal points, we intelligently crop images based on the area that is designated as most important. This means that the subject of the image will always be in focus, regardless of how the image is resized or displayed. No more awkward cuts or missing elements!

Why content editors love focal points

Focal points are a lifesaver for content editors, who often have to deal with images that are cropped incorrectly or displayed in unflattering ways. With DatoCMS or Drupal, you can rest assured that your images will always look their best, no matter where they're used. This frees up time for editors to focus on other tasks, like creating compelling content and optimizing the user experience.

How to use focal points in DatoCMS

Using focal points in DatoCMS is a breeze. Simply upload your image to the media library, then click on the "Focal Point" icon. A draggable round circle will appear over the image, allowing you to select the area you want to focus on. Once you've set the focal point, DatoCMS will take care of the rest.

How to use focal points in Drupal

The same goes for Drupal: after uploading your image in the Drupal media library, you can click on the "Focal Point" icon in the top right corner after which a grid will appear over the image, allowing you to select the focal point.

Curious about how Wieni handles focal points and other image optimization tools in their CMS? Get in touch with us to learn more!