Demo Time!
This is an example of an alertToday's badge is: Sunday
You are visiting this site with a Desktop device
"To Quote or not to Quote.... That is the question"
How do you like this POPOVER
Demo PDF
Just here for demo purposes with the click-to-load enabled
Click to load the embedded PDF...
Responsive Demo PDF
Just here for demo purposes with the click-to-load enabled. This PDF is responsive!
Click to load the embedded PDF...
Demo Local Video
A short (locally stored) video for demo purposes with the click-to-load enabled.
Click to load the embedded Video...
Responsive Demo Local Video
A short (locally stored) video for demo purposes with the click-to-load enabled. Note that the video player is responsive!
Click to load the embedded Video...
Requirements
Joomla! 4.4 PHP 8.1 PHP 8.2
Joomla! 5.1 Joomla! 5.2 Joomla! 5.3 PHP 8.1 PHP 8.2 PHP 8.3
- Bootstrap5 template or UIkit 3 template for the UI Element, all other elements work template independent
- Basic Joomla! knowledge available between the chair and the keyboard :)
Installation is easy!
- Download the plugin
- in the Back-end go to menu Extensions > Manage
- in the tab [Upload file package] click [browse] and select your downloaded plug-in
- click [Upload & Install], wait for the installation to finish
Configuration
- in the back-end go to menu Extensions > Plugins
- search / locate the 'ochFoundation5' system plugin
- open the plugin
- in the tab [Plugin] set status to [Enabled]
- in the tab [Plugin] configure on which components the plugin should be handling the tag replacements, leave empty to use on all components
- in the tab [Snippets] you can create as many snippets as you like
- in the tab [Advanced] configure the advanced options to your liking > look at the tool-tips for information about what each setting does
- click [Save & Close] and you are good to go
Activate Joomla! One Click update and change-log integration
When you install the extension, it will automatically integrate with the Joomla Updater for both updates and change-logs.
On first use, the Joomla updater will prompt you with a 'Download Key is missing!' message.
- On this site: Go to [Tools > My Account > My Download Keys], and copy your Download ID#.
- On your site: Go to System > Update Sites, locate the extension, and paste the Download ID into the 'Download Key' field. Click [Save and Close].
Important:
If you're using this Download ID on a new server, you’ll receive an email to approve the device. Click the link in the email to enable downloads from this server.
Without approval, updates won’t be authorized, and the Joomla updater will display a 401 Unauthorized error when trying to fetch updates.
That’s it! You're all set.
UI elements are inserting in e.g. your article text via {tags}. The {tags} must start on a new line (except popover and badge) and must not contain HTML markup: this will the tag not being parsed.
In below Accordion (created with this plugin :)) are the tags that you can currently use.
Type
UI Element (Bootstrap 5 / UIkit 3)
Format
{alert class="success" close="yes" heading="heading" text="text" layout="prefix" start="date/time" end="date/time" onmobile="true|false" ontablet="true|false" ondesktop="true|false"}
Options
- Required:
- class: you can set any classes you want, first class must be the class that defines the color
- Bootstrap 5: class is appended to the template set class string "alert alert-" e.g. primary, secondary, success, danger, warning, info, light, dark
- UIkit 3: class is appended to the template set class string "uk-alert-" e.g. primary, success, warning, danger
- text: the text you want to display in the alert
- class: you can set any classes you want, first class must be the class that defines the color
- Optional:
- close: "yes" or any text for showing the close button. Omit the close option to not show the close button
- heading: the heading text, omit the heading option to not display a heading in the alert
- layout, start, end, onmobile, ontablet, ondesktop: see Tab [Generic Tag Parameters]
Type
Generic Element, works on all templates!
Format
{article alias="article-alias" | category_alias="category-alias" class="success" text="text" readmore="Read more!" readmore_class="classname" readmore_link="https://..." layout="prefix" start="date/time" end="date/time" onmobile="true|false" ontablet="true|false" ondesktop="true|false"}
Options
- Required:
- alias or category_alias:
- alias: the alias of the article you want to insert
- category-alias: the alias for the category. ochFoundation5 will take a random article from that category taken into account the publish up and down date / times.
- alias or category_alias:
- Optional:
- class: an optional class set on the wrapper <div> around the inserted article, use this for additional styling
- text:
- "text": the complete article > introtext + fulltext
- "introtext": display only the intro text
- "fulltext": display only the full text
- "notext": do not display the article contents, use this in combination with the readmore
- hide_error="true": when the article (alias) is not found or unpublished, or when there are no articles to display using category_alias, an error is displayed: with this setting you can supress this error
- readmore: Read more text on the link to the article
- readmore_class: class to add to the readmore link
- readmore_link: a custom readmore link, when not set the readmore link links to the article
- layout, start, end, onmobile, ontablet, ondesktop: see Tab [Generic Tag Parameters]
Type
UI Element (Bootstrap 5 / UIkit 3)
Format
{badge class="success" text="text" layout="prefix" start="date/time" end="date/time" onmobile="true|false" ontablet="true|false" ondesktop="true|false"}
Options
- Required:
- class: you can set any classes you want, first class must be the class that defines the color
- Bootstrap 5: class is appended to the template set class string "badge bg-" e.g. primary, secondary, success, danger, warning, info, light, dark
- UIkit 3: class is appended to the template set class string "uk-label-" e.g. default, success, warning, danger
- text: the text on the badge
- class: you can set any classes you want, first class must be the class that defines the color
- Optional:
- layout, start, end, onmobile, ontablet, ondesktop: see Tab [Generic Tag Parameters]
Type
UI Element (Bootstrap 5 / UIkit 3)
Format
{blockquote class="success" quote="text" caption="text" layout="prefix" start="date/time" end="date/time" onmobile="true|false" ontablet="true|false" ondesktop="true|false"}
Options
- Required:
- quote: the quote
- Optional:
- class, you can set any classes you want:
- Bootstrap 5: the classes are added to the <figure> element in which the <blockquote> resides. so set to e.g. "text-end" to right align the quote, or "mt-5 mb-5" to add margins on top and bottom
- UIkit 3: the classes are added to the <blockquote>
- caption: the caption text for the quote
- layout, start, end, onmobile, ontablet, ondesktop: see Tab [Generic Tag Parameters]
- class, you can set any classes you want:
Type
Generic Element, works on all templates!
Format
{comment: this is a comment that will show in the editor but will be omitted when displaying the page, you can use this for adding... comments :)}
Type
Generic Element, works on all templates!
Format
{pdfembed file="/path/to/pdf-file.pdf" class="class" id="123" responsive="true" height="333" width="592" loading="lazy" title="title for the embedded pdf" description="short description" clicktoload="true" layout="prefix" start="date/time" end="date/time" onmobile="true|false" ontablet="true|false" ondesktop="true|false"}
Options
- Required:
- file: path to the PDF, local or remote
- Optional:
- class: you can set any classes you want, the classes are added to the <div> wrapper element in which the PDF resides.
- id: a unique id, when ommited it will be generated for you
- height: the preset height of the pdf e.g. 560 or 75%
- width: the preset width of the pdf e.g. 100% or 360
- loading: "lazy" to set the PDF as lazy loading (will be loaded just before the PDF will get into the view of the visitor
- title: a title you set for the PDF
- description: a short description used on the clicktoload placeholder
- responsive: the PDF will be made responsive / full width regardless of the device it is displayed on
- clicktoload: when set to true, a 'clicktoload' placeholder will be displayed (with title and description) that prevents direct loading of the pdf. When the visitor clicks the placeholder, the pdf will load and display: saving bandwidth, preserving privacy and minimizing page load time!
- layout, start, end, onmobile, ontablet, ondesktop: see Tab [Generic Tag Parameters]
Type
UI Element (Bootstrap 5 / UIkit 3)
Format
{popover content="content" text="text" title="title" class="class" direction="left" trigger="hover" layout="prefix" start="date/time" end="date/time" onmobile="true|false" ontablet="true|false" ondesktop="true|false"}
Options
- Required:
- content: The content that will be shown in the text that will get the popover functionality
- text: the text in the popover itself
- Optional:
- class: you can set any classes you want, the classes are added to the <a> element that defines the popover.
- direction:
- Bootstrap 5: left, right, top, bottom. When omitted a direction will be chosen automatically by your browser
- UIkit 3: top, top-left, top-right, bottom, bottom-left, bottom-right, left, right. When omitted top will be set.
- title: The title on the popover [Bootstrap 5 only]
- trigger: hover, focus, click, or a combination of these, e.g. "hover click" will display the popover both on hover and on click [Bootstrap 5 only]
- layout, start, end, onmobile, ontablet, ondesktop: see Tab [Generic Tag Parameters]
Type
Generic Element, works on all templates!
Format
{snippet alias="snippet-alias" class="class" layout="prefix" start="date/time" end="date/time" onmobile="true|false" ontablet="true|false" ondesktop="true|false"}
Options
- Required:
- alias: The alias of the snippet you configured in the plugin tab Snippets
- Optional:
- class: you can set any classes you want, the classes are added to the <div> wrapper element in which the snippet is displayed.
- layout, start, end, onmobile, ontablet, ondesktop: see Tab [Generic Tag Parameters]
Type
Generic Element, works on all templates!
Format
Options
- Required:
- src: path to the video file; local or remote
- Optional:
- class: you can set any classes you want, the classes are added to the <div> wrapper element in which the Video player resides.
- id: a unique id, when ommited it will be generated for you
- height: the preset height of the pdf e.g. 560 or 75%
- width: the preset width of the pdf e.g. 100% or 360
- title: a title you set for the Video
- description: a short description used on the clicktoload placeholder
- poster: path to an image shown as placeholder in the Video player
- responsive: the Video player will be made responsive / full width regardless of the device it is displayed on
- autoplay: set to autoplay the video upon page load (true|false)
- preload: Should the video be preloaded on page load (none|metadata|auto)
- loop: When the video finished should it start playing from the beginning (true|false)
- muted: Should the Video player initially be muted (true|false)
- clicktoload: when set to true, a 'clicktoload' placeholder will be displayed (with title and description) that prevents direct loading of the video. When the visitor clicks the placeholder, the video player will load and display: saving bandwidth, preserving privacy and minimizing page load time!
- layout, start, end, onmobile, ontablet, ondesktop: see Tab [Generic Tag Parameters]
Type
UI Element (Bootstrap 5 / UIkit 3)
Format
{accordion-start id="a-id" class="class" layout="prefix" start="date/time" end="date/time" onmobile="true|false" ontablet="true|false" ondesktop="true|false"}
{accordion-item id="a-id" title="title 1" show="show" class="class"}
...Text shown in accordion 1...
{accordion-item id="a-id" title="title 2" class="class"}
...Text shown in accordion 2...
{accordion-end id=a-id"}
Structure
An accordion exists of an {accordion-start}, one or multiple {accordion-item}, and {accordion-end} tag. Each (set of) accordion(s) on a page must have a unique id that you use for the accordion tags.
Accordions can be nested: you can create an second accordion within the {accordion-item} that will function as the parent for the nested accordion. The nested accordion must have its own (unique) id!
Options
- accordion-start
- Required:
- id: the id of the accordion, this must be unique on the page
- Optional:
- class: you can set any classes you want, the classes are added to the <div> accordion element
- layout, start, end, onmobile, ontablet, ondesktop: see Tab [Generic Tag Parameters]
- Required:
- accordion-item
- Required:
- id: the id of the accordion, this must be the same as the id for accordion-start
- title: the (clickable) title which displays and toggles the accordion open / closed
- Optional:
- show: you can set any classes you want, the classes are added to the <div> wrapper element in which the accordion-item is displayed.
- class: you can set any classes you want, the classes are added to the <div> accordion-item element, this allows e.g. for setting different background colors etc.
- Required:
- accordion-end
- Required:
- id: the id of the accordion, this must be the same as the id for accordion-start
- Optional:
- -
- Required:
Type
UI Element (Bootstrap 5 / UIkit 3)
Format
{tab-start id="t-id" class="class save-tab-state" layout="prefix" start="date/time" end="date/time" onmobile="true|false" ontablet="true|false" ondesktop="true|false"}
{tab-item id="t-id" title="tab title 1.1" class="active"}
...Text in tab 1.1...
{tab-item id="t-id" title="tab title1.2"}
...Text in tab 1.2...
{tab-end id="t-id"}
Structure
A tab exists of an {tab-start}, one or multiple {tab-item}, and {tab-end} tag. Each (set of) tab(s) on a page must have a unique id that you use for the tab tags.
Tabs can be nested: you can create an second tab within the {tab-item} that will function as the parent for the nested tab. The nested tab must have its own (unique) id!
Options
- tab-start
- Required:
- id: the id of the tab, this must be unique on the page
- Optional:
- class: you can set any classes you want, the classes are added to the <div> tab element. Note: use class "save-tab-state" to add the active tab as query parameter on the browser URL. This way when sharing the URL the last active tab will be automatically selected!
- layout, start, end, onmobile, ontablet, ondesktop: see Tab [Generic Tag Parameters]
- Required:
- tab-item
- Required:
- id: the id of the tab, this must be the same as the id for tab-start
- title: the (clickable) tab-label which displays / opens the tab
- Optional:
- class: you can set any classes you want, the classes are added to the <div> tab-item element, this allows e.g. for setting different background colors etc.
Set class="active" to set the focus and open state on this tab-item. Use the active class only on one tab-item in the set of ta-items!
- class: you can set any classes you want, the classes are added to the <div> tab-item element, this allows e.g. for setting different background colors etc.
- Required:
- tab-end
- Required:
- id: the id of the tab, this must be the same as the id for tab-start
- Optional:
- -
- Required:
Every tag has a set of optional parameters that you can set.
Every tag has it's own layout file. The layout files are based on the tag name; so the tag 'alert' uses the layout file 'alert.php'.
In the configuration of ochFoundation5 you can configure a default layout to use (where the default value is bootstrap5). When configured this layout will be used on all tags automatically, so if you configure for example the layout as 'uikit3', the tag 'alert' will now use the layout file 'uikit/alert.php'. When that file is not found an error is written to the log file and the tag is omitted (not displayed).
If you only want to use a specific layout override you created for one tag, you can use the (optional) tag parameter 'layout'. So if you have created a specific 'awesome/alert.php' and you want that layout file for one specific alert, you can configure that alert with the parameter 'layout="awesome"' all other tags will use the default that is configured in the plugin.
like this:
{alert class="success" text="This is my awesome alert" layout="awesome"}
There are times that you do not want to display an element, e.g. when running a campaign, or displaying a limited time coupon code on your site.
This is all possible with the 'start' and 'end' tag parameters.
With these parameters you can configure the 'start' parameter with the date/time the element should start displaying and the 'end' parameter with the date/time that the element should not display anymore.
So if you have a for example an offer (shown via e.g. a snippet) that will expire on January 31th, 2023, you can set it like this:
{snippet alias="offer-january" class="specialoffer" end="February 1st, 2023"}
and if you have a special offer that should only be displayed on Mondays, you can do that as follows:
{snippet alias="offer-monday" class="specialoffer" start="monday"}
So what date / time string can I use in the 'start' and 'end' parameters?
For parsing the entered date / time string I use a PHP built-in function: strtotime()
Important to understand that the entered 'start' and 'end' strings are compared to 'strtotime("now")', where 'start' activates the tag when smaller then 'now' and 'end' deactivates the tag when smaller then 'now'.
You can set any combination of 'start' and 'end':
- only 'start' will display the tag when 'start' < 'now'
- only 'end' will display the tag until 'end' < 'now'
- 'start' and 'end' will display the tag when 'start' < 'now' and 'end' > 'now'
- none set will always display the tag
Device-Specific Display in ochFoundation5
ochFoundation5 allows you to control the visibility of rendered elements based on the visitor’s device type. Unlike CSS-based methods, ochFoundation5 uses real device detection for more accurate results.
Supported Device Types
You can target three device types:
- Mobile
- Tablet
- Desktop
Usage
You can use the following tag parameters to control visibility:
- onmobile="true|false"
- ontablet="true|false"
- ondesktop="true|false"
By default, if a parameter is omitted, it is assumed to be "true" — meaning the element will be shown on that device type.
Example:
{snippet alias="offer-mobile" class="specialoffer" ondesktop="false"}
This element will be shown on mobile and tablet devices (since onmobile and ontablet are not specified and default to true) but will not display on desktops.
Caching Considerations
If your website uses caching, be aware that device-based rendering can be affected:
- When the plugin is triggered on the content event, the output is cached.
- Joomla's cache (when configured) can distinguish between desktop and mobile, but not between mobile and tablet.
- To ensure correct behavior across devices, consider setting the plugin to trigger on the system event instead of content event.
New in Version 2.0
The concept of Injectors is introduced in version 2.0. It adds powerful search and replace functionality enabling you to e.g. automate the placement of snippets on any location on your webpages!After enabling the Injector functionality, you are presented with an Injector form that consists of the following configuration settings:
- Enable: you can enable or disable this particular injector
- Injector Include: configure the component.view to enable this Injector on. Important: the Generic Include option on the basic tab of the plugin takes precedence!
- Injector Exclude: configure the component.view to disable this Injector on. Important: the Generic Exclude option on the basic tab of the plugin takes precedence!
- NEW! Enable On: select the device to enable / disable this injector on > mobile / tablet / desktop
- NEW! URL Regex: Enter the regex to match the URL with to enable this Injector on.
- Event Trigger: Here you can select 'Content' or 'System':
- Content: the Injector will work on the content (e.g. the contents of an article) and the result will be cached (if caching is enabled on your site)
- System: The inject will work on the whole (HTML) page rendered before this is displayed to the visitor. It will NOT be cached.
- Predefined Position: [only for Event trigger = content] select to automatically inject on predefined positions: top, bottom, after first image, after first paragraph
- Match Regex: this is where you configure your 'search' in the form of a regex. E.g. /<p>/i will search in your content for the <p> element case-insensitive
- Content to Inject: this is what will be injected into the configured position / at the Match Regex search result. This can be anything including tag that will be handled by this plugin
- Action: here you configure how to inject the content for The Match Regex sear result: Before the Match, Replace Match, or After the Match. So if your Content to Inject is <p class="test"> and you select 'Replace Match' for Match Regex '/<p>/i' then all <p> elements in your content will be replaced with <p class="test">
- Occurrence: Here you can configure which occurrence of the Match Regex search result to handle. 0 is all, 3 is the third occurence. So following the example above, when you configure here: 3 then only the third <p> will be replaced with <p class="text">
When you have multiple Injectors configured, note that they will be executed in the listed order. You can reorder the injectors.
Tips & Tricks
- Starting with version 1.4.2 ochFoundation5 uses the latest modularized PDFjs scripts. These scripts have a file extension of .mjs. If the pdf is not loading the the browser and in the browser console you see the following error:
Loading module from “[yourdomain]/plugins/system/ochfoundation5/vendor/pdfjs/build/pdf.mjs” was blocked because of a disallowed MIME type (“text/octet-stream”).
Then you are likely running an old version of apache and need to add the following code to your .htaccess:<IfModule mod_mime.c>AddType text/javascript .mjs</IfModule>
More information can be found here: https://developer.mozilla.org/en-US/docs/Learn/Server-side/Configuring_server_MIME_types
Technical support and feature requests via our forum (You need a valid subscription to be able to post)
Still hand-coding complex HTML just to create a simple alert, badge or popover in your Joomla articles? Gave up on adding nested tabs or accordions in your website?
It’s time to simplify your workflow.
I’m excited to introduce ochFoundation5—a powerful Joomla plugin that lets you add beautiful UI elements like alerts, badges, tabs and accordions directly into your content using simple, intuitive tags.
Whether your template is using Bootstrap 5 or Yoothemes UIkit, ochFoundation5 renders clean, responsive components—without touching a single line of HTML or CSS.
🛠️ In this video, I’ll show you how to install ochFoundation5 together with the free ochElements editor plugin and use them to effortlessly enhance your site’s design—right from the Joomla editor.
Let’s get started and see how easy it is to build modern interfaces with ochFoundation5!
Tired of manually adding the same content across dozens—or even hundreds—of Joomla articles?
Let ochFoundation5 do the heavy lifting for you with Injectors.
In this video, I’ll show you one of the most advanced and powerful features in ochFoundation5: Injectors—your new secret weapon for automating content placement across your Joomla site.
Injectors let you define where and when content should be injected—based on smart rules like regular expressions, specific positions in the content, device type, and even include or exclude certain pages.
💡 Want to show a call-to-action after the first paragraph of every article on desktop only? With Injectors, you set it once—and it applies automatically everywhere.
No more editing every article. No more forgetting to update content manually. Just precise, rule-based control that scales with your site.
Let’s dive in and see how Injectors can save you hours of work—and keep your Joomla site consistent, dynamic, and fully under control.
Want to reuse Joomla articles anywhere across your site—without copying and pasting?
Say hello to the Articles tag in ochFoundation5.
In this video, I’ll show you how to use the Articles tag to pull entire articles—or even a random article from a specific category—right into your Joomla content.
It works just like snippets, but instead of using predefined text, you’re reusing actual Joomla articles. Perfect for creating dynamic call-to-actions, promotional blocks, or highlighting key content throughout your site.
🎯 Update the article once, and every reference updates automatically—keeping your site consistent and your message sharp.
Let’s explore how the Articles tag in ochFoundation5 can help you build smarter, more engaging Joomla websites with less effort.
Ever noticed how embedded PDFs work fine on desktops—but force mobile users to download the file instead of displaying it?
Worried about what a big PDF will do to your site’s performance?
That’s where the pdfembeds tag in ochFoundation5 makes all the difference.
In this video, I’ll show you how to embed PDFs in your Joomla site that look great and work seamlessly across all devices—thanks to the power of Mozilla’s PDF.js script.
No downloads, no extra steps—just a smooth, in-page viewing AND editing experience whether you're on a phone, tablet, or desktop.
🚀 And with the click-to-load option, the PDF is only downloaded when your visitor actually wants to view it—giving you faster page loads and better performance: Skyrocketing your page SEO score!
Let’s take a look at how easy it is to create responsive, user-friendly PDF embeds with ochFoundation5.
Tired of manually adding the same content across dozens—or even hundreds—of Joomla articles?
Let ochFoundation5 do the heavy lifting for you with Injectors.
In this video, I’ll show you one of the most advanced and powerful features in ochFoundation5: Injectors—your new secret weapon for automating content placement across your Joomla site.
Injectors let you define where and when content should be injected—based on smart rules like regular expressions, specific positions in the content, device type, and even include or exclude certain pages.
💡 Want to show a call-to-action after the first paragraph of every article on desktop only? With Injectors, you set it once—and it applies automatically everywhere.
No more editing every article. No more forgetting to update content manually. Just precise, rule-based control that scales with your site.
Let’s dive in and see how Injectors can save you hours of work—and keep your Joomla site consistent, dynamic, and fully under control.