ochFoundation5 (system plugin)

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:
    • -