Add {popart ...}{/popart} shortcodes in articles, modules, or custom HTML. Use the editor button or copy examples from the plugin's Shortcode Examples tab.
General options
| Option | Example | Description |
| text | text="Read more" | Link label for text/button triggers. |
| article | article="285" | Required. Joomla article ID to open in the popup. |
| popwidth | popwidth="720px" | Popup width. Omitted values use plugin defaults (Modern theme). |
| popheight | popheight="85vh" | Popup max height. |
| class | class="ibtn ibtn-blue" | CSS classes. Use ibtn ibtn-* for pill buttons. |
| icon | icon="fa-book" | Font Awesome icon or single emoji/symbol. |
| showtitle | showtitle="false" | Show or hide the article title/header bar for this trigger. Inherits plugin default when omitted. |
| hash | hash="true" | Enable or disable URL hash / deep link for this trigger. |
| hashslug | hashslug="welcome" | Custom hash name (default: popart-{id}). |
| lazy | lazy="true" | Load article HTML via AJAX on first open. |
| rel | rel="my-gallery" | Group triggers for gallery next/prev navigation. |
| title | title="Tooltip" | HTML title attribute on the trigger link (not the popup heading). |
Image & overlay options
| Option | Example | Description |
| image | image="images/photo.jpg" | Image trigger path (local or full URL). |
| alt | alt="Description" | Image alt text for SEO and accessibility. |
| imgwidth / imgheight / imgradius | imgwidth="280px" | Image trigger dimensions and corner radius. |
| overlaytext | overlaytext="Read article" | Caption text on image overlay. |
| overlay | overlay="true" | Keep overlay visible without hover. |
| overlaybgcolor / overlaytextcolor | overlaybgcolor="#1819ed" | Overlay colours. |
| overlayopacity | overlayopacity="0.85" | Overlay opacity (0–1). |
| overlayfontsize / overlaypadding / overlaytextborder | overlayfontsize="15px" | Overlay typography and border. |
| overlayeffect | overlayeffect="slide-up" | Hover animation: fade, slide-*, zoom, blur. |
| overlayspeed | overlayspeed="300" | Overlay animation duration (ms). |
| overlayposition | overlayposition="bottom" | Overlay text position: center, bottom, top. |
| imagezoom | imagezoom="false" | Enable or disable hover zoom on the image. |
| Red | ibtn ibtn-red |
| Orange | ibtn ibtn-orange |
| Blue | ibtn ibtn-blue |
| Grey | ibtn ibtn-grey |
| Green | ibtn ibtn-green |
| Yellow | ibtn ibtn-yellow |
| Violet | ibtn ibtn-violet |
| Dark blue | ibtn ibtn-dark-blue |
Examples
Simple text link
{popart text="Click Here" article="285"}{/popart}
Coloured pill buttons
{popart class="ibtn ibtn-blue" text="Button 1" article="285" popwidth="860px" popheight="500px"}{/popart}
{popart class="ibtn ibtn-green" text="Button 2" article="284" popwidth="860px" popheight="500px"}{/popart}
Hide popup header for one trigger
{popart class="ibtn ibtn-green" text="No header" article="285" showtitle="false" popwidth="860px" popheight="500px"}{/popart}
Shareable deep link
{popart class="ibtn ibtn-blue" text="Shareable popup" article="285" hash="true" hashslug="welcome-popup"}{/popart}
Gallery with navigation
{popart text="Part 1" article="285" rel="my-gallery"}{/popart}
{popart text="Part 2" article="284" rel="my-gallery"}{/popart}
{popart text="Part 3" article="283" rel="my-gallery"}{/popart}
Lazy-loaded popup
{popart text="Lazy load article" article="285" lazy="true" popwidth="860px" popheight="500px"}{/popart}
Image with hover overlay
{popart image="images/sample.jpg" alt="Preview" article="285" overlaytext="Read article" icon="fa-eye" overlayeffect="slide-up" overlaybgcolor="#1819ed" overlaytextcolor="#fff"}{/popart}
Gallery + lazy load + hash combined
{popart text="Chapter 1" article="285" rel="series" lazy="true" hash="true" class="ibtn ibtn-dark-blue" popwidth="920px" popheight="560px"}{/popart}
{popart text="Chapter 2" article="284" rel="series" lazy="true" hash="true" class="ibtn ibtn-dark-blue" popwidth="920px" popheight="560px"}{/popart}
Clear floats after image triggers
{popart image="images/a.jpg" article="285"}{/popart}
{popart image="images/b.jpg" article="284"}{/popart}
{clearfix}