User story
As a site visitor
I want images to have the focal point set
So that I could see the relevant part of the image when images are resized
Description
Images are used as media items when specified for the Page and Events thumbnails and when specified manually for cards in the Manual list.
In both cases, the images should be using existing image styles.
We now want to enhance those image styles to include focal point.
Acceptance criteria
AC 1 - Focal point in manually created cards
Given I'm an Editor user
When I add a new image to the site as an Image media
Then I can set a focal point
When I create a Promo card in a Manual list
And I set an image using an Image media
And I save the page
Then I can see the Manual list with rendered Promo cards and images using image styles
And the image shows the focal point centred at the set point.
AC 2 - Focal point in reference cards
Given I'm an Editor user
When I add a new image to the site as an Image media
Then I can set a focal point
When I set this media as a Thumbnail on the Page content
And I create an Automated list of Promo cards
And I save the page
Then I can see the Automated list with rendered Promo cards and images using image styles
And the image shows the focal point centred at the set point.
Solution direction
On the close inspection of the codebase, it appeared that, while there is a support for image styles in the helper function
civictheme_media_image_get_variables(), the image styles are not in use when referencing media items. So this needs to be fixed here as well.
- Update code to use existing image styles.
- Update image styles to use Focal Point module with the same dimensions as currently set (remove the current image actions). Export configs as theme configs.
- Add image styles for each component that does not currently have a dedicated style. Copy values from
civictheme_thumbnail image style. Declare constants describing the styles.
- Add a dependency on `focal_point` module in `civictheme.info.yml` file.
- Add an update hook to programmatically enable `focal_point` module and update current image styles to be identical to configs.
- Update Behat tests to make sure that image styles path is used when page is rendered.
- Remove
civictheme_thumbnail image style configuration yaml file. Add an update hook to remove the configuration from the active site. Update the "update hook" test.