Components
Components are small template fragments containing complex markup. Live examples of components in action are available in the theme's repository GitHub Pages site.
Images can be included in content by using Markdown syntax:
For more control over the output, you can use an include file - this method is better because it uses the correct HTML markup and you can also add a caption to the image. For example the following code snippet will include an image using a <figure> HTML tag with a caption:
{% include components/image.html url="/assets/img/placeholders/banner-02.jpg" alt="The Fine Art Building" caption="The Fine Art Building - photograph © University of Leeds" %}
Where possible, use this image component as it creates more accessible HTML markup.
Images should always fill the width of the content, so should be at least 1000px wide.
Quotes can be added to text using normal markdown syntax:
> This is a quote!
For more control over the output, you can use an include file - for example:
{% include components/quote.html content="This is a regular block quote with citation and link" cite="Andrew Lansley" citeurl="/examples/" %}
the benefit here is the ability to use citations correctly.
Accordions consist of a title and content which is specified in a data struncture like this:
accordions:
- title: Accordion 1
content: |
* accordion
* content
- title: Accordion 2
...
Accordions are useful when you have a lot of page content but want to display it concisely onthe page and allow users to choose which parts they want to read.
Accordions are loaded using data in the page front matter or in data files, then referenced in the component {% include %} tag. For example, if the accordion data is specified in accordions: in the page front matter, they can be rendered on the page using:
{% include components/accordion.html accordion=page.accordions %}
Accordions can also be loaded from the file _data/accordions.yml using the following syntax:
{% include components/accordion.html accordion=site.data.accordions.ac1 %}
This would load the accordion data with the key ac1 in this file. This same technique can be used to load accordion data from any data file - here the data is being loaded from the _data/examples.yml file:
{% include components/accordion.html accordion=site.data.examples.ac2 %}
Tables can be included in pages using data from the _data directory and the table component. For example, take the following code:
{% include components/table.html tabledata=site.data.cheeses tablecaption="Cheeses" sortablecols="1,4" %}
This will look in the _data directory for a file called cheeses (see the Jekyll datafile documentation for details). It will then construct a table from the data using the table component in the theme, with the caption Cheeses and the first and fourth columns will be sortable:
