Libraries D10/D11 twig template overrides and content display types
- Kyle Davis (Unlicensed)
The libraries site currently implements multiple ways to display content. The method of display was chosen based on the needs of the content type when the site was migrated. This do features a breakdown of twig templates used on the site that are overriding displays as well as a breakdown of other display methods used across various pages and content types.
Content types display breakdown
Gutenberg
Gutenberg is a drag and drop interface adopted from Wordpress. This is useful if you need an easy visual type interface where blocks and views and can easily be added to a page and re-arranged without any code push. It made sense for the homepage and landing pages to use this so we could easily change things as requested and they were somewhat “one-off” pages (wasn’t a part of a group of content). There are two content types that use Gutenberg as the method of display: Home and Gutenberg Basic Page
Pages using Gutenberg editor for display
“Home” Content Type
Homepage
“Gutenberg Basic Page” Content Type
Locations (/locations)
OU Libraries Events (/events)
My Favorites (/my-favorites)
Resources (/resources)
Publications (/publications)
Ask Us (/ask-us)
Layout Builder
Drupal's Layout Builder allows content editors and site builders to easily and quickly create visual layouts for content display. Users can customize how content is arranged on a single page or across types of content, or even create custom landing pages with an easy-to-use drag-and-drop interface. Although it is similar to Gutenberg in the aspect of drag and drop interface, it was used on the libraries site to apply to all displays within a content type. It provided a lot of control over column based layouts and the ability to add views and blocks easily for dynamic content.
Pages/content types using layout builder for display
Note: these are not the landing pages, but the individual pages under each content type.
Locations
News
Room
Special Collections
Units
Default Drupal Display
Basic page - only displays “build your page”/paragraphs field
Impact Challenge Chapter - only displays “build your page”/paragraphs field
Service - only displays “build your page”/paragraphs field
E-resources - uses twig template override
Public pages that are displayed using views (non admin)
Databases & E-Reference Materials - https://libraries.ou.edu/eresources
Research Consultation - https://libraries.ou.edu/research-consultation
All room reservation pages - https://libraries.ou.edu/reserve_a_room
Other types
Webforms utilize their own display
Template overrides
Located here: web/themes/custom/ou_lib_subtheme/templates
Description/Page | Template name | Notes |
|---|---|---|
Home page search bar and login/hours banner | block--homesearchbannerloginandhours.html.twig | All custom code for home page search bar and the banner below with the log in and site hrs. Normal and mobile layout. |
Non-home pages login and hours banner | block--loginandsearch.html.twig | All custom code for NON-home pages banner with the log in and site hrs. |
/reserve_a_room | block--reservearoomform.html.twig | Override for initial form on page. Rest of page content is loaded by views |
Node title override | field--node--title--page.html.twig |
|
Header in paragraphs | field--paragraph--field-header.html.twig |
|
Select exposed filters in views | form-element--views-exposed-form--select.html.twig | added some classes for styling |
Text field exposed filters in views | form-element--views-exposed-form--textfield.html.twig | added some classes for styling |
All hours page. https://libraries.ou.edu/hours | node--69.html.twig | Uses Springshare widget so custom template was needed. |
Eresources individual page | node--e-resources--full.html.twig | |
node--e-resources--teaser.html.twig | Eresources teaser is what is shown in the main A-Z eresources view page | |
Page title | page-title.html.twig |
|
Main html of all pages | page.html.twig | Sets up basic order of header, collapsable menu, content, and footer block |
For view pagination | pager.html.twig |
|
Paragraphs/Build your page - Featured list | paragraph--featured-list-featured-areas-.html.twig |
|
Paragraphs/Build your page - Featured list white bg | paragraph--featured-list-white-background-f.html.twig |
|
Paragraphs/Build your page - full width image | paragraph--full-width-image-full-width-imag.html.twig |
|
Paragraphs/Build your page - full width text | paragraph--full-width-text-full-width-text-.html.twig |
|
Paragraphs/Build your page - large image left text right | paragraph--image-large-left-text-right-imag.html.twig |
|
Paragraphs/Build your page - image left text right | paragraph--image-left-text-right-image-left.html.twig |
|
Paragraphs/Build your page - image right text left | paragraph--image-right-text-left-image-righ.html.twig |
|
Paragraphs/Build your page - section header | paragraph--section-header-section-header-.html.twig |
|
Paragraphs/Build your page - two column list | paragraph--two-column-list-two-column-list-.html.twig |
|
Paragraphs/Build your page - two column text | paragraph--two-column-text-two-column-text-.html.twig |
|
Black OU header with links | region--top-header.html.twig | Added class |
Search result page | search-api-page-result.html.twig |
|
Search result page | search-api-page.html.twig |
|
Resource by subject page | taxonomy-term--resources-by-subject.html.twig | Linked from bottom links on home page. This is a collection of views handled by this template. Example: https://libraries.ou.edu/resources-subject/african-african-american-studies . Also contains code that handles the libguides widget based on the libguides ID provided in the taxonomy |
Eresources subject page | taxonomy-term--subjects.html.twig | E-resources that are filtered by a subject use this template. Example: https://libraries.ou.edu/subjects/african-african-american-studies |
User profile compact display | user--compact.html.twig |
|
User profile full display | user--full.html.twig |
|
Main e-resources A-Z page (not items in it) | views-view--e-resources--eresources.html.twig | |
Left col of subjects on home page and resources page | views-view--list-of-e-resources-subjects--block-1.html.twig |
|
Mid col of subjects on home page and resources page | views-view--list-of-e-resources-subjects-mid--block-1.html.twig |
|
Right col of subjects on home page and resources page | views-view--list-of-e-resources-subjects-right--block-1.html.twig |
|
Eresources subject page | views-view--taxonomy_term--block_1.html.twig | Another part of the override for E-resources that are filtered by a subject use this template. Example: https://libraries.ou.edu/subjects/african-african-american-studies |
Getting started databases view on subject pages | views-view-unformatted--e-resources--block_2.html.twig | Left site view on the research by subject taxonomy page - Example: https://libraries.ou.edu/resources-subject/african-african-american-studies |
Override for an individual eresource item in the A-Z main eresources page | views-view-unformatted--e-resources--eresources.html.twig | |
Override for recently added eresources view | views-view-unformatted--e-resources--recently_added_eresources.html.twig | https://libraries.ou.edu/recently-added Not sure if it is used anymore |
Subject Librarian(s) block on research by subject page | views-view-unformatted--resources_by_subject_librarians--block_1.html.twig | Right block with librarian(s) on this page Example: https://libraries.ou.edu/resources-subject/film-media-studies |
I think this is an old overwrite for the Subject list block display under the taxonomy view | views-view-unformatted--taxonomy_term--block_1.html.twig | Don’t think it is used anymore |