Tech & Sec

Style Guide - Media & Shortcodes

• 5 min read • 994 words • guide documentation
Complete guide to all available media embeds and shortcodes on this site

This page demonstrates all available media embeds and shortcodes available on this cybersecurity blog.

Photo Galleries

Features:

  • Click any image to open lightbox
  • Use arrow keys or navigation buttons
  • Click share button to share on social media
  • Filter by category tags

Audio Support

Local MP3 File

Penetration Test Recording
Audio recording from a recent engagement walkthrough

Usage:

{{< audio src="/audio/file.mp3" title="Audio Title" caption="Audio description" >}}

SoundCloud Embeds

Example SoundCloud Track

Cybersecurity Podcast Episode 1
Discussion on the latest vulnerabilities and security trends

Usage:

{{< soundcloud
    url="https://soundcloud.com/user/track-name"
    height="166"
    title="Track Title"
    caption="Track description"
>}}

How to get the URL:

  1. Go to your SoundCloud track
  2. Copy the full URL (e.g., https://soundcloud.com/username/track-name)
  3. Paste it in the url parameter

Spotify Embeds

Spotify Track

Background Music
Music for focused pentesting sessions

Spotify Playlist

Hacking Playlist
The ultimate cybersecurity playlist for late-night hacking

Usage:

{{< spotify
    url="https://open.spotify.com/embed/track/TRACK_ID"
    type="track"
    height="152"
    title="Song Title"
    caption="Song description"
>}}

How to get the embed URL:

  1. Go to your Spotify track/playlist/album
  2. Click the three dots (…) > Share > Embed track
  3. Copy the URL from the iframe src (e.g., https://open.spotify.com/embed/track/...)
  4. Use types: track, playlist, album, or episode

YouTube Videos

YouTube Embed

CTF Walkthrough - HackTheBox
Complete walkthrough of a HackTheBox machine from enumeration to root

Usage:

{{< video
    src="VIDEO_ID"
    type="youtube"
    title="Video Title"
    caption="Video description"
>}}

How to get YouTube Video ID:

  • From URL: https://www.youtube.com/watch?v=dQw4w9WgXcQ
  • Video ID is: dQw4w9WgXcQ

Vimeo Videos

Vimeo Embed

Advanced Web Application Testing
Deep dive into modern web application penetration testing techniques

Usage:

{{< video
    src="VIDEO_ID"
    type="vimeo"
    title="Video Title"
    caption="Video description"
>}}

How to get Vimeo Video ID:

  • From URL: https://vimeo.com/123456789
  • Video ID is: 123456789

Quick Reference

{{< gallery
    images="img1.png,img2.png,img3.png"
    captions="Caption 1|Caption 2|Caption 3"
    tags="recon,exploit,post-exploit"
    filterable="true"
    columns="3"
    id="unique-id"
>}}

Audio Shortcode

{{< audio
    src="/audio/file.mp3"
    title="Audio Title"
    caption="Description"
>}}

SoundCloud Shortcode

{{< soundcloud
    url="https://soundcloud.com/user/track"
    height="166"
    title="Title"
    caption="Description"
>}}

Spotify Shortcode

{{< spotify
    url="https://open.spotify.com/embed/track/ID"
    type="track"
    height="152"
    title="Title"
    caption="Description"
>}}

Video Shortcode (YouTube/Vimeo)

{{< video
    src="VIDEO_ID"
    type="youtube"
    title="Title"
    caption="Description"
>}}

Tips & Best Practices

For Galleries:

  • Use filterable="true" when you have 6+ images with categories
  • Optimal column count: 3 for desktop, auto-adjusts for mobile
  • Tags are comma-separated per image, separated by pipes
  • Each gallery needs a unique id if you have multiple galleries on one page

For Audio/Video:

  • Host MP3 files in /static/audio/ directory
  • Keep audio files under 10MB for best performance
  • For videos, use YouTube or Vimeo for better streaming
  • Always include captions for accessibility

For Embeds:

  • SoundCloud URLs should be the full track URL
  • Spotify URLs must be the embed URL (not the regular URL)
  • YouTube/Vimeo only need the video ID, not the full URL
  • Test embeds in private browsing to ensure they work

More Shortcodes

For terminal outputs, timelines, admonitions, and other shortcodes, see the Terminal Shortcodes Demo.

Post Features

Reading Progress Bar

The reading progress bar automatically appears on all blog posts and articles. It shows your reading progress with a gradient bar at the top of the page.

Features:

  • Automatically appears on post pages
  • Shows percentage of page scrolled
  • Smooth animation as you scroll
  • Uses site’s orange-to-blue gradient
  • No configuration needed - it just works!

How it works: The progress bar tracks your scroll position and updates in real-time as you read through the article.

Series Support

For multi-part posts, you can create a series navigation box that shows all posts in the series and provides easy navigation between them.

Example:

📚

Web Application Pentesting Masterclass

A comprehensive series covering advanced web application penetration testing techniques

Usage:

{{< series
    title="Series Title"
    description="Series description"
    posts="Post 1|Post 2|Post 3|Post 4"
    current="2"
>}}

Parameters:

  • title - The name of your series
  • description - Brief description of what the series covers
  • posts - Pipe-separated list of post titles (e.g., “Part 1|Part 2|Part 3”)
  • current - The current post number in the series (1-indexed)

Features:

  • Shows all posts in the series
  • Highlights the current post with “You are here” badge
  • Automatic Previous/Next navigation
  • Numbered list for easy reference
  • Beautiful gradient design matching site theme
  • Responsive for mobile devices

Best Practices:

  1. Add the series shortcode at the top of each post in the series
  2. Keep post titles concise (under 50 characters works best)
  3. Update the current parameter for each post in the series
  4. Include a brief description to give readers context

Complete Feature List

Automatic Features (No Setup Required):

  • Reading Progress Bar - Tracks scroll position on all posts

Shortcode-Based Features:

  • Terminal Outputs - Display command outputs with syntax highlighting
  • Timelines - Event timelines for engagement recaps
  • Admonition Boxes - Notes, warnings, tips, info alerts
  • Galleries - Filterable photo galleries with lightbox and sharing
  • Audio Players - Local MP3 file playback
  • SoundCloud Embeds - Embed SoundCloud tracks/playlists
  • Spotify Embeds - Embed Spotify tracks/playlists/albums
  • YouTube/Vimeo - Responsive video embeds
  • Tabs - Tabbed content containers
  • Collapsible - Accordion/expandable sections
  • Code Diff - Display code changes
  • File Tree - Directory structure visualization
  • Copy Buttons - One-click copy for commands
  • Badges - Inline status/severity badges
  • Keyboard Shortcuts - Display key combinations (e.g., Ctrl+C)
  • CTF Flags - Special formatting for CTF flags
  • Quotes - Enhanced blockquotes with citations
  • Progress Bars - Visual stats/progress indicators
  • Mermaid Diagrams - Flowcharts and diagrams
  • ASCII Art - Preserve ASCII art formatting
  • Split View - Side-by-side comparisons
  • Series Navigation - Multi-part post series support

Need Help?

For more examples of shortcodes and features, check out:

All shortcodes are designed with security, performance, and accessibility in mind.