How to use the AlbumImage Snippet

About ¶

The AlbumImage and AlbumImageThumbnailStyle snippets work together to display a clickable thumbnail image that expands into a larger view using the Highslide JavaScript viewer. These are commonly used for aircraft images, repaints, and other photo comparisons.

These snippets are ideal for gallery pages, aircraft image tables, or any situation where you'd like a compact view that can expand into a detailed one.

Required Snippets ¶

To use the Highslide viewer with custom styling, both of the following snippets should be included:

• {s:AlbumImageThumbnailStyle|CSS rules}
• {s:AlbumImage|ImageURL|Title|Caption|InlineStyle}
  

Snippet Details ¶

{s:AlbumImageThumbnailStyle|?1?} ¶

Sets the global CSS style for all thumbnail images using the `AlbumImageThumbnailStyle` class.

• ?1? = Inline CSS applied to all album image thumbnails (e.g., `height: 200px;`)
• Should be placed once per page before any AlbumImage entries.
• Also loads Highslide slideshow configuration and styles.
  

{s:AlbumImage|?1?|?2?|?3?|?4?} ¶

Displays a thumbnail image that opens the full image in a Highslide popup when clicked.

• ?1? = URL of the full-sized image (e.g., `GetFile.aspx?File=12345.jpg`)
• ?2? = Title of the image (used in tooltip and caption heading)
• ?3? = Optional caption text (supports basic HTML like `
  `)
• ?4? = Optional inline CSS (e.g., `height: 180px;`)
  

Example Usage ¶

{s:AlbumImageThumbnailStyle|height: 200px;}
<table style='border-collapse: collapse;'>
    <tr>
        <th>Original</th><th style='background-color: #CCF;' /><th colspan=3>Repaint</th>
    </tr>
    <tr>
        <td>
            <a href="a106992.ashx"><b style="font-size: 18px;">Baby Lu</b></a><br/>
            {s:AlbumImage|{UP(a106992)}Wikiportrait.jpg|42-106992 SC-D Baby Lu||}
        </td>
        <td style="width: 32px;" />
        <td>{s:AlbumImage|{UP}106992-01.jpg|Baby Lu repaint by nath2889||}</td>
        <td>{s:AlbumImage|{UP}106992-02.jpg|||}</td>
        <td>{s:AlbumImage|{UP}106992-03.jpg|||}</td>
    </tr>
</table>

Tips ¶

• Thumbnail images are responsive and will expand with Highslide on click.
• It's best to keep thumbnail dimensions consistent using `AlbumImageThumbnailStyle`.
• Use `
  ` inside captions to break lines or add additional info.
• A missing or invalid image will automatically be replaced by a fallback "No Image" thumbnail.
  

Related Snippets ¶

• FotoramaViewer
• Snippets Reference