Problem/Motivation

The design (the VBN stylesheet in Figma: the Article frame and the Podcast Node frame) lays both node pages out in two columns. The content templates that ship render a single stacked column instead.

  • Article page today: breadcrumb, then a full-width H1, the date, a full-bleed image, and the body with a vertical share rail. The design instead puts the headline, standfirst, date, byline and a horizontal share row in a left column beside the picture, then runs the story next to an "Editor's Picks" rail, and closes with a subscribe band and an "On Display" row of the latest stories. The standfirst (field_description), the byline and the picks rail are absent altogether.
  • Podcast episode page today: breadcrumb, H1, date, a 16:9 image, a vertical share rail, the body, and the audio player last. The design puts the title and the player on a black banner beside square cover art, then the date, duration, share row, a "Details" section and an "Audio Transcript" section below.

Steps to reproduce

  1. Install RightUp.
  2. Open any article, for example /news/architecture-unease-how-brutalism-became-beautiful-again.
  3. Open any episode, for example /podcast/studio-wont-use-mood-board.
  4. Compare both with the Article frame and the Podcast Node frame in the design.

Proposed resolution

Recompose both Canvas content templates from the theme's own components, binding the same entity fields the templates already use.

  • Article (canvas.content_template.node.news.full, which comes from varbase_news_base, so RightUp sets it through a simpleConfigUpdate config action): a 50-50 lede section carrying the breadcrumb in its header slot, the H1, the standfirst from field_description, the date, a rule, the byline bound to the node author, and a horizontal share row on the left, with the featured image on the right; then a 67-33 section with the body beside an "Editor's Picks" divider and the News Featured view block; then the subscribe band with the Newsletter Subscribe webform; then an "On Display" section with the News Latest view block.
  • Podcast (canvas.content_template.node.podcast.full, shipped by RightUp itself): a black banner section (background_color bg-primary, text_color text-white, edge to edge) with the breadcrumb, the H1 and the remote audio player on the left and the square cover art on the right; then a 67-33 section with the date, duration, share row, a rule, a "Details" heading with field_description, and an "Audio Transcript" heading with field_content; then the same subscribe band.
  • Every colour comes from the Bootstrap 5.3 theme variables (bg-primary, bg-accent-subtle, text-white), never a hex value.

Verification

Checked on fresh installs of 1.0.x, Drupal CMS 2.1.4, Drupal core 11.4.6.

  • Fresh drush si of the recipe: exit 0, 0 watchdog entries at severity <= 3, and /, /architecture, /podcasts, the article and the episode all return HTTP 200.
  • The article page renders the standfirst, the byline ("Chiara Romano"), the Editor's Picks rail, the subscribe form and the On Display row.
  • The episode page renders the black banner, Details and Audio Transcript.

Remaining tasks

  • ✅ File an issue
  • ❌ Addition/Change/Update/Fix
    • ❌ Add a podcast view, so the episode page can carry the design's "More Episodes" rail and the show page can list episodes from data rather than static cards.
    • ❌ Exclude the current node from the article page's Editor's Picks rail; it currently lists the article being read.
    • ❌ The article breadcrumb reads Home > News where the design reads Home > the article's category.
    • ❌ Ship audio URLs and real transcripts with the demo episodes: field_audio_url is empty, so the player has nothing to play, and field_content repeats the summary.
    • ❌ Check the episode banner breadcrumb for contrast on the black background.
  • ❌ 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 article and podcast episode pages change layout as described above.

API changes

  • None.

Data model changes

  • None.

Release notes snippet

  • The article and podcast episode pages now follow the design: a two-column lede with the byline and share beside the picture, an editor's picks rail next to the story, and a black banner carrying the episode player.

Issue fork rightup-3622688

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 committed 37f7735c on 1.0.x
    feat: #3622688 Lay out the article and episode pages the way the design...

  • rajab natshah committed f5d3e47c on 1.0.x
    feat: #3622688 Ship real audio and matching transcripts for the demo...
rajab natshah’s picture

Status: Active » 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.

rajab natshah’s picture

Issue tags: +rightup-1.0.0-alpha1

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.