Search Results - Standardize Search Result Templates

[marycklein]

Our project, built with Django and Wagtail CMS, includes a search page that retrieves results from various content types. These content types are defined as database models, each with a corresponding search template for displaying results. However, there are inconsistencies in formatting and labeling across these templates. For example, some templates display the content type in parentheses (e.g., event titles and news items), while others use different HTML structures.

We need to standardize these search templates to use a consistent format. Specifically, we want to adopt the structure of our magazine article search template, which uses a Bootstrap card body. This format includes a card title link around the article title and a brief teaser text from one of the article fields.

Desired Outcome

The search result templates for all content types should follow the standardized format used in the magazine article template. This involves:

• Using a Bootstrap card body structure.
• Wrapping the title in a card title link.
• Displaying a brief teaser text from the appropriate field.
• Ensuring that the title uses a semantic H2 element with the Bootstrap class to visually render as a smaller heading (H4 or H5).

Tasks

1. Identify the Search Templates: Locate the search templates for all content types including news items, topics, events, and letters.
2. Standardize the HTML Structure: Modify each template to use the Bootstrap card body format, ensuring:
   • The title is wrapped in a card title link.
   • A brief teaser text is displayed.
   • The title uses a semantic H2 element with the Bootstrap class to visually appear smaller.
3. Remove Inconsistencies in Labeling: Ensure the content type is not displayed in parentheses next to the title unless necessary for clarity.

Example of Standardized Template

<div class="card">
  <div class="card-body">
    <h2 class="card-title h3">
      <a href="{{ result.url }}">{{ result.title }}</a>
    </h2>
    <p class="card-text">{{ result.teaser }}</p>
  </div>
</div>

References

• Magazine Article Template: magazine/templates/magazine/magazine_article_summary.html
  • This template currently uses the desired format.

Notes

• Ensure that the teaser text is appropriately retrieved from the relevant field in each content type model.
• Maintain accessibility standards and ensure that the HTML structure is semantically correct.
• Test the changes thoroughly to ensure all search results are displayed correctly and consistently.

Original issue

Currently, individual search results sometimes do and sometime don't appear in the format of "page title (page type)."

For example, a given result might follow the page title with "(person)" or by "(news item)."

However, page titles are not followed by "(magazine article)" or "(event)" when that is the page type.

Is it possible to handle this consistently?