Pop any Article
Plugin to popup a Joomla Article
The simplest trigger: a text link that opens any Joomla article in the modern popup. Use text for the label and article for the article ID.
{popart text="Click Here" article="285" popwidth="800px" popheight="500px"}{/popart}
{popart text="Read the full article" article="284" popwidth="800px" popheight="500px"}{/popart}
{popart text="Open article #283" article="283" popwidth="800px" popheight="500px"}{/popart}Add class="ibtn ibtn-*" for pill-style buttons. Eight preset colors are included; extend them with Extra CSS in the plugin settings.
{popart class="ibtn ibtn-yellow" text="Button 1" article="284" popwidth="800px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-red" text="Button 2" article="283" popwidth="800px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-green" text="Button 3" article="285" popwidth="800px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-orange" text="Button 4" article="283" popwidth="800px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-blue" text="Button 5" article="284" popwidth="800px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-grey" text="Button 6" article="285" popwidth="800px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-violet" text="Button 7" article="285" popwidth="800px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-dark-blue" text="Button 8" article="285" popwidth="800px" popheight="300px"}{/popart}Combine icon="fa-*" with button classes. Font Awesome 4 syntax (fa-search) is supported out of the box.
{popart class="ibtn ibtn-red" icon="fa-plus" text="Add item" article="285" popwidth="700px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-yellow" icon="fa-comment" text="Comments" article="284" popwidth="600px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-green" icon="fa-map-marker" text="Location" article="283" popwidth="500px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-blue" icon="fa-book" text="Documentation" article="242" popwidth="800px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-violet" icon="fa-star" text="Featured" article="243" popwidth="800px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-dark-blue" icon="fa-download" text="Download" article="244" popwidth="800px" popheight="300px"}{/popart}{popart class="ibtn ibtn-blue" icon="fa-facebook" article="285" popwidth="1100px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-red" icon="fa-home" article="285" popwidth="1000px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-grey" icon="fa-cog" article="285" popwidth="900px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-green" icon="fa-pencil" article="285" popwidth="900px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-orange" icon="fa-share-alt" article="284" popwidth="900px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-violet" icon="fa-heart" article="283" popwidth="900px" popheight="300px"}{/popart}Minimal icon triggers without the ibtn class — ideal for inline actions beside headings or in lists.
{popart icon="fa-search" article="285" popwidth="1100px" popheight="300px"}{/popart}
{popart icon="fa-info-circle" article="284" popwidth="900px" popheight="300px"}{/popart}
{popart icon="fa-external-link" article="283" popwidth="900px" popheight="300px"}{/popart}
{popart icon="fa-file-text-o" article="242" popwidth="860px" popheight="300px"}{/popart}Place triggers naturally inside paragraphs. Great for contextual "read more" links without breaking the reading flow.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it. Read more about Sandra Clarke
There are many variations of passages of Lorem Ipsum available. View Richard Moore's article or open the Stephane Bernard profile to compare popup content.
Lorem Ipsum is simply dummy text... {popart text="Read more about Sandra Clarke" article="243" popwidth="800px" popheight="500px"}{/popart}
There are many variations... {popart text="View Richard Moore's article" article="242" popwidth="800px" popheight="500px"}{/popart} or {popart text="open the Stephane Bernard profile" article="244" popwidth="800px" popheight="500px"}{/popart}Group plain text triggers for hero-style CTAs. These use the modern accent link styling when Modern Button Styling is enabled in the plugin.
{popart text="Get started" article="285" popwidth="860px" popheight="500px"}{/popart}
{popart text="See features" article="284" popwidth="860px" popheight="500px"}{/popart}
{popart text="View changelog" article="283" popwidth="860px" popheight="500px"}{/popart}
{popart text="Contact support" article="245" popwidth="860px" popheight="500px"}{/popart}Mix a prominent button with lighter text links — a common pattern for article teasers and product pages.
{popart class="ibtn ibtn-blue" icon="fa-rocket" text="Launch demo" article="285" popwidth="900px" popheight="500px"}{/popart}
{popart text="Learn more" article="284" popwidth="860px" popheight="500px"}{/popart}
{popart text="Skip for now" article="283" popwidth="720px" popheight="500px"}{/popart}Control popup size per trigger with popwidth and popheight. With the modern theme, plugin defaults can override or enlarge shortcode values.
{popart class="ibtn ibtn-green" text="Compact (500px)" article="285" popwidth="500px" popheight="400px"}{/popart}
{popart class="ibtn ibtn-blue" text="Standard (720px)" article="285" popwidth="720px" popheight="500px"}{/popart}
{popart class="ibtn ibtn-violet" text="Wide (960px)" article="285" popwidth="960px" popheight="600px"}{/popart}Pass a single emoji or symbol as icon when you do not need Font Awesome. Works with text or on its own.
{popart icon="📖" text="Read guide" article="243" popwidth="800px" popheight="500px"}{/popart}
{popart icon="✨" text="What's new" article="244" popwidth="800px" popheight="500px"}{/popart}
{popart icon="💡" text="Pro tip" article="245" popwidth="800px" popheight="500px"}{/popart}
{popart icon="🔗" article="242" popwidth="800px" popheight="500px"}{/popart}Simulate a related-articles module using multiple text triggers in one block.
{popart text="→ Steve Martin — design systems overview" article="245" popwidth="860px" popheight="500px"}{/popart}
{popart text="→ Sandra Clarke — content strategy notes" article="243" popwidth="860px" popheight="500px"}{/popart}
{popart text="→ Richard Moore — performance checklist" article="242" popwidth="860px" popheight="500px"}{/popart}
{popart text="→ Stephane Bernard — accessibility guide" article="244" popwidth="860px" popheight="500px"}{/popart}When hash links are enabled, opening a popup updates the URL (e.g. #popart-285 or a custom slug). Share or bookmark the link — the popup opens automatically on page load. Use hashslug for a custom hash name, or hash="false" to disable for one trigger.
Tip: After clicking the first button, copy the URL from your browser — reloading that URL reopens the same popup.
{popart class="ibtn ibtn-blue" text="Web Design (#popart-285)" article="285" hash="true" popwidth="860px" popheight="500px"}{/popart}
{popart class="ibtn ibtn-green" text="Custom hash slug" article="284" hash="true" hashslug="seo-guide" popwidth="860px" popheight="500px"}{/popart}
{popart text="No hash on this link" article="283" hash="false" popwidth="860px" popheight="500px"}{/popart}Give multiple triggers the same rel value to group them into a gallery. Once a popup is open, use the on-screen arrows or keyboard to move between articles. Each item keeps its own article content.
{popart class="ibtn ibtn-violet" icon="fa-chevron-right" text="Part 1 — Web Design" article="285" rel="text-series" popwidth="900px" popheight="550px"}{/popart}
{popart class="ibtn ibtn-violet" icon="fa-chevron-right" text="Part 2 — SEO" article="284" rel="text-series" popwidth="900px" popheight="550px"}{/popart}
{popart class="ibtn ibtn-violet" icon="fa-chevron-right" text="Part 3 — Social Media" article="283" rel="text-series" popwidth="900px" popheight="550px"}{/popart}With lazy="true", article HTML is not embedded in the page. Content is fetched the first time a popup opens — useful for long articles or pages with many triggers. View page source to confirm the article body is absent until click.
{popart class="ibtn ibtn-orange" icon="fa-cloud-download" text="Lazy load Web Design" article="285" lazy="true" popwidth="860px" popheight="500px"}{/popart}
{popart class="ibtn ibtn-orange" icon="fa-cloud-download" text="Lazy load SEO article" article="284" lazy="true" popwidth="860px" popheight="500px"}{/popart}
{popart text="Eager load (embedded)" article="283" lazy="false" popwidth="860px" popheight="500px"}{/popart}All three features work together: grouped navigation, AJAX loading, and shareable deep links. Open any item, copy the URL, and use arrows to browse the series.
{popart class="ibtn ibtn-dark-blue" text="Chapter 1" article="285" rel="full-feature" lazy="true" hash="true" popwidth="920px" popheight="560px"}{/popart}
{popart class="ibtn ibtn-dark-blue" text="Chapter 2" article="284" rel="full-feature" lazy="true" hash="true" popwidth="920px" popheight="560px"}{/popart}
{popart class="ibtn ibtn-dark-blue" text="Chapter 3" article="283" rel="full-feature" lazy="true" hash="true" popwidth="920px" popheight="560px"}{/popart}The modern popup shows the article title in a header bar by default. Turn it off globally in plugin settings (Article Title Inside Popup → Hide) or per trigger with showtitle="false".
{popart class="ibtn ibtn-blue" text="With header (default)" article="285" popwidth="860px" popheight="500px"}{/popart}
{popart class="ibtn ibtn-green" text="No header (showtitle=false)" article="285" showtitle="false" popwidth="860px" popheight="500px"}{/popart}