Changelog — Pop Any Article
Version 3.2.4: 20 October 2026
- Download Key support on the update site (dlid).
Version 3.2.3: 17 October 2026
- Runs on Joomla 5 and Joomla 6 with the Behaviour - Backward Compatibility plugin disabled.
- System plugin now loads through the Joomla service provider.
Version 3.2.2: 29 September 2026
- Classic (legacy) theme can set popup width and height again. Shortcode popwidth and popheight still win. Use auto to size the popup to the article.
- Modern theme stacks text popup links on their own lines.
- Popup title uses h3 in both themes, matching earlier versions.
- Popup max height values such as 85vh are applied as a real height, not 85 pixels.
Version 3.2.1: 12 August 2026
- Editor builder: select an article with Joomla's article picker instead of typing an ID
- Editor builder: two-column field layout for denser, clearer forms
- Copy shortcode button turns green with a tick after a successful copy
- Colorful action buttons in the builder footer and article picker
Version 3.2: 28 June 2026
- Install package now includes both the System plugin and the Editor Button (Editors-XTD) plugin
- Added Modern (2026) popup theme with blur overlay, rounded panel, accent colour, and coordinated open/close animations
- Added Classic (Legacy) theme option to retain the original Fancybox appearance
- Added Editor Button plugin with tabbed shortcode builder, template gallery, and live preview in the article editor
- Added Hash / Deep Links — shareable URL hashes open the matching popup on page load (
hash,hashslug) - Added Lazy Load — article HTML is fetched via AJAX on first popup open (
lazy) - Added Gallery navigation — group shortcodes with the same
relvalue for next/prev arrows and mobile swipe - Added per-shortcode title control with
showtitle="true"orshowtitle="false"to show or hide the article header bar - Expanded opening/closing effects: Zoom, Slide up, and Slide down for the Modern theme
- New admin tabs: Modern Popup Design and Image Trigger & Overlay
- Expanded image overlay options: slide, zoom, blur hover effects, position, speed, and sizing (
imgwidth,imgheight,imgradius) - Added Modern ibtn button styling with 2026 gradient colours for pill trigger buttons
- Fixed popup open/close animation sync between the panel and overlay
- Fixed AJAX cache issue when the same article ID was opened with different
showtitlevalues - Fixed modern theme popup width handling and gallery prev/next arrow positioning
Version 3.1: 15 November 2025
- Compatible with Joomla 6.x
- Added Shortcode Examples tab with 12+ ready-to-use examples and one-click copy functionality
- Fixed page scrolling issue when clicking popup links
- Moved JavaScript initialization code from inline to external JS file for better performance and caching
- Optimized popup creation to prevent duplicate popup divs when same article ID is used multiple times
- Enhanced click event handling to prevent default anchor behavior
- Improved code organization and maintainability
Version 3.0: 17 September 2025
- Complete code refactoring for better performance and maintainability
- Enhanced Joomla 4/5 compatibility with WebAssetManager integration
- Improved shortcode processing with optimized regex handling
- Added smart icon detection supporting Font Awesome 4.x, 5+, Bootstrap Icons, and Unicode characters
- Removed external Font Awesome CDN dependency for better performance
- Enhanced error handling and input sanitization
- Professional code structure with modular methods following Joomla standards
- Fixed icon display issues and improved HTML output formatting
- Optimized asset loading and initialization scripts
- Added comprehensive PHPDoc documentation
Version 2.9: 27 October 2023
- Support Joomla 5 without Backward Compatiblity Plugin
Version 2.8: 03 February 2023
- Backend Parameters modified
- Single installation file for both 3.x and 4.x
Version 2.7: 08 July 2022
- Fixed Joomla 3 installation issue
Version 2.6: 29 March 2022
- Option to add title to the image
Version 2.5: 29 October 2021
- Fixed random error warning issue
Version 2.4: 24 October 2021
- Support Joomla version 4.x
Version 2.3: 05 June 2020
- Removed use of {/popart} from the plugin syntax
Version 2.2: 04 June 2020
- Fixed new line issue upon adding the shortcode
- Page Scroll Issue Fixed
- RGBA Popup Background color selection Added
Version 2.1
- Uses Joomla! Update System
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}Icon triggers with no text — useful for compact toolbars. Set only icon and class.
{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. 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}