Contrib.social

Change Entity Display mode for the Varbase Blog content type to match with Varbase Components

Open on Drupal.org →
Created on 30 July 2023, over 1 year ago
Updated 10 September 2023, about 1 year ago

Problem/Motivation

Varbase Blog serves as an exemplary model for understanding how to effectively manage various elements such as Content types, View modes, Layout Libraries, Views, site section pages, categories, and tags using the comprehensive range of "assembled" Varbase Components, modules, and "Starterkit/Recipes" configs.

Proposed resolution

  • Change Entity Display modes for the Varbase Blog content type
  • Match with changes in Varbase Components over Varbase Cards

Make the transition from the inline CSS class placement method for UI patterns to using custom Card components. Additionally, enhance organization and readability by integrating Varbase Blog Cards as stories within Varbase Storybook.

Example: Use the General Cards/Teasers view modes for your site, and if necessary, you can utilize or clone the Varbase Cards Starterkit/Recipe.

  • Incorporate custom Card components when working with specific Content types like the Varbase Blog
  • This approach streamlines the development workflow, enabling smooth collaboration between Design, Storybook, Front-End development with SDC components and stories, and the mapping process in the theme. The Back-end team can also effortlessly integrate components into the site structure.
  • The Site builder gains the flexibility to associate SDC components with both UI Pattern and SDC Display, ensuring a cohesive and efficient implementation.

Field mapping with components can be managed
Example: Create a card-text-body-field component and use the component with the twig template in Vartheme BS5 suggestion for the field body.

( Building the list of components for fields can be now in projects or products ) Then later SDC Display can map them from the UI.

Directed by the product owner ( Razem → )

Keep Varbase Blog using the default Varbase Card Components.

Only listing

Options to custom:

  • Clone the custom card component, which is targeted for a selected content type, and have the custom changes for with styles(css) and scripts(js), or even with custom props and slots.
  • Switch to use the starterkit/recipes for the provided Varbase Cards from Varbase Components directly from the display mode for an entity.
  • Clone the Varbase Card component and customize it in a custom theme

Example: Impressed Card with style size of medium, Card border, Equal height, Anchoring all the card, media position to the top, and passing an extra Bootstrap ~5.3.0 classes for light background and large shadow over the used card

{% include 'varbase_components:card-impressed' with {
  style_size: 'medium',
  card_border: true,
  equal_height: true,
  anchor_all: true,
  media_position: 'top',
  utility_classes: ['bg-light', 'shadow-lg'],
  media_utility_classes: [],
  content_utility_classes: [],
  media: media,
  content: content,
} only %}

View of the Impressed Card size of medium with custom in Varbase ~10.0.0
→

View of the Impressed Card size of medium with custom in Varbase Storybook
→

Which is the equivalent of using the default Impressed Card - medium - with Read more story in storybook - but without the light background and no shadows
→

This is an option for how to use other card components to custom for a content type.

Varbase Blog will keep using the default Varbase Card Components

Saving the list of Custom Varbase Blog Card components ( Proof of concept )

Remaining tasks

  • ✅ File an issue about this project
  • ✅ Addition/Change/Update/Fix to this project
  • ✅ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support on feature change/addition
  • ➖ User Guide Documentation support on feature change/addition
  • ✅ Accessibility and Readability
  • ✅ Code review from 1 Varbase core team member
  • ✅ Full testing and approval
  • ✅ Credit contributors
  • ✅ Review with the product owner
  • ✅ Update Release Notes and Update Helper on new feature change/addition
  • ✅ Release Varbase 10.0.0-beta1 → , varbase_blog-10.0.0-alpha8 →

Varbase update type

  • ✅ No Update
  • ➖ Optional Update
  • ➖ Forced Update
  • ➖ Forced Update if Unchanged

User interface changes

Varbase Blog - Blog site section root
Blog post - Image - Default full content layout library option →

→

Blog post - Image - Edge to Edge with a Lead media image in one column for the full content layout library option
→

Blog post - Image - Edge to Edge with a Lead media image in two column for the full content layout library option
→

Blog post - Image - with a Lead media image in one column for the full content layout library option
→

Blog post - Image - with a Lead media image in two column for the full content layout library option
→

Blog post - Video with a cover image - Default full content layout library option
→

Blog post - Video with a cover image - Edge to Edge with a Lead media video in one column for the full content layout library option
→

Blog post - Video with a cover image - Edge to Edge with a Lead media video in two column for the full content layout library option
→

Blog post - Video with a cover image - with a Lead media video in one column for the full content layout library option
→

Blog post - Video with a cover image - with a Lead media video in two column for the full content layout library option
→

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • Issue #3377994 → : Changed Entity Display mode for the Varbase Blog content type to match with Varbase Components
📌 Task
Status

Fixed

Version

10.0

Component

Code

Created by

🇯🇴Jordan Rajab Natshah Jordan

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024