View Modes Inventory - Bootstrap Ready
vmi
Provides a comprehensive set of pre-configured Bootstrap-ready view modes for content types, with automatic layout mapping using Display Suite and UI Patterns.
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.
Install
composer require 'drupal/vmi:^3.0'
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
Dependencies
Related Projects
VMI relies heavily on Display Suite for layout management. Each view mode is configured to use a DS layout that wraps a UI Patterns component, allowing field placement in designated regions (media, content).
Provides the Bootstrap 5 UI Patterns (card_impressed, card_featured, card_text, card_overlay, card_hero) that VMI layouts reference. These patterns define the actual HTML structure and CSS classes for the card components.
Used to truncate body text in card displays. VMI configurations specify trim lengths appropriate for each card size, ensuring text fits within the card layout.
Listed as a dependency for advanced field grouping capabilities within Display Suite layouts, though the default VMI configurations primarily use DS regions rather than field groups.
Hooks
| Hook | Description |
|---|---|
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
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).