### Install and Run Thumbsup
Source: https://thumbsup.github.io/
Install Thumbsup globally using npm and then run it to generate a gallery from your photos. Specify the input directory for media and the output directory for the generated gallery.
```bash
npm install -g thumbsup
thumbsup --input ./photos --output ./gallery
```
--------------------------------
### Install thumbsup via npm
Source: https://thumbsup.github.io/docs/2-installation/npm
Installs the thumbsup package globally using npm. Ensure Node.js and Exiftool are installed and in your system path.
```bash
npm install -g thumbsup
```
--------------------------------
### Basic Thumbsup CLI Configuration
Source: https://thumbsup.github.io/docs/3-configuration/usage
Use this command for a simple setup, specifying only the input and output directories.
```bash
thumbsup --input "/media/photos" --output "./website"
```
--------------------------------
### Example Input Folder Structure
Source: https://thumbsup.github.io/docs/1-introduction/getting-started
Illustrates a typical folder structure for ThumbsUp input, including nested albums and mixed media types.
```text
input
|__ paris
| |__ day 1
| | |__ img001.jpg
| | |__ img002.jpg
| |__ day 2
| |__ img003.jpg
| |__ img004.jpg
|__ tokyo
|__ img005.png
|__ vid001.mp4
```
--------------------------------
### Verify thumbsup installation
Source: https://thumbsup.github.io/docs/2-installation/npm
Checks if the thumbsup command is available and running correctly after global installation.
```bash
thumbsup --help
```
--------------------------------
### Custom LESS File Example
Source: https://thumbsup.github.io/docs/4-themes/create
An example of a custom LESS file used to override theme variables.
```less
// custom.less
@highlight: #ed124d;
```
--------------------------------
### Install dependencies on macOS with Homebrew
Source: https://thumbsup.github.io/docs/2-installation/npm
Installs Node.js and other optional dependencies using Homebrew on macOS.
```bash
brew install node
brew install exiftool
brew install graphicsmagick
brew install ffmpeg
brew install gifsicle
brew install dcraw
```
--------------------------------
### Run Thumbsup Docker with Read-Only Input
Source: https://thumbsup.github.io/docs/2-installation/docker
Example of running the Thumbsup Docker container with a read-only input volume and a specific output directory.
```bash
docker run -t \
-v /Volumes/photos:/input:ro \
-v "$(pwd)/website:/output" \
-u $(id -u):$(id -g) \
ghcr.io/thumbsup/thumbsup \
thumbsup --input /input --output /output
```
--------------------------------
### Basic ThumbsUp Indexing
Source: https://thumbsup.github.io/docs/3-configuration/input-settings
This is a basic command to start indexing all photos from the specified input directory.
```bash
# Index all photos
thumbsup --input /photos
```
--------------------------------
### Example Git Repository Structure for Themes
Source: https://thumbsup.github.io/docs/4-themes/create
Illustrates a typical file organization for a theme's Git repository, separating source files from build outputs.
```text
|__ package.json
|__ src # raw files
|__ dist # result of the build process, typically git-ignored
```
--------------------------------
### Theme Settings JSON Example
Source: https://thumbsup.github.io/docs/4-themes/create
A JSON file defining custom settings for a Thumbsup theme, which can be passed via the --theme-settings argument.
```json
{
"notify": true,
"message": "hello"
}
```
--------------------------------
### Public Folder Structure
Source: https://thumbsup.github.io/docs/4-themes/create
Example of a theme's 'public' folder containing static assets like JavaScript and images.
```text
myTheme
|__ album.hbs
|__ public
|__ cool.js
|__ dragon.jpg
```
--------------------------------
### Example JavaScript Helper
Source: https://thumbsup.github.io/docs/4-themes/create
A simple JavaScript helper function that returns a greeting string.
```javascript
module.exports = name => {
return `hello ${name}`
}
```
--------------------------------
### Install Node.js 10 on Debian/Ubuntu
Source: https://thumbsup.github.io/docs/2-installation/npm
Installs Node.js version 10 on Debian-based systems using NodeSource repository.
```bash
sudo apt install curl software-properties-common
curl -sL https://deb.nodesource.com/setup_10.x | sudo bash -
sudo apt install nodejs
```
--------------------------------
### Example Partial Template
Source: https://thumbsup.github.io/docs/4-themes/create
A simple Handlebars partial template named 'caption.hbs'.
```handlebars
Photo caption
```
--------------------------------
### Install thumbsup on Raspberry Pi with compatibility
Source: https://thumbsup.github.io/docs/2-installation/npm
Installs thumbsup globally on a Raspberry Pi, setting the LZZ_COMPAT environment variable for compatibility.
```bash
LZZ_COMPAT=1 npm install -g thumbsup
```
--------------------------------
### theme.less Stylesheet Example
Source: https://thumbsup.github.io/docs/4-themes/create
Basic LESS stylesheet for a theme, setting the color for H1 elements.
```less
h1 {
color: #2070ee;
}
```
--------------------------------
### Rebuild thumbsup binary components
Source: https://thumbsup.github.io/docs/2-installation/npm
Rebuilds the binary components of thumbsup after installation or updates, particularly useful on Debian systems if Node.js was updated.
```bash
cd /usr/lib/node_modules/thumbsup && npm rebuild --unsafe-perm
```
--------------------------------
### album.hbs Template Example
Source: https://thumbsup.github.io/docs/4-themes/create
A Handlebars template for rendering album content, including nested albums and files. Uses the built-in 'relative' helper for URLs.
```handlebars
{{#with album}}
{{title}}
Nested albums
{{#each albums}}
{{title}}
{{/each}}
Photos and videos
{{#each files}}
{{filename}}
{{/each}}
{{#endwith}}
```
--------------------------------
### Build a Gallery with Thumbsup
Source: https://thumbsup.github.io/docs
Use this command to build a photo gallery. Specify the input directory containing photos and the output directory for the gallery.
```bash
thumbsup --input ./myphotos --output ./gallery
```
--------------------------------
### Configure Theme Settings
Source: https://thumbsup.github.io/docs/3-configuration/website-settings
Provide a path to a JSON file containing specific configuration options for the selected theme.
```bash
--theme-settings
```
--------------------------------
### Select a Theme
Source: https://thumbsup.github.io/docs/3-configuration/website-settings
Choose a predefined theme for your photo gallery. Available options include 'classic', 'cards', 'mosaic', and 'flow'.
```bash
--theme
```
--------------------------------
### Loading a Theme
Source: https://thumbsup.github.io/docs/4-themes/create
Command-line argument to specify the path to a custom theme.
```bash
--theme-path file://path/to/theme
```
--------------------------------
### Advanced Thumbsup CLI Configuration
Source: https://thumbsup.github.io/docs/3-configuration/usage
Configure advanced website generation options including titles, sizes, media handling, album sorting, themes, and analytics.
```bash
thumbsup --input "/media/photos" --output "./website" --title "My holidays" --thumb-size 200 --large-size 1500 --original-photos true --original-videos false --albums-from "{YYYY/MM}" --sort-albums-by start-date --theme cards --theme-style "./custom.less" --google-analytics "UA-999999-9"
```
--------------------------------
### Using a Helper in album.hbs
Source: https://thumbsup.github.io/docs/4-themes/create
Demonstrates how to call the 'hello' JavaScript helper within a Handlebars template.
```handlebars
{{hello world}}
```
--------------------------------
### Basic ThumbsUp Configuration
Source: https://thumbsup.github.io/docs/3-configuration/misc-settings
Define core ThumbsUp settings such as input/output paths, media sizes, download behavior, sorting, theme, and analytics.
```json
{
"input": "/media/output",
"output": "./website",
"title": "My holiday",
"thumb-size": 200,
"large-size": 1500,
"photo-download": "copy",
"video-download": "resize",
"sort-albums-by": "date",
"theme": "cards",
"css": "./custom.css",
"google-analytics": "UA-999999-9"
}
```
--------------------------------
### Multiple Album Patterns (CLI)
Source: https://thumbsup.github.io/docs/3-configuration/album-settings
Specify multiple album patterns directly on the command line by repeating the `--albums-from` flag.
```bash
thumbsup --albums-from "Folders/%path" --albums-from "Years/{YYYY}"
```
--------------------------------
### Combining Multiple Album Mappers (CLI)
Source: https://thumbsup.github.io/docs/3-configuration/album-settings
Chain multiple `--albums-from` flags, including custom JavaScript mappers, to apply a series of album structuring rules.
```bash
--albums-from "Photos/{YYYY}" --albums-from "file://5star.js" --albums-from "file://events.js"
```
--------------------------------
### Sync Website to S3 using s3cmd
Source: https://thumbsup.github.io/docs/5-deployment/aws
An alternative method using s3cmd for syncing. It allows for more granular control with options like excluding files and specifying credentials.
```bash
s3cmd sync --config= --delete-removed --exclude-from ./generated/website/ s3://mybucket/
```
--------------------------------
### Use JSON config file
Source: https://thumbsup.github.io/docs/3-configuration/misc-settings
Specify the path to a JSON file containing ThumbsUp arguments to manage complex configurations.
```bash
thumbsup --config config.json
```
--------------------------------
### Configure Photo Download Behavior
Source: https://thumbsup.github.io/docs/3-configuration/output-settings
Control how large preview images and download links are generated. Options include resizing, copying originals, linking to originals, or creating symbolic links.
```bash
--photo-download resize
```
```bash
--photo-download copy
```
```bash
--photo-download symlink
```
```bash
--photo-download link
```
--------------------------------
### Set Website Title
Source: https://thumbsup.github.io/docs/3-configuration/website-settings
Define the main title for your photo gallery website. Defaults to 'Photo album' if not specified.
```bash
--title
```
--------------------------------
### Multiple Album Patterns (Config File)
Source: https://thumbsup.github.io/docs/3-configuration/album-settings
Define multiple album patterns within a configuration file using a JSON array for the `albums-from` key.
```json
{
"albums-from": ["Folders/%path", "Years/{YYYY}"]
}
```
--------------------------------
### Partials Folder Structure
Source: https://thumbsup.github.io/docs/4-themes/create
Illustrates the directory structure for storing Handlebars partials within a theme.
```text
theme/partials
|__ caption.hbs
```
--------------------------------
### Specify Custom Theme Path
Source: https://thumbsup.github.io/docs/3-configuration/website-settings
Provide a path to a local custom theme directory if you are not using one of the built-in themes.
```bash
--theme-path
```
--------------------------------
### Load Built-in or External Themes
Source: https://thumbsup.github.io/docs/4-themes/themes
Use the `--theme` flag to load a pre-defined theme by name, or `--theme-path` to specify a custom theme directory. Additional styles can be included with `--theme-style`.
```bash
# load one of the built-in themes
--theme
# load an external theme
—-theme-path path/to/theme
# add additional styles
--theme-style custom.less
```
--------------------------------
### package.json Configuration for npm Publish
Source: https://thumbsup.github.io/docs/4-themes/create
Specifies the 'thumbsup.themeRoot' property in package.json to indicate the directory containing the built theme files for npm publishing.
```json
{
"name": "my-thumbsup-theme",
"thumbsup": {
"themeRoot": "dist"
}
}
```
--------------------------------
### Run Thumbsup Command
Source: https://thumbsup.github.io/docs/2-installation/options
Basic command to run Thumbsup for processing media files. Use the `--log` argument for troubleshooting.
```bash
$ thumbsup --input ./photos --output ./website
✔ Indexing folder
✔ Processing media
✔ Creating website
Gallery generated successfully
3 albums, 70 photos, 5 videos
```
--------------------------------
### Upload Gallery to S3 using AWS CLI Docker Image
Source: https://thumbsup.github.io/docs/2-installation/synology
Use the AWS CLI Docker image to synchronize the generated gallery to an S3 bucket. This command requires AWS credentials to be mounted and specifies the local website directory and the S3 bucket path.
```bash
#!/bin/bash -e
docker run \
-v `pwd`/.aws:/root/.aws \
-v `pwd`/website:/website:ro \
mesosphere/aws-cli \
s3 sync /website s3://mywebsite.com \
--exclude '*/@eaDir/*'
```
--------------------------------
### Custom Album Mapper (CLI)
Source: https://thumbsup.github.io/docs/3-configuration/album-settings
Specify a custom album mapping function using the `file://` protocol followed by the path to your JavaScript file.
```bash
--albums-from "file://mapper.js"
```
--------------------------------
### Run Thumbsup Docker Container
Source: https://thumbsup.github.io/docs/2-installation/docker
Basic command to run the Thumbsup Docker container, mounting the current directory for media and gallery output.
```bash
docker run -t \
-v "$(pwd):/work" \
-u $(id -u):$(id -g) \
ghcr.io/thumbsup/thumbsup \
thumbsup --input /work/media --output /work/gallery
```
--------------------------------
### Sync Website to S3 using AWS CLI
Source: https://thumbsup.github.io/docs/5-deployment/aws
Use this command to synchronize the generated website files to an S3 bucket. The `--delete` flag removes files in the bucket that are not present in the source directory.
```bash
aws s3 sync ./generated/website s3://mybucket --delete
```
--------------------------------
### Helpers Folder Structure
Source: https://thumbsup.github.io/docs/4-themes/create
Shows the directory structure for JavaScript helpers within a theme.
```text
theme/helpers
|__ hello.js
```
--------------------------------
### Run thumbsup Docker Image from Command Line
Source: https://thumbsup.github.io/docs/2-installation/synology
Execute the thumbsup Docker image directly from the command line. This method is suitable for triggering gallery builds on a schedule. Ensure all necessary folders are mounted correctly.
```bash
#!/bin/bash -e
docker run \
-v `pwd`/photos:/input:ro \
-v `pwd`/website:/output \
ghcr.io/thumbsup/thumbsup:2.18.0 \
thumbsup --config /input/thumbsup.json
```
--------------------------------
### Configurable LESS Variables
Source: https://thumbsup.github.io/docs/4-themes/create
Demonstrates using LESS variables for theme customization, allowing users to override styles via a custom LESS file.
```less
@highlight: #17baef;
h1 {
color: @highlight;
}
```
--------------------------------
### Add a Custom Footer
Source: https://thumbsup.github.io/docs/3-configuration/website-settings
Include custom plain text or HTML content at the bottom of every page in your gallery.
```bash
--footer
```
--------------------------------
### Include Custom Theme Styles
Source: https://thumbsup.github.io/docs/3-configuration/website-settings
Optionally specify a path to a CSS or LESS file to override or supplement the default theme styles. This file is included after all other styles.
```bash
--theme-style
```
--------------------------------
### Include Files with Glob Pattern (JSON)
Source: https://thumbsup.github.io/docs/3-configuration/input-settings
Use a JSON configuration to specify glob patterns for including files. This allows for flexible filtering of input files.
```json
{
"include": ["**/IMG_*"]
}
```
--------------------------------
### Configure Included Files in JSON
Source: https://thumbsup.github.io/docs/3-configuration/misc-settings
Use arrays in the JSON config to specify multiple patterns for inclusion, such as for holidays and events.
```json
{
"include": ["holidays/**", "events/**"]
}
```
--------------------------------
### Including a Partial in album.hbs
Source: https://thumbsup.github.io/docs/4-themes/create
Demonstrates how to include the 'caption.hbs' partial within the main 'album.hbs' template.
```handlebars
{{> caption}}
```
--------------------------------
### Theme Folder Structure
Source: https://thumbsup.github.io/docs/4-themes/create
Defines the standard directory structure for a Thumbsup theme.
```text
theme
|__ album.hbs # main view
|__ theme.less # stylesheets
|__ partials # optional Handlebars partials
|__ helpers # optional JS helpers
|__ public # optional static files
```
--------------------------------
### Set Video Bitrate
Source: https://thumbsup.github.io/docs/3-configuration/output-settings
Specify a target average bitrate for video encoding instead of using constant rate factor. This option is incompatible with `--video-quality`.
```bash
--video-bitrate "1200k"
```
--------------------------------
### Rerun Scoping with Include Pattern
Source: https://thumbsup.github.io/docs/3-configuration/input-settings
This command demonstrates rerunning ThumbsUp with a specific include pattern to scope the scan to a particular year, after a file has been deleted.
```bash
# Delete a file
rm 2023/IMG_002.jpg
# Rerun scoping to 2023
thumbsup --input /photos --include '2023/**' --scan-mode 'SEE BELOW'
```
--------------------------------
### Set Index Filename
Source: https://thumbsup.github.io/docs/3-configuration/website-settings
Specify a custom filename for the home page if your web server expects a different name or if you need to place index.html alongside existing content.
```bash
--index
```
--------------------------------
### Integrate Google Analytics
Source: https://thumbsup.github.io/docs/3-configuration/website-settings
Add your Google Analytics tracking ID to enable website analytics for your photo gallery.
```bash
--google-analytics
```
--------------------------------
### Set Link Prefix for Linked Downloads
Source: https://thumbsup.github.io/docs/3-configuration/output-settings
Define a custom prefix for download links when using the `--photo-download link` option. This can be a relative path, absolute path, or a URL.
```bash
thumbsup --input /docs/photos --output /docs/website --photo-download link
```
```bash
--photo-download link --link-prefix "../../"
```
```bash
--photo-download link --link-prefix "https://static.mygallery.com/originals/"
```
--------------------------------
### Enable Cleanup of Unreferenced Media Files
Source: https://thumbsup.github.io/docs/3-configuration/output-settings
When enabled, this option automatically deletes output media files that are no longer referenced by any album after a build. It does not affect input files.
```bash
--cleanup true
```
--------------------------------
### Custom Album Mapper (JavaScript)
Source: https://thumbsup.github.io/docs/3-configuration/album-settings
Use a custom JavaScript function to dynamically determine album assignments for each file. The function receives file metadata and should return an array of album names.
```javascript
module.exports = file => {
return file.meta.video ? ['Videos'] : ['Photos']
}
```
```javascript
module.exports = file => {
return (file.meta.rating === 5) ? ['Best photos'] : []
}
```
```javascript
// if your folders are called "2016 [this event]"
const eventRegex = /(\d\d\d\d) \[([a-z\s]+)\]/
module.exports = file => {
const match = eventRegex.exec(file.path)
if (match) {
const year = match[1]
const event = match[2]
return [`Events/${year}/${event}`]
} else {
return ['Events/Unsorted']
}
}
```
--------------------------------
### Add Watermark to Images
Source: https://thumbsup.github.io/docs/3-configuration/output-settings
Overlay a watermark image onto resized images using the `--watermark` option. The watermark image should be a PNG with transparency.
```bash
thumbsup --watermark copyright.png
```
--------------------------------
### Generated Static Website Structure
Source: https://thumbsup.github.io/docs/5-deployment/static-website
The output of ThumbsUp is a static website with a defined directory structure. This structure includes HTML pages for albums, a public directory for assets, and a media directory for photos and videos.
```tree
website
|
| # all albums
| # which are just HTML pages
|__ index.html
|__ sydney.html
|__ paris.html
|
| # files to support the website
| # e.g. scripts, css...
|__ public
|
| # your photos and videos
| # including resized versions and thumbnails
|__ media
```
--------------------------------
### Organize Albums in a Subfolder
Source: https://thumbsup.github.io/docs/3-configuration/website-settings
Group all generated HTML album pages into a specified subfolder to maintain a cleaner output directory structure. This setting does not affect the main index.html page.
```bash
--albums-output-folder
```
--------------------------------
### File Object Structure
Source: https://thumbsup.github.io/docs/4-themes/data-model
Represents a file (photo or video) within an album. Contains its ID, path, filename, date, type, and URLs for different sizes.
```json
{
id: Number,
path: String,
filename: String,
date: Date,
type: 'Video|Image',
isVideo: Boolean,
meta: Metadata,
urls: {
thumbnail: String,
small: String,
large: String,
video: String,
download: String
}
}
```
--------------------------------
### Enable Cleanup in JSON Config
Source: https://thumbsup.github.io/docs/3-configuration/misc-settings
Set boolean flags like 'cleanup' to true within the JSON configuration file.
```json
{
"cleanup": true
}
```
--------------------------------
### Accessing Theme Settings in HBS
Source: https://thumbsup.github.io/docs/4-themes/create
Shows how to access and use theme settings within Handlebars templates, both at the root and within loops.
```handlebars
{{#if settings.notify}} {{settings.message}} {{/if}}
{{#each albums}}
{{name}}
{{#if @root.settings.notify}}
{{@root.settings.message}}
{{/if}}
{{/each}}
```
--------------------------------
### Gallery Object Structure
Source: https://thumbsup.github.io/docs/4-themes/data-model
Represents the entire gallery. Available properties include home album, title, footer, thumbnail sizes, and Google Analytics ID.
```json
{
home: Album,
title: String,
footer: String,
thumbSize: Number,
largeSize: Number,
googleAnalytics: String
}
```
--------------------------------
### Configure Timezone in Docker
Source: https://thumbsup.github.io/docs/2-installation/docker
Command to include the host's timezone configuration within the Docker container to ensure accurate photo date display.
```bash
docker run -v /etc/localtime:/etc/localtime [...]
```
--------------------------------
### Exclude Files with Glob Pattern (JSON)
Source: https://thumbsup.github.io/docs/3-configuration/input-settings
Use a JSON configuration to specify glob patterns for excluding files. Exclusions are applied after inclusions.
```json
{
"exclude": ["**/IMG_*"]
}
```
--------------------------------
### Apply GraphicsMagick Arguments
Source: https://thumbsup.github.io/docs/3-configuration/output-settings
Use `--gm-args` to pass arguments directly to GraphicsMagick for image manipulation. This allows for effects like equalization, borders, and sharpening.
```bash
thumbsup --gm-args 'equalize'
```
```bash
thumbsup --gm-args 'border 5x5'
```
```bash
thumbsup --gm-args 'unsharp 2 0.5 0.7 0'
```
```bash
thumbsup --gm-args 'unsharp 2 0.5 0.7 0' --gm-args 'modulate 120'
```
--------------------------------
### Album Object Structure
Source: https://thumbsup.github.io/docs/4-themes/data-model
Represents an album within the gallery. Includes its title, depth, zip path, nested albums, files, and statistics.
```json
{
title: String,
home: Boolean,
depth: Number,
zip: String,
albums: [Album],
files: [File],
stats: {
albums: Number,
photos: Number,
videos: Number,
fromDate: Date,
toDate: Date
}
}
```
--------------------------------
### Set Concurrency for Parallel Processing
Source: https://thumbsup.github.io/docs/3-configuration/output-settings
Control the number of photos and videos processed in parallel. Defaults to the number of CPU cores. Setting a lower number can improve system responsiveness.
```bash
--concurrency 2
```
--------------------------------
### Set Watermark Position
Source: https://thumbsup.github.io/docs/3-configuration/output-settings
Control the placement of the watermark using `--watermark-position`. Supported values include edge positions, 'Center', and 'Repeat' for tiling.
```bash
thumbsup --watermark copyright.png --watermark-position Repeat
```
--------------------------------
### Set Log Level in JSON Config
Source: https://thumbsup.github.io/docs/3-configuration/misc-settings
Configure the logging verbosity by setting the 'log' property to 'info', 'debug', or 'trace' in the JSON configuration.
```json
{
"log": "info"
}
```
--------------------------------
### Configure CNAME for Custom Domain
Source: https://thumbsup.github.io/docs/5-deployment/aws
When using a custom domain with S3 website hosting, create a CNAME record in your DNS settings pointing to the S3 website endpoint. Ensure your bucket name matches your domain name.
```dns
CNAME website.com.s3-website-us-east-1.amazonaws.com
```
--------------------------------
### Pass Extra Arguments to GraphicsMagick
Source: https://thumbsup.github.io/docs/3-configuration/output-settings
Provide additional command-line arguments to be passed directly to the GraphicsMagick tool during image processing. Each logical option should be specified as a separate string.
--------------------------------
### Metadata Object Structure
Source: https://thumbsup.github.io/docs/4-themes/data-model
Contains metadata for a file, such as date, caption, keywords, dimensions, and rating.
```json
{
date: Date,
caption: String,
keywords: [String],
video: Boolean,
animated: Boolean,
rating: Number,
favourite: Boolean,
width: Number,
height: Number,
exif: Object
}
```
--------------------------------
### Disable Dry Run in JSON Config
Source: https://thumbsup.github.io/docs/3-configuration/misc-settings
Control the 'dry-run' behavior by setting it to false in the JSON configuration. This ensures media and gallery pages are generated.
```json
{
"dry-run": false
}
```
--------------------------------
### Template Data Structure
Source: https://thumbsup.github.io/docs/4-themes/data-model
The data object passed to each album template. It contains the current album, the gallery object, and breadcrumbs.
```json
{
album: Album,
gallery: Gallery,
breadcrumbs: [String]
}
```
--------------------------------
### Customize Themes with CSS Variables and Styles
Source: https://thumbsup.github.io/docs/4-themes/themes
Override theme variables using Less syntax to customize specific theme elements. You can also add new styles to target specific classes or IDs, but be aware that these selectors may change between theme versions.
```less
// Overriding theme variables is an easy way to customize a theme.
// Theme variables are well supported and should be stable within a theme.
@theme-variable: 'new value';
// You can also override any other elements.
// Your styles will be applied on top of the existing theme styles.
// However the name of CSS classes or IDs might change with new theme versions.
.other-custom-item {
color: red;
}
```
--------------------------------
### Disable Usage Stats in JSON Config
Source: https://thumbsup.github.io/docs/3-configuration/misc-settings
Explicitly disable anonymous usage statistics reporting by setting 'usage-stats' to false in the JSON configuration.
```json
{
"usage-stats": false
}
```
--------------------------------
### Escape Special Characters in JSON Config
Source: https://thumbsup.github.io/docs/3-configuration/misc-settings
Ensure special characters, like quotes within HTML attributes, are properly escaped when defining string values in the JSON configuration.
```json
{
"footer": "All images courtesy of unsplash.com"
}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.