The Gallery Slider component provides an elegant way to display multiple images with navigation controls, thumbnails, and captions. This guide covers everything from basic usage to advanced customization.

File Organization for Images

Understanding how to organize your images is crucial for effective gallery management:

Hugo Site Structure
├── static/
│   └── images/
│       ├── docs/
│       │   └── gallery-slider-doc/
│       │       ├── landscape-1.jpg
│       │       ├── landscape-2.jpg
│       │       ├── portrait-1.jpg
│       │       └── thumb-landscape-1.jpg  ← Optional thumbnails
│       ├── gallery/
│       │   ├── nature/
│       │   │   ├── forest-1.jpg
│       │   │   └── forest-2.jpg
│       │   └── architecture/
│       │       ├── building-1.jpg
│       │       └── building-2.jpg
│       └── posts/
│           └── my-post/
│               ├── hero.jpg
│               └── detail.jpg
├── content/
│   └── posts/
│       └── my-gallery-post.md  ← Your content file
└── layouts/
    └── partials/
        └── gallery-slider.html  ← Component template

URL Structure

• Local images: /images/docs/gallery-slider-doc/landscape-1.jpg
• Web images: https://example.com/image.jpg
• Relative paths: Always start with / for Hugo static files

Basic Gallery Usage

Simple Image Gallery

Here’s a basic gallery with local images:

Text-to-Speech: From Browser APIs to Voice Creation

Text-to-Speech (TTS) technology has evolved from expensive specialized hardware to ubiquitous browser-native capabilities. This comprehensive guide explores how speech synthesis works, the underlying browser APIs, and practical implementation strategies across different platforms.

How Speech is Created

The Speech Synthesis Pipeline

Modern TTS systems follow a sophisticated multi-stage process to convert text into natural-sounding speech:

Text Input → Text Analysis → Phonetic Conversion → Audio Generation → Output

1. Text Analysis and Preprocessing

• Text normalization: Converting abbreviations, numbers, dates into readable format
• Sentence segmentation: Breaking text into manageable chunks
• Token classification: Identifying proper nouns, acronyms, punctuation

2. Linguistic Analysis

• Part-of-speech tagging: Determining grammatical roles
• Prosodic analysis: Planning stress, rhythm, and intonation patterns
• Phonetic transcription: Converting words to phoneme sequences

3. Audio Synthesis Methods

Concatenative Synthesis:

When customizing a theme, readability is achieved with a contrasting color palette.

This can be easily done by having a grayscaled theme with very different grades of Luminance (eg. black background, white letters (dark theme) or vice-versa (light theme)), end of the story.

But if you want to add colors, the alternatives are more nuanced and myriad.

Firstly, make sure you have a local copy of the CSS variables:

mkdir -p assets/css/global/variables/
curl -L -o assets/css/global/variables/core.css https://github.com/stradichenko/PKB-theme/raw/main/assets/css/global/variables/core.css

We suggest the following strategy: