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

Rajab Natshahrequested to merge
issue/rightup-3621001:issue/rightup-3621001 into 1.0.x

Issue: https://www.drupal.org/i/3621001

Two changes so the RightUp card reads like the templates beside it in the Drupal CMS installer's "Choose a site template" step.

1. screenshot.webp, 632x400 to 500x400

Before After
Image 632x304, ratio 2.079 500x400, ratio 1.250
Card frame 354x283, ratio 1.250 373x299, ratio 1.250
Result scaled by 0.931 to 588px wide in a 354px frame, 39.8% of the width discarded, about 19.9% off each side ratios match exactly, nothing cropped

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

The filename is unchanged, and must stay so: Drupal\drupal_cms_installer\SiteTemplate::createFromRecipe() builds the path as $recipe->path . '/screenshot.webp' and asserts the extension.

Where the image comes from

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. That was a deliberate choice made with the maintainer, and it should be recorded rather than left implied, because 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, while 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 gets is a hero with feature cards on the home page, and the article grid on /blog.

2. The recipe.yml description

One line changed, line 3. Before:

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

After:

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.

"recipe", "recipe-first" and "initializing" are implementation details that mean nothing to somebody choosing a template during installation. The new sentence follows the pattern the other cards use, audience first, then the ready-made pages, then the content and features.

Every claim traced to what the recipe actually installs:

Claim Backed by
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 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 card was checked in the picker beside Starter, Haven, Byte and Everbright and renders as a complete page with nothing cropped.

name: Rightup is deliberately untouched, and no casing anywhere is changed by this MR.

AI-Generated: Yes

Checkpoints:

  • File an issue
  • Addition/Change/Update/Fix
  • Testing to ensure no regression
  • Automated unit testing coverage
  • Automated functional testing coverage
  • UX/UI designer responsibilities
  • Readability
  • Accessibility
  • Performance
  • Security
  • Developer Documentation
  • User Guide Documentation
  • Reviewed by human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Release notes snippet
  • Release
Edited by Rajab Natshah

Merge request reports