TWIG extensions

[]()TWIG files in PNHBtheme are mostly copies of those in Quark, with modifications.

Standard and Listing page types

two-sides outputs a header image, followed by internal pages in two columns. Pages inside a two-sides page must have the template text-item, and text items have frontmatter that specifies "side" as left or right. The template just displays all left pages on the left and then all right pages on the left. The blueprint text-item.yaml is for the admin.

Notice the line of code

   div class="column col-7 col-md-12"

The Quark theme is built with the spectre framework. Spectre uses a 12 column grid, which supports development of resresponsive websites. The code above specifies that the screen is to be divided into two columns, the left one using 7 columns of the grid and the right column the remainder.

minutes-list was designed to show a picklist of all the Minutes documents, nicely arranged with year headings. It is currently not used - rather each of the sets of Documents in the Members page are output by document-list.html.twig.

Modular page types

hero is modified from the Quark theme of the same name. The Quark template expects the to provide the name of the image in its frontmatter. But all PNHB pages except the home page display the same hero image. So I needed to place that image in a central place - user/images.

Since all pages in our website, except "come join" use a child page to display a hero image, they are necessarily modular pages.

text is a modification of text from Quark which does not leave space for an image. It is the modular equivalent of "default"

text-item is a specialised text that has frontmatter "side". It simply displays its content. Used by two-sides, which displays the "come-join" page in a 2-sided screen - testimonials on the right.

concert-videos displays a picklist of the concert videos in pnhb/movies. Each concert is represented by a directory (e.g. Christmas 2018). There are two methods of storing and displaying videos:

  1. (old method) The directory contains an mp4 file for each video in the concert. The program iterates over the files to produce a picklist for each concert.
  2. videos stored in our YouTube channel. The in the directory contains a table of pairs in and array (called performance) of items called "name". Each name is an array containing the name of the piece as it is to be displayed and the (youtube) address of the video.

document_list iterates through the collection of PDF files in the page media, and displays a pick list to the reader,

gallery displays all of the pictures inside a blog item in up to four columns, depending on the size of the reader's device.

picture-group displays picture links for all subdirectories - the pictures are the first image from the selected subdirectory. It is currently used to generate the overview pages for Conductors, Concert Bands, Ensembles. The pages inside the group, e.g. Conductors, contains detailed information and the image.

Alterations to blog

The standard QUARK blog.html.twig supplied with GRAV produces a lovely blog with large pictures in the blog list and in each of the items. PNHB blog items are not so standard - many of them do not have a lead picture to display this way. As a result, the PNHB theme includes modifications to the two display templates in the blog system: blog_list_item.html.twig that displays the teasers and blog_item.html.twig that displays the full page.

blog_list_item displays the heading and the lead image followed by a page summary. The summary is delineated by === or otherwise is cut off after a certain length.

blog_item displays the title, lead image, then the full content and finally a gallery of all remaining pictures. The images in the gallery are all expandable by click. It is possible to suppress the gallery.

There are changes to the frontmatter, namely new items: tag, lead image and link - for each blog item. Lead image specifies the teaser image if there is one. (Note that if there are spaces in the filename, then the filename must be enclosed in quotes.) Link is only used for the Summit Terrace Band because an archive item can not normally be a complex page - in this case the link points to a special page outside the blog folder. There is also a tag to define the type of archive for the "popular links" display in the sidebar.