Give the site template a properly framed installer screenshot and a description in the Drupal CMS house style

Problem/Motivation

In the Drupal CMS installer's "Choose a site template" step, the RightUp card does not read like the templates beside it. Two separate defects.

1. The screenshot is the wrong aspect ratio, so the card crops through it. The installer renders the card image with object-fit: cover and object-position: 50% 0% in a frame of roughly 1.25:1 (measured 354x283, and 373x299 at another width). RightUp ships screenshot.webp at 632x304, which is 2.079:1.

Reading the rendered image in the picker:

const img = document.querySelector('#edit-add-ons-rightup')
  .closest('.form-item').querySelector('img');
[img.naturalWidth, img.naturalHeight]   // 632 x 304, ratio 2.079
img.getBoundingClientRect()             // 354 x 283, ratio 1.250
getComputedStyle(img).objectFit         // cover

To cover a 354x283 box the browser scales the image by 0.931, giving a rendered width of 588px inside a 354px frame, so 39.8% of the width is discarded, about 19.9% from each side.

Of the 19 templates in the picker, 12 already ship exactly the 1.25 ratio the frame wants, most of them at 500x400: Haven, Byte, Starter, Everbright, Forma, Mercury Demo, Convivial Gov, CareSphere and Convene at 500x400, with Meridian Charter 1250x1000, Healthcare 800x640 and Lupus 1000x800 also at 1.25. At 2.079 RightUp has the worst ratio of any card in the picker, wider even than Summit (1.806) and Pulse, Local and Provus EDU (1.741).

2. The description is developer-facing. It currently reads:

A media, news and magazine site template recipe for Varbase, providing a modern recipe-first approach to initializing editorial and newsroom sites.

"recipe", "recipe-first" and "initializing" are implementation details that mean nothing to somebody choosing a template during installation. Its neighbours say who the template is for and what comes with it:

• 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."
• Starter: "A simple template with just the basics. Bring your own design, and build what you need."

Steps to reproduce

1. Build Drupal CMS and require the recipe:
   

   ddev config --project-type=drupal11 --docroot=web
   ddev composer create-project drupal/cms
   ddev composer config minimum-stability dev
   rm composer.lock
   ddev composer require drupal/rightup:1.0.x-dev
   

2. Open /core/install.php, give the site a name and continue to "Choose a site template".
3. Compare the RightUp card with Starter, Haven, Byte and Everbright. The RightUp image is cropped through its content; the others show a complete page.

Proposed resolution

Replace screenshot.webp with a 500x400 image, so the card matches the frame exactly and crops nothing. The file name must stay exactly screenshot.webp: the installer builds the path by fixed name and asserts the extension, in Drupal\drupal_cms_installer\SiteTemplate::createFromRecipe(), as $recipe->path . '/screenshot.webp'.

Where the image comes from, stated plainly. It is rendered from the RightUp design file (VBN — Stylesheet, node 9652:1029, the Homepage frame at 1440x5580), cropped to the top band (0,0,1440,1152) and resampled to 500x400. It is not a capture of an installed site, and that is a deliberate choice made with the maintainer.

The consequence should be recorded rather than left implied: the shipped recipe does not yet render this layout. The card shows a masthead with a Podcasts nav item and a Newsletter button, a "Latest" ticker strip, author bylines and a three-column magazine grid. In the recipe as it stands the section dividers are unbuilt, the horizontal card still needs a slot and a prop, and the three-column grid is unbuilt Canvas composition. What a person installing RightUp today actually gets is a hero with feature cards on the home page, and the article grid on /blog.

Rewrite description in recipe.yml in the pattern the other cards use, audience first, then the ready-made pages, then the content and features:

Designed for news sites, magazines and editorial teams, this template features
ready-made home, blog, features and contact pages, with articles, categories and
tags, a media library, search and a contact form.

Every claim is checked against what the recipe actually installs:

• ready-made home, blog, features and contact pages — the Canvas pages Home, Blog, Features and Contact Us
• articles — the blog content type, 12 published articles
• categories and tags — the blog_categories and tags vocabularies from varbase_blog_base
• a media library — varbase_media_base, six media types and 59 media items
• search — drupal_cms_search, with /search returning 200
• a contact form — drupal_cms_forms and the contact_form webform, with /contact-us returning 200

"News" and "magazines" appear only as the audience. RightUp ships the blog and page content types only, so the sentence claims no news or event content type, and it claims no podcasts, newsletter, author pages or live feeds, none of which the recipe installs.

Verification

Verified in a real Drupal CMS installer, with the new image in place, on a drupal/cms build with drupal/rightup:1.0.x-dev:

[img.naturalWidth, img.naturalHeight]   // 500 x 400, ratio 1.250
img.getBoundingClientRect()             // 373 x 299, ratio 1.250
getComputedStyle(img).objectFit         // cover

The ratios match exactly, so the frame crops nothing. The card was checked in the picker beside Starter, Haven, Byte and Everbright and reads as a complete page.

The installer's "Choose a site template" step with the change applied - RightUp 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 RightUp card in the Drupal CMS installer shows a complete, uncropped preview and a description written for the person choosing a template.

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• The RightUp site template now shows a properly framed screenshot and a clearer description in the Drupal CMS installer.