About
The
Fotorama Viewer is a custom photo gallery viewer that allows you to display multiple images with captions and navigation controls. It uses a clean, mobile-friendly layout and is ideal for slideshows or grouped visual storytelling.
Required Snippets
To use the Fotorama Viewer, you must use these two snippets together:
- {s:FotoramaIncludes}
- {s:FotoramaViewer|...}
The viewer is populated using one or more
Foto snippets placed inside the
FotoramaViewer block.
Basic Syntax
{s:FotoramaIncludes}
{s:FotoramaViewer|
{s:Foto|PageId|FileName.jpg|Caption text...}
{s:Foto|PageId|FileName2.jpg|Another caption...}
}
Snippet Details
{s:FotoramaIncludes} ¶
This snippet includes the necessary JavaScript and CSS for the Fotorama viewer to work. It should be placed
once per page, ideally above the viewer itself.
- Parameters: None
- Must be used before: {s:FotoramaViewer|...}
{s:FotoramaViewer|...}
This snippet wraps multiple Foto entries and displays them as a scrolling image gallery.
- Parameters: Contains one or more nested {s:Foto|...} entries.
- Must be used with: {s:FotoramaIncludes} and {s:Foto}
{s:Foto|PageId|FileName|Caption}
This defines an individual photo in the viewer.
- PageId: The numeric ID of the page where the photo is stored (e.g., `p2769`)
- FileName: The exact file name of the image (e.g., `i502.jpg`)
- Caption: Optional caption text (can include HTML like <center> or <b>)
You may include formatting such as headings, paragraphs, or centering using wiki or HTML markup within the caption.
Example
{s:FotoramaIncludes}
{s:FotoramaViewer|
{s:Foto|p2769|i501.jpg|<center>Edward arrives at the Gemeentehuis</center>When he arrived at the town hall he was greeted by fifty people including veterans and embassy staff.}
{s:Foto|p2769|i502.jpg|<center>Veterans of Many Wars</center>All were waiting to thank Edward for his service.}
}
Tips
- You can include any number of Foto entries inside a FotoramaViewer block.
- Captions can be long, and may include paragraphs or basic inline formatting.
- The PageId must match the page where the image is stored — otherwise, the image will not load.
- Avoid inserting unrelated content between Foto entries.
Use Cases
- Event photo slideshows
- Crash site visits or return trips
- Veterans' ceremonies
- Step-by-step pictorial explanations
Related Snippets