Bento Showcase

Bento Showcase is a Views style that arranges results in a bento grid: a mosaic of tiles in different sizes, where every tile shows its image in the image style made for its shape. Optional filter tabs switch between categories without reloading the page.

A standard Views grid gives every result the same tile and the same image style. A bento grid mixes a 2×2 hero, tall and wide cards and small tiles, and each of those needs an image of different proportions. Bento Showcase decides which tile each result takes, renders its image in the matching style, and keeps the grid free of gaps whatever the number of results.

Features

• Ten layouts for editorial, product and spotlight pages, holding four to nine items, and an adaptive layout that chooses the grid from the number of items and the shapes of their images.
• An image style per tile shape: 1×1, 2×1, 1×2 and 2×2 tiles each have their own style. The four shipped styles use the Image Scale and Fill Background effect, so every image stays whole and the space around it is filled from a blurred copy.
• No gaps: a tab with fewer items than the layout holds is rearranged. One item becomes a full-width banner, two become a pair, three become a hero with two companions, and four or more use a five-column template chosen by image shape.
• Filter tabs by category, taken from a view field or from the first term in Tags, Category, Topic or Section, with an optional Featured tab for content that is sticky, promoted or marked by a yes/no field.
• A stable page: the server works out every tab's layout in advance, and the grid reserves the height of its tallest tab, so switching tabs does not move the rest of the page.
• Fields or rendered content: cards built from view fields, or entities rendered in a view mode. The module ships a Bento Card view mode and a card component that themes can use in their templates.
• Accessibility: the tabs follow the WAI-ARIA tabs pattern, with arrow keys, Home and End; the number of items shown is announced; each card is a single link whose name starts with its title; truncated titles show in full on hover and on keyboard focus; forced colors and reduced motion are supported.
• Access and language: category labels, images and media are taken only from content the visitor may view, in the current language, and the output carries the matching cache metadata.
• Extensible: modules and themes add layouts in YAML or as PHP plugins. A layout that would leave a gap is rejected, and the reason is logged.

Layouts

• Adaptive: up to nine items in five columns, arranged by image shape.
• Editorial mosaic: nine items; a 2×2 hero, two tall cards, a wide card and five tiles.
• Editorial compact: six items; a 2×2 hero, a wide card and four tiles.
• Magazine spread: six items; a 4×2 lead card with wide cards beside and below it.
• Product showcase: five items; a 2×2 hero beside four tiles.
• Product with feature card: four items; a 2×2 hero, a wide feature card and two tiles.
• Centered product: five items; a 2×2 hero between two pairs of tiles.
• Product extended: seven items; a 2×2 hero, two wide cards and four tiles.
• Spotlight: four items; a full-width banner over three 2×2 cards.
• Two heroes: six items; two 2×2 heroes over a row of four tiles.

Requirements

• Drupal 11.2 or later.
• The core Views and Image modules.
• Image Scale and Fill Background 1.1.0 or later, which Composer installs with this module. It provides the effect behind the shipped image styles.
• The GD image toolkit, Drupal's default, for the shipped image styles.

Installation

composer require drupal/bento_showcase
drush en bento_showcase

Installing the module creates four image styles, bento_sml, bento_big, bento_tall and bento_wide, and a Bento Card view mode for content. Uninstalling removes them.

Post-Installation

Edit a view of content or media and set its Format to Bento Showcase. Show fields, with at least a title and an image or media field, or show content in a view mode. The style settings are grouped:

• Layout: the layout, whether to show only as many items as it holds or every result, the width, and how rows are sized.
• Content: the fields for the image, title, category, featured flag, link and date.
• Filter tabs: a tab per category, a Featured tab, hiding tabs with too few items, the tab shown first, and item counts.
• Card appearance: the text background, title size and line limit, the full title on hover and focus, the heading level, corners, the category badge and the date.
• Images: the image style for each tile shape.

Image styles

Each tile shape has its own image style, set under Images in the view. The shipped styles use the Scale and fill background effect from Image Scale and Fill Background: the whole image is kept, the rest of the tile is filled with a blurred copy, and transparent logos get a light or dark fill, so report covers, logos and images with text show in full in every tile. Any image style can replace them, for example a core Scale and crop style for edge-to-edge photographs, or a Focal Point style for editor-chosen crops. The effect needs the GD image toolkit; on a site using another toolkit, the status report shows a warning.

Theming and extending

Themes restyle the grid through CSS custom properties on .bento-showcase, or replace the markup with their own single directory component or Views template. Modules and themes add layouts with a MODULE_OR_THEME.bento_layouts.yml file or a PHP class with the #[BentoLayout] attribute. The included Bento Showcase examples submodule has a working layout of each kind and a view mode template that uses the card component.