HHT Preview

HHT Preview Shortcode

The HHT preview shortcode is used to link to or embed documents. It is a custom code defined in layouts/shortcodes.

Syntax Reference

{{< preview file/url title mode closed >}}

ParameterDescription
file/urlLocal path or https:// link
titleLink text
modeclosed (default), open, link, or height (e.g. 500px)
closedIf 3rd param is a height, use closed here to prevent auto-open

Usage Examples

Basic Local PDF (Default)

{{< preview "jackfield.pdf" >}}

jackfield.pdf

Legacy Document Photo (Start Expanded)

{{< preview "video-switcher.png" "Video Switcher" "open" >}}

Video Switcher
Video Switcher
Open
Video Switcher

External URL (Link Only)

{{< preview "https://www.hamptonhilltheatre.org.uk/sites/default/files/2024-11/Auditorium%20Sound%20Facilities%20Nov24.pdf" "Auditorium Sound Facilities" "link" >}}

Auditorium Sound Facilities

Google Sheets

{{< preview "https://docs.google.com/spreadsheets/d/1oKKPMCB7Tz0jiDVkPPoL0Wy0ZLTEMpqV32h5CJ8DZTc/preview" "IT Support Log" >}}

IT Support Log

Google Doc

{{< preview "https://docs.google.com/document/d/1w4ARjj7SUph2xa9DTEZrv-hbAE8C6q-JigOO0RPQuCM/preview?tab=t.0#heading=h.kukx2em0fyw4" "Google Workspace Setup" "500px" "closed" >}}

Google Workspace Setup

Google Drive

{{< preview "https://drive.google.com/drive/folders/0AEIAArcX3VQJUk9PVA" "IT Support" "link" >}}

IT Support

File Type Icons

The shortcode automatically assigns icons based on the file extension:

  • PDFs: Red PDF icon ()
  • Images: Blue image icon ()
  • Others: Generic gray file icon for unknown types or remote links.

Developer Safety

If a local filename is entered with the wrong casing (e.g., Schematic.pdf vs schematic.pdf), the shortcode will display a Case Mismatch Warning in the local preview.

Note: You must fix these mismatches to avoid 404 errors when the site is deployed to Cloudflare/Linux.