Template:Hsg

Forum Topic

Purpose & Usage

This template leverages two parser functions, #hsgimg and #hsgytb, provided by the HighslideGallery extension. Add an image and/or YouTube video thumbnail or anchor text to a page, or include multiple assets and associate them within a Highslide gallery (HSG). The image or video expands into a HSG overlay for closer inspection.

• Click on the thumbnail to open the media in a Highslide overlay, and cycle through gallery items, or click 'play' to auto-cycle through large galleries.
• High resolution images will be expanded to the constraints of the browser window, but these can be upscaled to native resolution with panning by clicking/dragging using the mouse.
• Smart caption handling for thumb and inline modes
• Support for inline linktext format

Required Parameters

EITHER ...

Parameter	Default Value	Example(s)	Note(s)
img	n/a	File:Page.jpg, https://...fileName.jpg	Aliases: image, file, path

OR ...

Parameter	Default Value	Example(s)	Note(s)
ytb	n/a	https://youtube.com/*videoID, videoID	Aliases: yt, youtube

Optional Parameters

Parameter	Default Value	Example(s)	Note(s)
hsgid	n/a	"my-gallery"	Alias: id - The Highslide gallery (HSG) ID associates the HSG with a gallery shared with other HSGs using the same token value.
tile	0 (false)	1 (true)	Horizontally justifies thumbnails and captions to utilize the full width of the page
width	210(px)	512	Sets the width in pixels of the HSG thumbnail.
title	n/a	"my-title"	Sets the HSG title, which will be displayed as the first term under the thumbnail (and thumb alt text) and the second term within the HSG overlay.
caption	n/a	"my-caption"	Sets the HSG caption, which will be displayed as the last term under the thumbnail (and thumb alt text) and within the HSG overlay.
nocaption	0 (false)	1 (true)	Alias: hidecaption - Hides the thumb title and caption (but not within HSG overlay).
inline	0 (false)	1 (true)	Alias: text - Toggles 'inline' mode whereby the HSG is accessible via anchor text rather than a thumb image. This is useful when a thumbnail might be distracting or intrusive.
linktext	n/a	"this image"	Sets the anchor text used for linking into the HSG when inline mode is used.
autoplay	0 (false)	1 (true)	Set to enable autoplay of the embeded video.

Examples

The minimal template call will display a video or an image thumbnail on the page without caption.

Markup:

{{Hsg|img=File:18471SetRAIDLSatv2.jpg}}
{{Hsg|ytb=vqpOe6-eX0w}}

Result:

Using Template:Clear will stack thumbs without an interleaving <p> element.

Markup:

{{Hsg
| img = File:18471DayRAIDLSatv2.jpg
| width = 150
}}{{clear}}
{{Hsg
| ytb = HrnmX8OW164
| width = 150
}}

Result:

If template calls are placed one after the other on the same line, thumbs will display side-by-side rather than default stacked.

Markup:

{{Hsg
| img = File:10A23DDayRAIDLSatv2.jpg
| width = 200
| title = SSE
| caption = RAID-10E1F2-Night
}}{{Hsg
| ytb = vqpOe6-eX0w
| width = 200
| caption = Grass LOD Normals
}}

Result:

SSE | RAID-10E1F2-Night

Grass LOD Normals

Thumbs can be horizontally "justified" using the `tile=1` option.

Code:

{{Hsg
| hsgid = tiled
| img = File:10E1F2DayRAIDLSatv2.jpg
| tile = 1
| width = 350
| caption = RAID-10E1F2-Day
}}{{Hsg
| hsgid = tiled
| img = File:10E1F2SetRAIDLSatv2.jpg
| tile = 1
| width = 350
| caption = RAID-10E1F2-Set
}}{{Hsg
| hsgid = tiled
| img = File:10E1F2NightRAIDLSatv2.jpg
| tile = 1
| width = 350
| title = SSE
| caption = RAID-10E1F2-Night
}}

Result:

RAID-10E1F2-Day

RAID-10E1F2-Set

SSE | RAID-10E1F2-Night

Reusing hsgid groups these two 'external' images into the same gallery.

As long as the template calls exist somewhere on the same page, they will be grouped into a gallery.

Markup:

{{Hsg
| img = https://stepmodifications.org/wiki/images/7/70/10A237SetRAIDLSatv2.jpg
| hsgid = RAIDSample
| width = 300
| title = RAID Weathers SSE
| caption = RAID-10A237-Set
}}{{Hsg
| img = https://stepmodifications.org/wiki/images/f/f9/10A237DayRAIDLSatv2.jpg
| hsgid = RAIDSample
| width = 300
| title = RAID Weathers SSE
| caption = RAID-10A237-Day
}}

Result:

RAID Weathers SSE | RAID-10A237-Set

RAID Weathers SSE | RAID-10A237-Day

Thumbs nest properly in lists.

Markup:

# Ordered list
# {{Hsg|hsgid=unorderedList|img=File:10E1F2DayRAIDLSatv2.jpg|width=160|title=SSE|caption=RAID-10E1F2-Day}}{{Hsg|hsgid=unorderedList|img=File:10E1F2SetRAIDLSatv2.jpg|width=160|title=SSE|caption=RAID-10E1F2-Set}}{{Hsg|hsgid=unorderedList|img=File:10E1F2NightRAIDLSatv2.jpg|width=160|title=SSE|caption=RAID-10E1F2-Night}}
# Next list item...

Result:

1. Ordered list

SSE | RAID-10E1F2-Day

SSE | RAID-10E1F2-Set

SSE | RAID-10E1F2-Night

1. Next list item...

Inline mode provides access to the HSG via decorated anchor text.

Code:

This is an {{Hsg|inline=1|ytb=HrnmX8OW164|linktext=inline video|caption=grass normals}}using the <code>#hsgytb</code> parser function for video.<br>
# Similarly, this is an {{Hsg|inline=1|hsgid=mixedGallery|img=File:4D7FBSetRAIDLSatv2.jpg|linktext=inline image|title=SSE|caption=RAID-4D7FB-Set}}HSG in a list using the <code>#hsgimg</code> parser function with <code>inline=1</code>.
# Next list item ...

Result:
This is an inline video using the #hsgytb parser function for video.

1. Similarly, this is an

inline image HSG in a list using the #hsgimg parser function with inline=1.

1. Next list item ...