Problem/Motivation
In the Drupal CMS installer's "Choose a site template" step, the Educare card does not read like the templates beside it.
The screenshot is the wrong aspect ratio, so the card crops the text off. The installer renders the card image with object-fit: cover in a frame of roughly 1.25:1 (measured 360x288, and 373x299 at another width). Educare ships screenshot.webp at 632x304, which is 2.08:1, so about a third of the width is discarded from each side. What is lost is exactly the content:
- the Educare logo, cut off entirely
- the headline, sliced down the left edge - it renders as "be Your / re And Open / al / ortunities"
- the intro copy, sliced the same way
- the testimonial panel on the right, cut vertically through the middle
Every other template ships 500x400 and fills the card with nothing cut: haven 500x400, byte 500x400, drupal_cms_starter 500x400. The installer's own default-screenshot.webp is 632x363.
The description is developer-facing, not audience-facing. It currently reads:
A site template recipe for education websites, built the Varbase recipe-first way.while its neighbours describe who the template is for and what it comes with:
- Haven: "Designed for non-profit sites, this template features a bright, warm design that can be adapted for many use cases. It comes pre-configured with blog, projects and people profiles, as well as newsletter signup, donation add-ons and more."
- Byte: "Designed for a SaaS product website, this template includes landing pages, a blog, newsletter sign up and other features."
- Everbright: "Designed for a portfolio site, this template features a sharp and striking black-and-white design, along with articles and a project portfolio."
"Recipe-first" is an implementation detail that means nothing to somebody choosing a template during installation.
Steps to reproduce
- Build Drupal CMS and require the recipe, then open the installer and reach the "Choose a site template" step.
- Compare the Educare card with Haven, Byte, Everbright, Mercury and Meridian.
- The Educare image is cropped through its text; the others show a complete page.
Proposed resolution
- Replace
screenshot.webpwith a 500x400 capture of the installed front page, framed so the logo, the full headline, the intro and the section below it all survive the card crop - the same hero-plus-section composition Haven uses. At 1.25:1 the card crops nothing. - Rewrite
descriptioninrecipe.ymlin the house pattern:
Designed for schools, universities and colleges, this template features ready-made pages for programs, admissions and student life, with program, news and event content, search and a contact form.Every claim in it is checked against what the recipe actually installs.
The installer reads the image from the recipe root by fixed name and extension - Drupal\drupal_cms_installer\SiteTemplate::createFromRecipe() builds the path as $recipe->path . '/screenshot.webp' and asserts the .webp extension - so the file name must stay exactly screenshot.webp.
The installer's "Choose a site template" step with the change applied - Educare selected, centre of the grid, next to Starter and Everbright:

Remaining tasks
- ✅ File an issue
- ✅ Addition/Change/Update/Fix
- ✅ Testing to ensure no regression
- ➖ Automated unit/functional testing coverage
- ➖ Developer Documentation support
- ➖ User Guide Documentation support
- ❌ UX/UI designer responsibilities
- ➖ Accessibility and Readability
- ❌ Reviewed by a human
- ❌ Code review by maintainers
- ❌ Full testing and approval
- ❌ Credit contributors
- ❌ Review with the product owner
- ✅ Update Release Notes
- ✅ Release
User interface changes
- The Educare card in the Drupal CMS installer shows a complete, uncropped page preview and a description written for the person choosing a template.
API changes
- N/A
Data model changes
- N/A
Release notes snippet
- The Educare site template now shows a properly framed screenshot and a clearer description in the Drupal CMS installer.
| Comment | File | Size | Author |
|---|---|---|---|
| #4 | educare-installer-after.png | 719.47 KB | rajab natshah |
| #2 | educare-card-zoom.png | 448.18 KB | rajab natshah |
Issue fork educare-3620996
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 #2
rajab natshahComment #3
rajab natshahComment #4
rajab natshahComment #7
rajab natshah✅ Released educare-1.0.0-beta1
Comment #8
rajab natshahComment #9
rajab natshah