Documentation

This page describes the jekyll-theme-centos-sponsors component and how you can use it in your sites.

Concepts

The sponsors presentation cases

The sponsors presentation cases refer to specific ways of showing sponsors information in your pages. Currently, you can display sponsors information using any of the following presentation cases:

The sponsors logo image size

The preferable size for sponsors logo image is 242x60 pixels. This relation makes shows the image with the exact same proportions in all the sponsors presentation cases. On the other hand, when the sponsor logo image size is other than 242x60 pixels, the image may look expanded or stretched because the sponsors presentation cases resize the sponsors logo image to meet their visualization needs.

fig-the-sponsors-logo-image-size
Fig. The sponsors logo image size

The sponsors presentation cases resize the sponsors logo image using the following criteria:

Case Resize behaviour
Carousel Forces image height to be 60 pixels and resizes image width to keep the image ratio. Due the limited horizontal space in small viewpoints, the sponsor logo image may be seen cut, when its width is larger than 492 pixels.
Cards Forces image width to be 242 pixels and resizes image height to keep the image ratio.

The sponsors logo image format

The preferred format for sponsors logo image is PNG. Other image formats are also accepted, as long as modern modern web browsers support them.

The sponsors carousel presents the sponsors logo images in a static rotative near a thanksgiving message and a distintive title.

The sponsors carousel data file is src/_data/sponsors/carousel.yml. It is written in YAML format and provides the information required by sponsors presentation cases.

The sponsors carousel data file is where you configure the following sponsor information:

---
title: Sponsors
icon: "fa-solid fa-hand-holding-heart"
message: |
  CentOS would not be possible without the support of our sponsors. We would
  like to thank the following product/service for being a CentOS sponsor. If
  you value our work, please consider
  <a href="https://www.centos.org/sponsors">becoming a sponsor!</a>
Parameter Description
title Title introducing the thanksgiving message.
icon Icon near the title. Here, you can use any free icon supported by fontawesome.
message The thanksgiving message.
---
members:
  - name: sponsor-logo-1
    country: usa
    image: sponsor-logo-1.png
    url: "#"
Parameter Description
name The sponsor name.
country The sponsor country.
image The sponsor image. The filename with extension (e.g., filename.png) inside the src/assets/img/sponsors directory.
url The sponsor url. This is the link the sponsor image will link to.
is_active Whether the member entry is active (default) or not. To disable a member entry, set this parameter to false. You can enable it again setting this value to true or removing the parameter entirely from the member entry.

The sponsors cards

The sponsors cards presents the sponsors logo images in a matrix.

fig-the-sponsors-cards
Fig. The sponsors cards

Use sponsors cards when you want to present all the sponsors information in a single page.

Tasks

Adding the sponsors logo image

To add the sponsors logo image, do the following:

  1. Create the sponsors image directory at src/assets/img/sponsors/, in case it does not exist.
  2. Copy the sponsor logo image into the sponsors image directory.
  3. Create the sponsors carousel data file at src/_data/sponsors/carousel.yml, in case it does not exist.
  4. Edit the sponsors carousel data file and add the sponsor entry into the members list. Each sponsor entry must meet the sponsors carousel members specification.

Adding the sponsors caroursel

To add the sponsors carousel in your pages, add the following:

{% include sponsors/carousel.html id="sponsorsCarousel" %}

Adding the sponsors cards

To add the sponsors cards in your pages, add the following:

{% include sponsors/cards.html id="sponsorsCard" %}

References