Shortcode Usage

Shortcode Examples tab

The plugin configuration includes a Shortcode Examples tab with ready-made samples and a Copy button. Use the tab for the full list; below is a concise reference.

Syntax

{imageoverlay image="path/to/file.jpg" ...optional attributes...}{/imageoverlay}

Helper (optional): {clearfix} inserts a clearing element after floated rows.

Requirements

image is required. At least one of overlaytext or icon must be present or the overlay block is not output.

Examples

Basic
{imageoverlay image="images/sample.jpg" overlaytext="View" overlayopacity="0.5"}{/imageoverlay}

Link + icon
{imageoverlay image="images/sample.jpg" url="https://example.com" overlaytext="Visit" icon="fa-external-link"}{/imageoverlay}

Caption at bottom + slide animation
{imageoverlay image="images/sample.jpg" overlaytext="Caption" overlayalign="bottom" overlayeffect="slide-up" overlayduration="600ms"}{/imageoverlay}

Always visible
{imageoverlay image="images/sample.jpg" overlaytext="Label" overlay="true" overlayopacity="0.85"}{/imageoverlay}

Parameters

• image — Path relative to site root (required)
• overlaytext — Caption text (optional if icon is set)
• icon — Font Awesome class, e.g. fa-search
• url — Makes the image a link; target from plugin setting
• alt — Image alternative text
• class — Extra classes on the wrapper
• overlaybgcolor — #hex, rgb(), or rgba()
• overlaytextcolor — Same colour rules
• overlayopacity — Number from 0 to 1 (overlay tint strength)
• overlayfontsize — e.g. 14px, 1.2rem
• overlaypadding — e.g. 12px, 1rem
• overlayalign — top, center, bottom, left, right
• overlayeffect — fade, slide-up, zoom-in (hover overlays)
• overlayduration — e.g. 300ms, 0.5s
• overlay — true for always-visible overlay (no hover)
• imgwidth / imgheight — Size with unit: px, %, em, rem, vh, vw

Where to use

Articles, custom HTML modules, and any content area that renders the shortcodes as plain text in the final HTML output.