Problem/Motivation
The VBN Stylesheet design's Search-Listing page has three parts the build does not have:
- A filter sidebar of three checkbox fieldsets beside the results.
- A result count above the list, in the form "Showing 1-10 of N".
- Horizontal result cards — a thumbnail image on the left, then a category eyebrow, title, summary and a byline with the author and date, separated by hairline rules.
Measured on a fresh install at 1440px, /search renders none of them: zero checkboxes, zero fieldsets, and no result count.
This is separate from #3622790, which is about the search query returning no results at all and has been traced upstream. Even once results appear, the page would still not match the design. The two should not be confused: #3622790 is why the list is empty, this issue is why the page is shaped wrong.
Steps to reproduce
- Install the RightUp site template on Varbase 11 from 1.0.x-dev.
- Open
/searchin a 1440px viewport and run any search. - Compare against the Search-Listing page in the VBN Stylesheet design.
Observed: no filter sidebar (zero checkboxes, zero fieldsets), no "Showing 1-10 of N" count, and rows rendered as the default teaser rather than the design's horizontal card.
Proposed resolution
- The filter sidebar is a facets problem. Neither
facetsnorsearch_api_autocompleteis present in the codebase today, so this needs new dependencies rather than configuration. - The result count is a Views header setting on the search view.
- The horizontal result card needs a
search_resultview mode and a view display per content type, so a result renders as the design's card rather than as a default teaser. The card itself does not exist yet. On 1.0.x,horizontal-text-icon-carddeclares onlyicon_color,background_color,corner_style,padded,content_vertical_alignment,stretched_link,link_urlandlink_target, plus a singlecontentslot. It renders a fixed circular play icon beside the content and nothing else: there is no media region of any kind. The design’s search result card needs a leading thumbnail image, so that capability still has to be added, either by extendinghorizontal-text-icon-cardwith a media region or by adding a separate component. Which of the two is a maintainer’s call.
Two things worth knowing before picking this up. media_position does exist in the theme on 1.0.x, but only on card-impressed and card-hero, neither of which is the search result card, so a quick look at the component folder can suggest the capability is already there. And the earlier attempt to add exactly this to horizontal-text-icon-card (the end_variant and media_position props in merge request !10 on #3621523, Vartheme BS5 RightUp) was closed as won’t fix and never landed. Read why it was rejected before proposing the same shape again.
This pattern — a dedicated search_result view display per content type, plus facets and search autocomplete as part of a search feature — is how the Uber Publisher module set solved the same problem, and is worth following rather than reinventing.
Implemented resolution
What the merge request builds. /search becomes a Drupal Canvas page carrying the keyword bar, the results, and a filter rail of Category, Content Type and Date Published. Results render through a new search_result node view mode whose display is built in Canvas, so a row carries the image, category eyebrow, title, summary and byline instead of a bare title and snippet.
The row reuses an existing component; nothing new is added to the theme. The rows are built from the theme's existing Featured Card (sdc.vartheme_bs5_rightup.card-featured), which is already a horizontal image-and-text row — media_position: start | end, media_image, ratio, fit, stretched_link and a content slot, with no icon. At columns_*_size: 04_08 it renders the image at 261x196 against the design's 260x195: one pixel, from rounding, with no hard-coded width. Impressed Card is media_position: top | bottom only, and Horizontal Text Icon Card forces a play icon, which is why #3621523 was closed won't fix for trying to extend it.
The one deliberate deviation from the design. Category and Content Type are Facets (this adds drupal/facets ^3.0). Date Published is a Views grouped exposed filter — Past 24 Hours, Past Week, Past Month, Past Year — because Facets cannot express those: its date processor always renders an actual date ("2026", "July 2026"), never a relative window, and the facets_range_widget submodule is sliders only. It is single-select because core's Date filter reads group_info['type'], which only exists for a single-select group; a multi-select group hands it an array of keys and emits PHP warnings on every request. The design draws checkboxes, but the windows are cumulative, so single-select is also the correct semantics.
That filter is exposed on its own block display, because one form cannot sit in two columns. Each form carries both the keyword field and the date group and hides the half it does not own — the hidden input still submits, which is what carries the keyword through a date change and the date through a new search.
Fixed along the way:
- Search barely matched articles.
search_indexis the view mode Search API renders into its index, and RightUp's carried almost no text, so an article was indexed as little more than its title. It now ships the body and description fields, matching Varbase Starter, Educare and Horizon Aid, and the index gains the content type and the authored date that the facet and the filter need. This is a matching-quality fix, and it is not the upstream defect tracked in #3622790, where the view returns nothing at all for any term. The two are separate and should not be conflated. - Results are restricted to content, so a Canvas page no longer appears as a result rendered in full.
- Anonymous visitors get
view any termANDview any term name. Canvas needs both to resolve a term reference; without the second it returns NULL and every result row fails to render. - The header takes its form from a
header_searchblock display, because thepagedisplay is disabled — its path would collide with the Canvas page. - The header search popover no longer carries the Date Published group. Every Views display inherits the default display's filters, so the group leaked into the header panel as well as the rail.
- The column values are quoted. YAML 1.1 reads
04_08as a digit-separated number, so it arrives as"0408"and fails enum validation at render time.
Screenshots
Captured anonymously on a fresh Drupal CMS build and install of the packaged recipe.
The results page — keyword bar, result rows and the filter rail:

Scrolled, so Category, Content Type and Date Published are visible together:

At 400px, where the image stacks above the text:

Relationship to the theme. The page's own furniture — the search field, the row rhythm and the filter rail alignment — is styled in vartheme_bs5_rightup#3623379. That should merge first so this page lands styled, but it is not a blocker: without it a fresh install renders the page unstyled rather than failing, because no component is missing.
Verified on a fresh Drupal CMS build and install of the packaged recipe, not only in place: the install succeeded, 55 items indexed, the results page renders 10 rows and 42 facet items with zero errors, Date Published filters 16 results down to 14, the Content Type facet filters 16 down to 12, and the header panel carries the keyword field only.
Known and not yet done: the filter tabs (All / Architecture / Fashion / Arts / Culture), the Sort by select, the breadcrumb, pagination styling, the design's exact 864/144/304 rail geometry, an aria-label on the row's stretched link (it currently announces the whole row text instead of the title), and keyword highlighting inside result titles.
Remaining tasks
- Add the card capability itself: extend
horizontal-text-icon-cardwith a media region, or add a separate component that renders a leading thumbnail. This is not configuration only. - Add the
search_resultview mode and a display per content type. - Point the search view rows at that view mode.
- Add the result count to the view header.
- Evaluate adding facets for the filter sidebar.
- Evaluate search autocomplete for the header search box.
- ✅ File an issue
- ✅ Addition/Change/Update/Fix
- ✅ Testing to ensure no regression — verified on a fresh Drupal CMS build and install, as recorded above.
- ➖ Automated unit/functional testing coverage
- ➖ Developer Documentation support
- ➖ User Guide Documentation support
- ❌ UX/UI designer responsibilities
- ❌ Accessibility and Readability — the result card's stretched link has no
aria-label, so it announces the whole row text instead of the title. - ❌ 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 search page gains a filter sidebar, a result count and horizontal result cards.
API changes
- Adds
drupal/facets ^3.0as a dependency of this site template. - No new theme component: the rows reuse the existing Featured Card (
sdc.vartheme_bs5_rightup.card-featured).
Data model changes
- A new
search_resultview mode and per-content-type view displays.
Release notes snippet
- The search results page is now built from the design: a keyword bar, horizontal result cards rendered through a new
search_resultview mode, and a filter rail of Category, Content Type and Date Published. Search matching is much improved, because thesearch_indexview mode now carries the body and description rather than little more than the title.
AI-Generated: Yes
| Comment | File | Size | Author |
|---|---|---|---|
| #6 | shot-search-mobile.png | 125.11 KB | rajab natshah |
| #6 | shot-search-rail.png | 270 KB | rajab natshah |
| #6 | shot-search-results.png | 212 KB | rajab natshah |
Issue fork rightup-3622804
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
Comment #2
rajab natshahComment #3
rajab natshahComment #4
rajab natshahComment #6
rajab natshahComment #7
rajab natshahComment #8
rajab natshahComment #10
rajab natshahReleased in rightup 1.0.0-alpha1.
Comment #12
rajab natshah