Dynamic Content Elements#

In this chapter, we delve into the concept of flex modules, an advanced feature allowing developers to design dynamic content elements. Editors can then effortlessly insert these elements into an Imperia template. Flex modules not only offer a high level of flexibility and interactivity but also facilitate the creation of a broad range of content types. This feature significantly simplifies dynamic content management.

Introducing Flex Modules#

At their core, flex modules are reusable components that developers can insert into a web page template. These modules can encapsulate various content types, such as text, images, videos, and even complex elements like forms or interactive features. This versatility enables developers to build a library of modules that editors can leverage to construct rich, engaging web pages without having to code.

A Simple Flex Module#

To provide a clearer picture of flex modules, let's examine a basic example and its invocation in a template.

AUTHOR: pirobase imperia GmbH
DESCRIPTION: Simple Text
HELPTEXT: Simple Text
TAG: Article
LOAD: AJAX

#IF (<!--XX-editmode-->)
<div class="formgroup">
    <label for="IMPERIA:content" class="form-label">Text</label>
    <textarea name="IMPERIA:content" id="IMPERIA" rows="10" class="form-control"></textarea>
    <small class="form-text text-muted">Enter the content here</small>
</div>

#ELSE <!--savemode-->
<div class="text-module">
    <p><!--XX-FLEX-content--></p>
</div>
#ENDIF

A flex module begins with metadata that outlines its functionality and authorship. The DESCRIPTION serves as the flex module's title, and the HELPTEXT provides a brief summary of the module's purpose. Developers can categorize the module using the TAG field. The LOAD field, typically set to AJAX, indicates that the module's content will be fetched asynchronously when the web page loads.

The flex module's functionality is defined within two sections, similar to an Imperia template: the edit mode and the save mode.

In our simple text module, the edit mode provides a form for inputting text content.

#IF (<!--XX-editmode-->)
<div class="formgroup">
    <label for="IMPERIA:content" class="form-label">Text</label>
    <textarea name="IMPERIA:content" id="IMPERIA" rows="10" class="form-control"></textarea>
    <small class="form-text text-muted">Enter the content here</small>
</div>

Conversely, the save mode outlines how the inputted content will be displayed on the web page. It incorporates placeholders (marked as ) that will be substituted with the actual content when the page is rendered.

#ELSE <!--savemode-->
<div class="text-module">
    <p><!--XX-FLEX-content--></p>
</div>
#ENDIF

The combination of metadata, edit and save mode sections, and placeholders transforms flex modules into a highly versatile tool for managing dynamic content on a website.

Invoking the Flex Module in a Template#

After defining a flex module, you can invoke it in a template using a unique syntax. Here's how you might insert the simple text module into a main section of a template:

<!--formstart-->

#IF(<!--XX-editmode-->)

<!--INSERT_FLEXMODULE:INDEX=1:DND=1:JS_OPERATIONS=1-->

#ELSE <!--Savemode-->

<!--INSERT_FLEXMODULE:INDEX=1-->

#ENDIF

<!--formend-->

In this example, the INSERT_FLEXMODULE tag instructs the system to insert a UI component at this point in the template for selecting the flex modules. The INDEX=1 attribute uniquely identifies this flex module invocation. The DND=1 and JS_OPERATIONS=1 attributes enable drag-and-drop functionality and JavaScript operations, respectively, within the editor interface.

Creating Flex Modules#

In the previous chapters, we have seen how imperia templates are created and populated with content. However, in most cases you want more flexibility in the sequence of content elements than a static template can offer.

Flex modules allow you to convert static parts of your template into dynamic content elements that can be reused across different pages or sections of your website. By doing so, you can greatly enhance the flexibility of your templates and the efficiency of your content management process.

Let's revisit some of our previous examples and see how we can transform them into dynamic flex modules.

Heading and Text#

AUTHOR: pirobase imperia GmbH
DESCRIPTION: Heading and Text
HELPTEXT: Simple heading and content element
TAG: Article
LOAD: AJAX

#IF (<!--XX-editmode-->)
<div class="form-group">
  <label for="IMPERIA:heading">Heading </label>
  <input name="IMPERIA: heading" type="text" id="IMPERIA" class="form-control">
</div>

<div class="form-group">
  <label for="IMPERIA:content">Content</label>
  <textarea name="IMPERIA:content" id="IMPERIA" class="form-control"></textarea>
</div>

#ELSE <!--savemode-->

<h2><!--XX-FLEX-TEXT:heading--></h2>
<p><!--XX-FLEX-TEXT:content--></p>

#ENDIF

This flex module allows content editors to specify a heading and content. The heading will be displayed as a heading (h2), and the content will be displayed as a paragraph (p) when the page is rendered. The  and  placeholders are replaced with the actual heading and content entered by the content editors.

Rich Text Editor#

Flex modules also allow you to integrate more complex elements such as a rich text editor. The editor provides content editors with a suite of tools for formatting and structuring their text, without needing to write any HTML code themselves.

Here is an example of a flex module with a rich text editor:

AUTHOR: pirobase imperia GmbH
DESCRIPTION: Text
HELPTEXT: Rich Text Editor 
TAG: Article
LOAD: AJAX

#IF (<!--XX-editmode-->)


<?imperia iwe2
  id=content_<!--FLEX_INDEX-->_<!--FLEX_ID-->
  toolbar=Imperiaminimal
?>


#ELSE

<!--XX-FLEX-content-->

#ENDIF

The <?imperia iwe2?> tag integrates the Imperia's rich text editor into the flex module. The id attribute is used to uniquely identify the editor instance, where  and  are placeholders that get replaced with the actual index and ID of the flex module instance.

The toolbar attribute specifies the toolbar configuration for the editor. In this example, we're using the Imperiaminimal configuration, which provides a minimal set of editing tools.

In the save mode, the  placeholder is used to insert the content entered in the rich text editor into the web page when it's rendered.

Simple Image#

Images are essential to creating engaging content. Flex modules can also be used to incorporate images into your web pages. Here's a simple example of an image flex module:

AUTHOR: pirobase imperia GmbH
DESCRIPTION: Image
HELPTEXT: simple image without resizing
TAG: Article
LOAD: AJAX

#IF(<!--XX-editmode-->)

<div>
  <img src="IMPERIA:image"></img>
</div>

#ELSE <!--Savemode-->

<div>
<img src="<!--XX-FLEX-image-->"></img>
</div>

#ENDIF

In this flex module, the image URL is set in the edit mode via the src attribute in the img tag. The IMPERIA:image is a placeholder that gets replaced with the URL of the image file that the content editor selects.

In the save mode, the  placeholder is used to insert the image URL into the web page when it's rendered. This makes the image appear on the web page.