Today's badge is: Saturday

"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...

Requirements

Joomla! 4.4 PHP 8.1 PHP 8.2

Joomla! 5.1 Joomla! 5.2 PHP 8.1PHP 8.2 PHP 8.3

  • Bootstrap5 template
  • Basic Joomla! knowledge available between the chair and the keyboard :)

Installation is easy!

  1. Download the plugin
  2. in the Back-end go to menu Extensions > Manage
  3. in the tab [Upload file package] click [browse] and select your downloaded plug-in
  4. 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.

  1. On this site: Go to [Tools > My Account > My Download Keys], and copy your Download ID#.
  2. 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.

Bootstrap5 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.

Format

{alert class="success" close="yes" heading="heading" text="text" layout="prefix" start="date/time" end="date/time"}

Options

  • Required:
    • class: you can set any classes you want, first class must be the class that defines the color, it is appended to the template set class string "alert alert-"
    • text: the text you want to display in the alert
  • 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: see Tab [Generic Tag Parameters]

Format

{article alias="article-alias" class="success" text="text" readmore="Read more!" readmore_class="classname" readmore_link="https://..." layout="prefix" start="date/time" end="date/time"}

Options

  • Required:
    • alias: the alias of the article you want to insert
  • 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
    • 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: see Tab [Generic Tag Parameters]

Format

{badge class="success" text="text" layout="prefix" start="date/time" end="date/time"}

Options

  • Required:
    • class: you can set any classes you want, first class must be the class that defines the color, it is appended to the template set class string "badge bg-"
    • text: the text on the badge
  • Optional:
    • -

Format

{blockquote class="success" quote="text" caption="text" layout="prefix" start="date/time" end="date/time"}

Options

  • Required:
    • quote: the quote
  • Optional:
    • class: you can set any classes you want, 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
    • caption: the caption text for the quote
    • layout, start, end: see Tab [Generic Tag Parameters]

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 :)}

Format

{pdfembed file="/path/to/pdf-file.pdf" class="class" id="123" height="300px" width="600px" loading="lazy" title="title for the embedded pdf" description="short description" clicktoload="true" layout="prefix" start="date/time" end="date/time"}

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
    • 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: see Tab [Generic Tag Parameters]

Format

{popover content="content" text="text" title="title" class="class" direction="left" trigger="hover" layout="prefix" start="date/time" end="date/time"}

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: left, right, top, bottom. When ommited a direction will be chosen automatically by your browser
    • title: The title on the popover
    • trigger: hover, focus, click, or a combination of these, e.g. "hover click" will display the popover both on hover and on click
    • layout, start, end: see Tab [Generic Tag Parameters]

Format

{snippet alias="snippet-alias" class="class" layout="prefix" start="date/time" end="date/time"}

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: see Tab [Generic Tag Parameters]

Format

{accordion-start id="a-id" class="class" layout="prefix" start="date/time" end="date/time"}
{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: see Tab [Generic Tag Parameters]
  • 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 snippet 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.
  • accordion-end
    • Required:
      • id: the id of the accordion, this must be the same as the id for accordion-start
    • Optional:
      • -

Format

{tab-start id="t-id" class="class" layout="prefix" start="date/time" end="date/time"}
{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
      • layout, start, end: see Tab [Generic Tag Parameters]
  • 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> accordion-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!
  • tab-end
    • Required:
      • id: the id of the tab, this must be the same as the id for tab-start
    • Optional:
      • -

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 prefix to use (where the default value is empty). When configured this prefix will be used on all tags automatically, so if you configure for example the layout prefix as 'uikit_', 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

Agency Bundle - 12 months
Agency Bundle - 12 months
Supercharge your Joomla! toolbox with the Agency Bundle! Get all extensions plus 2 Hours of expert support – Subscribe today!
More Information
ochFoundation5 - Plugin - 12 months
ochFoundation5 - Plugin - 12 months
Easily add the most used Bootstrap5 elements into your web pages, without coding!
More Information

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)