[#246] Added focal-point image style for banner featured image.

[AlexSkrypnyk]

Closes #246

Checklist before requesting a review

• Subject includes ticket number as [#246] Verb in past tense.
• Ticket number #246 added to description
• Added context in Changed section
• Self-reviewed code and commented in commented complex areas.
• Added tests for fix/feature.
• Relevant tests run and passed locally.

Changed

1. Added config/default/image.style.civictheme_banner_featured.yml — a new civictheme_banner_featured image style ("Banner Featured Image") that applies focal_point_scale_and_crop at 800×800 with crop_type: focal_point, followed by image_convert to webp. Mirrors the existing focal-point styles (civictheme_slider_slide, civictheme_campaign) and the webp conversion used by the wide style. The focal_point module was already enabled.
2. Added _drevops_preprocess_block__civictheme_banner__featured_image() in web/themes/custom/drevops/includes/banner.inc — resolves the banner featured media (node-level field_c_n_banner_featured_image overrides block-level field_c_b_featured_image, mirroring CivicTheme's own resolution order) and applies civictheme_media_image_get_variables($media, 'civictheme_banner_featured') so the focal-point-cropped derivative URL replaces the original. The build render array is passed to field lookups so cacheability metadata bubbles correctly. No-ops when there is no featured image.

Previously the featured image was served at its original upload size and cropped by the browser via CSS object-fit: cover, which centre-crops and ignores the editor-defined focal point. Moving the crop server-side via the focal-point style means the focal point is now honoured.

Screenshots

Before / After

Before
──────────────────────────────────────────────────
Banner featured image rendered at original size,
cropped by browser CSS object-fit: cover
→ focal point ignored, crop always centred

After
──────────────────────────────────────────────────
Banner featured image passed through the new
civictheme_banner_featured image style (800×800
focal_point_scale_and_crop → image_convert webp)
→ crop happens server-side around the focal point

Summary by CodeRabbit

• New Features
  • Added a new banner featured image style for optimized 800×800 cropped images with WebP output.
  • Banner blocks now display a featured image when available, with support for a node-level image override.
• Bug Fixes
  • Improved banner image handling to better resolve and apply the correct featured media in the banner area.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: cf3fd321-8021-4fe8-a5fc-c82718eb40be

📥 Commits

Reviewing files that changed from the base of the PR and between ff1b714 and fd19664.

📒 Files selected for processing (2)

• config/default/image.style.civictheme_banner_featured.yml
• web/themes/custom/drevops/includes/banner.inc

---

📝 Walkthrough

Walkthrough

Adds a new Drupal image style civictheme_banner_featured with focal-point scaling/cropping and WebP conversion, and updates banner block preprocessing to resolve a featured media entity (node override or block-level) and populate $variables['featured_image'] using the new image style.

Changes

Banner Featured Image

Layer / File(s)	Summary
Focal-point image style configuration config/default/image.style.civictheme_banner_featured.yml	New enabled image style scales/crops images to 800x800 using focal point cropping, then converts output to WebP.
Featured image resolution in banner preprocessing web/themes/custom/drevops/includes/banner.inc	Imports MediaInterface, calls a new helper from the banner block preprocess function, and adds _drevops_preprocess_block__civictheme_banner__featured_image() which resolves media from a node override or block content, validates it as MediaInterface, and sets $variables['featured_image'] via civictheme_media_image_get_variables().

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Block as civictheme_banner Block
  participant Preprocess as _drevops_preprocess_block__civictheme_banner
  participant Helper as featured_image helper
  participant Media as civictheme_media_image_get_variables

  Block->>Preprocess: render banner block
  Preprocess->>Helper: invoke featured image helper
  Helper->>Helper: resolve node override or block media
  Helper->>Helper: verify MediaInterface
  Helper->>Media: request image variables
  Media-->>Helper: return image variables
  Helper-->>Preprocess: set featured_image variable

Loading

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: a focal-point image style for the banner featured image.
Linked Issues check	✅ Passed	The PR implements the requested focal-point image style and banner featured-image handling for issue #246.
Out of Scope Changes check	✅ Passed	The changes stay focused on the image style and banner image resolution, with no obvious unrelated additions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/246-banner-focal-image

---

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Code coverage (threshold: 80%)

  Classes: 50.00% (7/14)
  Methods: 73.33% (22/30)
  Lines:   93.18% (355/381)

Per-class coverage

Drupal\do_content_api\EventSubscriber\JsonApiWriteGateSubscriber
  Methods:  66.67% ( 2/ 3)   Lines:  88.89% (  8/  9)
Drupal\do_content_api\Hook\EntityCreateAccessHook
  Methods: 100.00% ( 1/ 1)   Lines: 100.00% (  9/  9)
Drupal\do_content_api\Hook\ModerationPolicyHook
  Methods:  50.00% ( 1/ 2)   Lines:  93.75% ( 15/ 16)
Drupal\do_content_api\Routing\RouteSubscriber
  Methods: 100.00% ( 1/ 1)   Lines: 100.00% (  6/  6)
Drupal\do_feed\FeedUrlBuilder
  Methods: 100.00% ( 4/ 4)   Lines: 100.00% ( 18/ 18)
Drupal\do_feed\Form\FeedSettingsForm
  Methods: 100.00% ( 4/ 4)   Lines: 100.00% ( 15/ 15)
Drupal\do_feed\Hook\EntityDeleteHook
  Methods:  50.00% ( 1/ 2)   Lines:  92.31% ( 12/ 13)
Drupal\do_feed\Hook\EntityPresaveHook
  Methods: 100.00% ( 4/ 4)   Lines: 100.00% ( 54/ 54)
Drupal\do_feed\Hook\PreprocessParagraphHook
  Methods: 100.00% ( 2/ 2)   Lines: 100.00% ( 14/ 14)
Drupal\do_feed\Hook\PreprocessViewsViewRowRssHook
  Methods: 100.00% ( 1/ 1)   Lines: 100.00% (  3/  3)
Drupal\do_feed\Hook\ViewsPreViewHook
  Methods:  50.00% ( 1/ 2)   Lines:  96.43% ( 27/ 28)

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.16%. Comparing base (ff1b714) to head (fd19664).

Additional details and impacted files

@@           Coverage Diff            @@
##           develop     #247   +/-   ##
========================================
  Coverage    89.16%   89.16%           
========================================
  Files           15       15           
  Lines          203      203           
========================================
  Hits           181      181           
  Misses          22       22           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.