Home page

The home page template allows pages to be built using different components or widgets - each one is added to the page by placing data structures in yaml front matter or in an associated data file. An example home page is available in the theme's repository GitHub Pages site

Banner Widget

Banners can contain up to 5 slides and are located at the top of the page under the main menu.

An example of the YAML needed for this component is shown below:

banners:
  - title:
    imageurl:
    imagealt:
    text:
    linkurl:
    linktext:

Data can be placed in the front matter of the page, in another datafile loaded in the page, or in a banners.yml data file. The above example shows the YAML you would use if data is being loaded from page front mattter (using the banners keyword).

If data is being loaded from a datafile, use a different keyword for each set of banners - you can store multiple banner sets in data files and use them throughout the site. To use the a banner on a page, reference it with the banner keyword in the page front matter.

For example, your data file contains:

banner1:
  - title:
    imageurl:
    ...

Then reference the banners in the front matter of the page:

banner: banner1

Content Widget

This widget has three parts, the title, lead (first sentence in slightly larger font) and content. The content part can contain markdown and HTML.

An example of the YAML needed for this component is shown below:

  - type: content
    title: Title
    lead: First sentence
    content: |
      Markdown **text** or _HTML_

      <iframe width="560" height="315" src="https://www.youtube.com/embed/NcWibP5JA_E"
      title="YouTube video player - students staying safe at the University of Leeds"
      frameborder="0" allowfullscreen></iframe>

In the above example, the content part of the widget uses the vertical bar (pipe) to allow for text to be added after it containing newlines - all text must be indented!

Featured Content Widget

This widget is similar to the Content Widget, but it also contains an image.

An example of the YAML needed for this component is shown below:

  - type: featured
    title: Title
    lead: First sentence
    image:
      title: Image
      url: /assets/img/featured-01.jpg
      caption: Dame Barbara Hepwoth
    content: |
      Featured content widgets are ideal for showcasing parts of the site.

Cards Widget

This component is used to display Calls to action in the form of up to 7 "cards" which contain an image, title and a short piece of text. The whole thing is then linked - essentially becoming a large button. Like the other content widgets, this can have a title and lead and they also have a parameter called featured which will change the design of the first card in the sequence to make it stand out more.

An example of the YAML needed for this component is shown below:

  - type: cards
    featured: false
    title: Cards Widget
    lead: Cards lead sentence
    cards:
      - title: Card 1
        link: /card1/
        imageurl: "/assets/img/card-01.jpg"
        imagealt: "A super informative description"
        content: "Card 1 lead sentence"
      - title: Card 2
        link: /card2/
        imageurl: "/assets/img/card-02.jpg"
        imagealt: "A super informative description"
        content: "Card 2 lead sentence"

Latest Posts Widget

This will display a list of your latest posts in cards with a link to the main blog index page.

The content of the cards can be adjusted by setting the parameters image and excerpt to true or false - this will determine whether to show the "featured image" for a post in the list and whether to include a short excerpt. With these parameters set to false, each card just contains a linked post title and date.

The maximum number of posts is 6, and this can be adjusted using the number parameter. Like the other content widgets, this can have a title and lead which appear above the cards. The link parameter can be used to hide the link to your main blog index page (it will be shown by default).

An example of the YAML needed for this component is shown below:

  - type: latest-posts
    number: 6
    title: Latest posts
    lead: You can display latest posts with or without images and excerpts - the maximum supported is 6.
    link: true
    image: true
    excerpt: true