Joomla! 4 PHP 7.4 PHP 8.0 PHP 8.1

ochresponsiveimages4

Your website looks great and your template takes care of a lot of styling for the pages and modules. But how do you easily add an accordion (slider) or tabs into your content? Is it possible to use a text snippet and inject that on several pages without the hassle of changing all these pages when the snippet changes? How do you embed PDF's in such a way that they also display correct on mobile devices?

Do you really need multiple plugins for that? Do you need to be a HTML / CSS 'wizard'?

ochFoundation5 plugin let's you easily add the most requested / used Bootstrap5 elements into your web pages!

ochFoundation5 plugin is a plugin that will let you easily add the following Bootstrap5 elements into your web pages using content tags:

  • Alert: Display a styled alert with optional close button
  • Article: insert another article into your content, full or only the intro text. Style and display a read-more button if you need it
  • Badge: insert a badge Like this one into your text
  • Blockquote: add a Quote and optionally a caption for the quote, a quote can have custom classes so you can style them like you want
  • PDFembed: this will display the configured PDF in the Mozilla Foundation PDFjs viewer. Giving you and your visitor a seamless PDF experience on ALL devices!
  • Popover: insert a popover on text in your document and set options like title, how to trigger the display and direction.
  • Snippet: insert predefined text snippets to ease maintenance when that text snippet changes... all references will automatically change as well!
  • Accordions: remember the sliders that you could click open to display text? Accordions are the Bootstrap5 equivalent and are awesome! You can even have nested accordions!
  • Tabs: tabs are a great way to give structure and display only relevant information to your visitors. Bootstrap5 tabs are great but difficult to implement. Not any more! you can even have nested tabs.
  • Comment: a special tag that will not render on the front-page. You can use it to add comments to the text that will show in the editor but not on the web page itself.

"It works with every Bootstrap5 template: a single plugin does where you normally would need a set of plugins to do 'sort of' the same but not all! And the best thing? Everything inserted element is created using template layout files, so you can change them completely to your liking via a template override!"

Accordion!

Requirements

  • Joomla 4.2+
  • PHP 7.4 or Higher
  • 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 integration

Updating of the plugin is integrated with the Joomla! One Click Update manager. In order to activate follow the steps below:

  1. On this site: In the menu [Tools > My Subscriptions] copy your 'Download ID#'
  2. On your site: In the plugin configuration click the [Advanced] tab and paste the 'Download ID#' in the [Download ID]  field
  3. Click [Save] or [Save & Close], You will be prompted with an informational message that your Download ID was changed.

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

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

Format

{article alias="article-alias" class="success" text="text" readmore="Read more!" readmore_class="classname" readmore_link="https://..."}

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

Format

{badge class="success" text="text"}

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

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

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="300" width="600" loading="lazy" title="title for the embedded pdf"}

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

Format

{popover content="content" text="text" title="title" class="class" direction="left" trigger="hover"}

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

Format

{snippet alias="snippet-alias" class="class"}

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.

Format

{accordion-start id="a-id" class="class"}
{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
  • 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"}
{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
  • 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:
      • -

Agency Bundle - 12 months
Agency Bundle - 12 months
Get access to and support for all our Joomla! extensions and more!
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

  •  

Technical support and feature requests via our forum (You need a valid subscription to be able to post)