Taras Omelianenko

Taras Omelianenko

Software Engineer, DevOps, and SRE. Ethical hacker & Researcher.

Banner Feature Documentation

Banner Feature Documentation

Overview

The banner feature allows you to add a banner image to posts, publications, events, talks, and portfolio items by adding a banner field to the front matter.

Usage

Adding a Banner to Content

Simply add the banner field to your front matter:

---
title: "Your Content Title"
date: 2025-07-18
banner: assets/images/your-banner-image.jpg
---

The banner path is automatically resolved relative to your site’s base path. You can use:

  • Relative paths: assets/images/banner.jpg
  • Full paths: /assets/images/banner.jpg
  • External URLs: https://example.com/banner.jpg

Supported Content Types

The banner feature works with:

  • Posts (_posts/)
  • Publications (_publications/)
  • Events (_events/)
  • Talks (_talks/)
  • Portfolio items (_portfolio/)

The banner images are styled with CSS classes:

  • Full content pages: .page__banner
  • Archive listings: .archive__item-banner

You can customize banner sizes by adding CSS classes:

// Default banner (max-height: 400px)
.page__banner

// Small banner (max-height: 200px)
.page__banner--small

// Medium banner (max-height: 300px)
.page__banner--medium

// Large banner (max-height: 500px)
.page__banner--large

// Full-width banner (extends beyond content margins)
.page__banner--full-width

Example Usage

Blog Post with Banner

---
title: "My Blog Post"
date: 2025-07-18
tags: [productivity, automation]
banner: assets/posts/blog-banner.jpg
---

Portfolio Item with Banner

---
title: "My Project"
collection: portfolio
excerpt: "A great project I worked on"
banner: assets/portfolio/project-banner.jpg
---

Publication with Banner

---
title: "Research Paper"
collection: publications
venue: "Journal Name"
date: 2025-07-18
banner: assets/publications/paper-banner.jpg
---

Best Practices

  1. Image Dimensions: Use images with aspect ratios around 16:9 or 3:1 for best results
  2. File Size: Optimize images to keep file sizes reasonable (< 500KB recommended)
  3. Alt Text: The banner will use the page title as alt text automatically
  4. Responsive Design: Banners automatically adjust for different screen sizes

Troubleshooting

  • Image not showing: Check that the path is correct and the image exists
  • Banner too tall: Consider using a banner size modifier class
  • Banner not responsive: Ensure images are properly sized (avoid extremely wide images)

Technical Details

The banner feature is implemented in:

  • _layouts/single.html - Main content layout
  • _layouts/talk.html - Talk-specific layout
  • _includes/archive-single.html - Archive listing template
  • _includes/archive-single-talk.html - Talk archive template
  • _includes/archive-single-cv.html - CV archive template
  • _includes/archive-single-talk-cv.html - Talk CV archive template
  • _sass/_banner.scss - Banner styling