View Modes Inventory - Bootstrap Ready
Provides a comprehensive set of pre-configured Bootstrap-ready view modes for content types, with automatic layout mapping using Display Suite and UI Patterns.
vmi
Install
composer require 'drupal/vmi:^3.0'
Overview
View Modes Inventory (VMI) is a Drupal module that provides a standardized collection of 17 Bootstrap-ready view modes designed for displaying content as cards. The module automatically installs these view modes for node entities and provides configuration templates that can be applied to any content type.
When a site administrator enables one of the VMI view modes for a content type through the entity display settings, the module automatically applies a pre-configured Display Suite layout using UI Patterns from the Varbase Components library. This automation significantly reduces the time needed to set up consistent card-based content displays across a website.
The module supports four distinct card layout styles: Impressed cards (media above content), Featured cards (side-by-side media and content with responsive column layouts), Overlay cards (text overlaid on media), Text cards (content-only without media), and Hero cards (full-width overlay style). Each style is available in multiple sizes (xsmall, small, medium, large, xlarge) to accommodate various design requirements.
Features
- Provides 17 pre-configured entity view modes for node content organized into 5 card styles: Impressed (5 sizes), Featured (5 sizes), Text (3 sizes), Overlay (3 sizes), and Hero (1 size)
- Automatic layout mapping when view modes are enabled - no manual Display Suite configuration required
- Uses UI Patterns from Varbase Components for Bootstrap 5 compatible card layouts (card_impressed, card_featured, card_text, card_overlay, card_hero)
- Smart field detection that automatically filters configuration based on existing fields (field_image, field_video, field_media, body)
- Configuration templates included for customizing and extending to new content types
- Integration with Smart Trim module for automatic text truncation in card bodies
- Display Suite field templates for proper node title rendering with links
- Responsive column configurations for Featured cards supporting Bootstrap's grid system
Use Cases
Creating a blog listing with card-based teasers
When building a blog section, enable the 'Impressed card - medium' view mode for your Article content type. This automatically configures a card layout with the featured image at the top, followed by the title and a trimmed body excerpt. Use this view mode in a Views listing to create a consistent grid of article cards.
Building a hero section for featured content
For a homepage hero section featuring prominent content, enable the 'Hero card' view mode. This creates a full-width card with the media as a background and content overlaid. The configuration includes proper aspect ratios (21:9) and positioning for impactful hero displays.
Creating sidebar content teasers
For sidebar widgets showing related content, use the 'Text card - small' or 'Featured card - xsmall' view modes. These compact formats display minimal information (title and short excerpt) suitable for narrow column layouts without media.
Implementing a magazine-style layout
Combine multiple VMI view modes in a single page layout: use 'Hero card' for the lead story, 'Featured card - large' for secondary featured items with side-by-side media, 'Impressed card - medium' for a grid of standard articles, and 'Overlay card - medium' for visually prominent category features.
Extending VMI to custom content types
To apply VMI configurations to a new custom content type, copy the configuration templates from src/assets/config_templates/CONTENT_TYPE_NAME/ to your custom module's config/install/ directory, then replace all instances of 'CONTENT_TYPE_NAME' with your actual content type machine name in both filenames and file contents.
Tips
- Use the Featured card view modes when you need side-by-side media and content layouts with responsive column breakpoints
- Overlay cards work best with images that have sufficient contrast for overlaid text readability
- Text cards are ideal for listings where media isn't available or not needed, such as search results or simple content lists
- The module automatically filters out field configurations for fields that don't exist on your content type, so you don't need to worry about removing unused field references
- When customizing configurations, copy templates to your own module rather than modifying the VMI source files to preserve upgradeability
- Consider the content hierarchy when choosing card sizes - use larger cards (xlarge, large) for featured content and smaller sizes for supporting content
Technical Details
Hooks 2
hook_help
Provides help text for the module's help page describing the View Modes Inventory functionality.
hook_form_entity_view_display_edit_form_alter
Alters the entity view display edit form to add a submit handler that automatically applies VMI layout configurations when view modes are enabled.
Troubleshooting 4
Ensure your content type has the required fields (title, and optionally body, field_image, field_video, or field_media). Clear the Drupal cache after enabling view modes. Verify that the default theme supports the Varbase Components UI Patterns.
Verify that your theme is Bootstrap-based and includes the necessary CSS for Varbase Components card patterns. Check that the theme name matches what's expected in the layout configuration (DEFAULT_ACTIVE_THEME placeholder should resolve to your active theme).
Ensure your content type has a media reference field named exactly 'field_image', 'field_video', or 'field_media'. These are the only field names the module automatically supports. Also verify that the appropriate media view modes (media_16_09, media_21_09, media_video_16_09, media_video_21_09) are configured in your media types.
The Smart Trim module handles text truncation. Check that Smart Trim is properly installed and configured. Default trim length varies by card size (typically 30-300 words depending on the view mode).