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

  1. Build Drupal CMS and require the recipe, then open the installer and reach the "Choose a site template" step.
  2. Compare the Educare card with Haven, Byte, Everbright, Mercury and Meridian.
  3. The Educare image is cropped through its text; the others show a complete page.

Proposed resolution

  • Replace screenshot.webp with 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 description in recipe.yml in 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:

The Drupal CMS installer site-template grid, three cards across, with Educare selected and showing a complete uncropped page preview and the shorter description

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.

Issue fork educare-3620996

Command icon 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

rajab natshah created an issue. See original summary.

rajab natshah’s picture

Issue summary: View changes
StatusFileSize
new448.18 KB
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
StatusFileSize
new719.47 KB

  • rajab natshah committed 683a0198 on 1.0.x
    task: #3620996 Frame the installer screenshot to the card ratio and...
rajab natshah’s picture

Assigned: Unassigned » josebc
Issue summary: View changes
Status: Active » Needs review
Issue tags: +educare-1.0.0-beta1

✅ Released educare-1.0.0-beta1

rajab natshah’s picture

Assigned: josebc » mohammed j. razem
rajab natshah’s picture

Assigned: mohammed j. razem » Unassigned
Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.