Skip to content

Includes

Jump to bottom
Sam Osborne edited this page Mar 22, 2021 · 4 revisions

A number of features of the website are rendered through Jekyll Includes. The header, footer and table of contents are done through this, but not included here as they're for templates. We'll focus on ones that act as shortcodes - snippets to render complex elements.

The Code

You will typically use an include as follows: {% include <include name> argument1='hello' argument2='goodbye' %} The include name is given in brackets next to each heading below, and each section has at least one example. Arguments in bold are required.

Contents List of Includes

Buttons (button.html)

Display a button to link to something.

Arguments

  • link: The link to your page. Either starting with / for pages on the site, or with https:// for other sites.
  • text: The text for the button to display
  • color: The button colour. Any of the brand colours eg purple, purple-dark, stuff-crimson.
  • filetype: Usually used in resource cards. This is expecting a Font Awesome Icon that begins with file-, so to show file-pdf, you'd set filetype to pdf (though we also allow folder as the one and only exception to this).
  • wide: Wide buttons will take up 100% of the width of the parent element.
  • nogap (default: false): Set to true to remove the bottom margin (again, used in resource cards).

Example

{% include button.html text="Register for the Alumni Network" wide=true link="register/" %}

Committee List (committee.html)

This include will, by default, show all of the committee with their headshots. You can add arguments to narrow this or change the format.

Arguments

  • role: Pick a role, effectively pick an email (eg: csm).
  • alias: If you want to use the alias for someone, use this. You still need the role (eg: role="fringe" alias="stuff")
  • group: Pick a group of people as per their groups in committee.yml. Current groups are coordinators, backstage and publicity. You'll then just list those people.
  • format: Set this to inline to get an inline text list. Omit to get a headshot grid.

Examples

{% include committee.html role="fringe" alias="stuff" format="inline" %}

{% include committee.html group="coordinator" format="list" %}

{% include committee.html %}

Dates (date.html)

Things happen, deadlines come up, and you don't want to have to trawl through and find every instance of a date to amend it every few months when a new season comes round. So, just update the date in the datafile and job done. This shortcode include allows you to render those dates.

Arguments

There's only one (required) argument: date This should match the alias field for the date. However, it does do wildcard matching, so any date that contains this string will be included.

If it only matches one date, it will appear inline. Otherwise, you'll get a bullet list.

Example

{% include date.html date="stuff" %}

{% include date.html date="ih-slot-" %}

External Links (external-link.html)

If you want to link to an external website, this shortcode include will pop a little indicator afterwards to show users that it's going to an external website.

Arguments

Again, just the one (required) argument here. Just link to be your link.

Example

{% include external-link.html link="http://history.newtheatre.org.uk" %}

Resource Cards (resource_card.html)

Top tip: The resource buttons are actually just resource cards without a description, so don't get caught out!

These includes render a card to offer resources. It also includes button.html within it by magic.

Arguments

  • group: Every show resource needs to be part of a group. This is how the site knows which resource(s) to render.
  • columns: Integer from 1-3 for the number of columns to split the cards into. That's it! Because individual resources don't get rendered, the include knows what to do with the rest based on the information in show-resources.yml.

Examples

{% include resource_card.html group="proposing-team" columns=2 %}

Clone this wiki locally