Built-in focus area not working on cropped images

The CMS Questions
1

Hi all - I am trying to use the built-in focus feature but cannot get any changes to show on the frontend. I can’t find any documentation, but according to this post it should automatically be rendered when the crop method is used.

I am using the crop method but still no luck - is anyone able to help me spot the issue?

Template:

 <img class="img-fluid" loading="lazy" alt="<?= $thumb->alt() ?>"
src="<?= $thumb>thumb(["width" => 500, "crop" => "center"])->url() ?>"
srcset="<?= $thumb->srcset("catalogue") ?>"
height="<?= $thumb->height() ?>"width="<?= $thumb->width() ?>">

Config:

"thumbs" => [
    "srcsets" => [
      "catalogue" => [
        "800w" => [
          "width" => 500,
          "height" => 700,
          "quality" => 70,
          "crop" => "center",
        ],
      ],
    ],
  ]

Thanks!

2

Probably because you set the crop to center instead of true

3

Thanks for the reply. I’ve tried that and unfortunately no change. Image focus is set to:

83% 52.9% but still shows unchanged in frontend.

4

You’ve probably tried this, but the usual suspects for me: media folder, cache folder, old focus plugin still installed, focus: field still in image blueprint.

1 Like
5

Thanks for chipping in. I’ve tried clearing media & cache folders, and this is a fresh install so no old plugins or legacy blueprint fields present. The mystery continues!

6

Could you post your new code?

7

Apologies, away for weekend. New code below:

Template:

 <img class="img-fluid" loading="lazy" alt="<?= $thumb->alt() ?>"
src="<?= $thumb>thumb(["width" => 500, "crop" => "true"])->url() ?>"
srcset="<?= $thumb->srcset("catalogue") ?>"
height="<?= $thumb->height() ?>"width="<?= $thumb->width() ?>">

Config:

"thumbs" => [
    "srcsets" => [
      "catalogue" => [
        "800w" => [
          "width" => 500,
          "height" => 700,
          "quality" => 70,
          "crop" => "true",
        ],
      ],
    ],
  ]

Thanks!

8

I think it should be "crop" => true (as in true as value, not the string "true").

9

But of course! Silly me - always learning. Thanks @distantnative and @texnixe you’re the best!