Presentation template

Project presentation template is defined in the _includes/base/project.html file.

Project presentation template arranges visual identity elements like project logo, project name, project description, project action links and project resource links, all over project artistic motif. Enable the project component in your site’s home page to strengthen the visual relation between you site and project visual identity.

Project presentation template is illustrated in Project card layout.

Project presentation template can be customized using configuration files and configuration variables . You can turned on and off its elements to accommodate the project presentation in different contexts consistently.

Example

Configuration (default data distributed in _data/base/project.yml file):

---
image: centos-symbol.svg
image_class: "img-fluid mb-5"
image_style: "height: 132px;"
name: CentOS
description: Community Enterprise Operating System
actions:
  - name: Know more
    icon: fa-solid fa-arrow-right
    icon_position: end
    url: 'https://www.centos.org/'
resources:
  - name: Blog
    icon: fa-solid fa-newspaper
    url: 'https://blog.centos.org/'
  - name: Mailing Lists
    icon: fa-solid fa-envelope
    url: 'https://lists.centos.org/'

Output:

CentOS

Community Enterprise Operating System

Know more

Blog

Mailing Lists

Configuration files

Project presentation template reads configuration variables from different configuration files. The first configuration file found wins. This section describes these files and their reading order.

1. Site’s configuration file:

   <jekyll-site>/_config.yml
   

   The site’s configuration file allows you to set the with_project_data configuration variable on all site pages.

   # site.defaults - Set global default values.
   defaults:
     - scope:
         path: "" # an empty string here means all files in the project.
       values:
         with_project_data:
            name: CentOS
            description: Community Enterprise Operating System
   

   By default, the with_project_data page configuration variable is not set in _config.yml file and the project presentation template reads the site component’s data file instead.

2. Site component’s data file:

   <jekyll-site>/_data/{{ site.component_data_dirname }}/project.yml
   

   The site component’s data file is an auxiliar construction the site administrator can use to organize site data files. For example, to make custom data files available for content writers to test. By default the site.component_data_dirname variable is not set, and the site administrator needs to set it in the _config.yml file.

   When the site component’s data file doesn’t exist, or it is an empty file, the project presentation template reads the site’s data file instead.

3. Site’s data file:

   <jekyll-site>/_data/project.yml
   

   When the site data file doesn’t exist, or it is an empty file, the project presentation template reads the theme component data file instead.

4. Theme component’s data file.

   <jekyll-theme-centos>/_data/base/project.yml
   

   The theme component’s data file is available read-only at run time, when you build your site with jekyll-theme-centos container image. This file provides default values. Example:

   {"image"=>"centos-symbol.svg", "image_class"=>"img-fluid mb-5", "image_style"=>"height: 132px;", "name"=>"CentOS", "description"=>"Community Enterprise Operating System", "actions"=>[{"name"=>"Know more", "icon"=>"fa-solid fa-arrow-right", "icon_position"=>"end", "url"=>"https://www.centos.org/"}], "resources"=>[{"name"=>"Blog", "icon"=>"fa-solid fa-newspaper", "url"=>"https://blog.centos.org/"}, {"name"=>"Mailing Lists", "icon"=>"fa-solid fa-envelope", "url"=>"https://lists.centos.org/"}]}
   

Configuration variables

Project configuration variables let you to control the project presentation template visibility in the page layout, the content it presents and how it presents it. The presentation order of elements inside the project presentation template cannot be changed without chaning the project presentation template file.

Project configuration variables are described in the following table:

The following table describe the data structure both with_project_data page variable and configuration files use:

Showing at page layout level

To show project in a single page, set the with_project property in the page preamble using the structure described in the configuration variables section.

---
title: This is a page with project presentation

with_project: true
with_project_data:
  image: centos-symbol.svg
  image_class: mb-5
  name: CentOS
  name_class: display-3 fw-bold mb-1
  description: Community Enterprise Operating System
  actions:
   - name: Know more
     icon: fa-solid fa-arrow-right
     icon_position: end
     url: 'https://www.centos.org/'
  resources:
   - name: Blog
     icon: fa-solid fa-newspaper
     url: 'https://blog.centos.org/'
   - name: Mailing Lists
     icon: fa-solid fa-envelope
     url: 'https://lists.centos.org/'
---

Page content here.

Hiding at page layout level

To hide project from a single page, set the with_project property to false in the page preamble.

---
title: This is a page without project presentation

with_project: false
---

Page content here.

Showing at site configuration level

To show project in all site pages, set the with_project property in the site configuration file using the structure described in the configuration variables section.

---
defaults:
- scope:
    path: "" # an empty string here means all files in the project.
  values:
    with_project: true

Hiding at site configuration level

To hide project at site level, set the with_project configuration variable to false in the site configuration file.

---
defaults:
- scope:
    path: "" # an empty string here means all files in the project.
  values:
    with_project: false

Including at page content level

To include project in a page, do the following:

1. Add the with_project_data variable in the page front-matter section with the values you want to present:

   ---
   with_project_data:
     image: centos-symbol.svg
     image_class: mb-5
     name: CentOS
     name_class: display-3 fw-bold mb-1
     description: Community Enterprise Operating System
     actions:
       - name: Know more
         icon: fa-solid fa-arrow-right
         icon_position: end
         url: 'https://www.centos.org/'
     resources:
       - name: Blog
         icon: fa-solid fa-newspaper
         url: 'https://blog.centos.org/'
       - name: Mailing Lists
         icon: fa-solid fa-envelope
         url: 'https://lists.centos.org/'
   ---
   

   When you include project at page level, ensure with_project is set to false. Otherwise, you would end up having two copies of project, the one shown by page layout and the one shown by include.

2. Include the base/project.html presentation template passing the page.with_project_data values to project argument:

   {% include base/project.html project=page.with_project_data %}
   

Related topics