Problem/Motivation
In the Drupal CMS site-template picker, the Horizon Aid card does not read as a website the way every other template does, and its description does not follow the format the other cards use.
The card image is cropped. The picker renders the image in a 368x294 box (ratio 1.25) with object-fit: cover and object-position: 50% 0%. Horizon Aid ships screenshot.webp at 632x304 (ratio 2.08), so the browser discards roughly 40% of the image width to fill the box. The site logo is cropped off the left edge, the main navigation is clipped, and the hero photograph fills the frame edge to edge with no page around it, so the card reads as a photograph rather than a site.
Every other site template in the picker ships its screenshot at 500x400, which is exactly the 1.25 ratio of the box, so nothing is cropped: Haven, Byte, Starter, Everbright, Forma and Mercury Demo all measure 500x400.
The description also sits apart from its neighbours. The other cards open with "Designed for ..." and say what the template gives you. Horizon Aid opens with "A site template recipe ..." and ends on how it was built, which does not tell a site builder what they get.
Steps to reproduce
mkdir -p my-drupal-site-horizonaid cd my-drupal-site-horizonaid ddev config --project-type=drupal11 --docroot=web ddev start -y ddev composer create-project drupal/cms ddev composer config minimum-stability dev ddev exec rm -f composer.lock ddev composer require drupal/horizonaid:1.0.x-dev
Open /core/install.php, enter a site name and continue to "Choose a site template". Compare the Horizon Aid card with the cards beside it. Reading the rendered image in the browser shows the mismatch:
const img = document.querySelector('.form-item-horizon-aid img'); [img.naturalWidth, img.naturalHeight] // 632 x 304, ratio 2.08 img.getBoundingClientRect() // 368 x 294, ratio 1.25 getComputedStyle(img).objectFit // cover
Proposed resolution
- Reshoot
screenshot.webpat 500x400, matching every other site template and the picker's own box, so the picker crops nothing. Captured from the home page at a 1500x1200 viewport and scaled down, it shows the header and navigation, the complete hero with its heading, sentence and call to action, and the opening of the section below it. - Rewrite
descriptioninrecipe.ymlin the format the other cards use, opening with "Designed for" and naming what the template ships.
The card in the Drupal CMS installer

Remaining tasks
- ✔ Reshoot the installer card at 500x400
- ✔ Rewrite the recipe description in the site-template format
- ✔ Verify both in the Drupal CMS installer in a real browser
- ❌ Review by maintainers
User interface changes
The Horizon Aid card and its description in the Drupal CMS site-template picker. No change to the installed site.
API changes
None.
Data model changes
None.
AI usage
Written with Claude Code (Opus 5) under human review, following the Drupal AI policy.
| Comment | File | Size | Author |
|---|---|---|---|
| ha-installer-before-shipped.png | 523.72 KB | rajab natshah | |
| ha-installer-final.png | 509.38 KB | rajab natshah | |
| ha-installer-horizonaid-selected.png | 500.27 KB | rajab natshah |
Issue fork horizonaid-3620998
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
rajab natshahMerge request !70 is open against 1.0.x with both changes.
The card is now 500x400, the ratio of the picker's own 368x294 image box, so nothing is cropped: 0% of the image is discarded now, against roughly 40% of its width before. It shows the header and navigation, the complete hero with its heading, sentence and Donate call to action, and the opening of the section below it.
The description now opens with "Designed for" and names what the template ships, matching the format the other cards use.
Verified by building a Drupal CMS site from the branch and driving /core/install.php to the site-template step in a real browser, comparing the card against Haven, Byte, Starter, Everbright, Forma and Mercury Demo. The screenshots are embedded in the issue summary.
Comment #4
rajab natshahComment #6
rajab natshah✅ Released horizonaid-1.0.0-beta1