Skip to content

Setup Development Environment#

This step-by-step guide will walk you through setting up a development environment for templating with Imperia, starting from the basics and gradually covering all key components.

1. Set Up Imperia Test Installation#

Begin by setting up a running Imperia test installation for development. Follow the instructions provided in the Imperia CMS Installation Documentation.

Upon successful completion, you will have a directory structure under /home/otto/imperia/dev/, which includes the site directory and the htdocs Document-Root. The Imperia CMS will be accessible locally at http://localhost:2404/imp/dashboard.

2. Create an Empty Template File#

Imperia templates are stored in the templates directory within the Site-Directory of your Imperia installation (e.g., /home/otto/imperia/dev/site/templates). These templates can either have a .htms or .perl extension, depending on the templating language you wish to use. For beginners, .htms is the recommended choice.

Within the templates directory, create a new file named myfirsttemplate.htms.

3. Generate a Metafile#

A metafile in Imperia serves as a simplified template for capturing metadata about an Imperia document, such as title, URL, date, etc. While using a metafile is optional, it's often beneficial for organizing document attributes.

To get started, we'll use a sample metafile. Copy the minimal_counter.meta from the sample directory to the metafile directory with the following command:

cp /home/otto/imperia/dev/site/sample/metafiles/minimal_counter.meta /home/otto/imperia/dev/site/metafiles

4. Create a Test Category#

Next, create a category within the Imperia CMS to associate all necessary elements for generating an Imperia document (such as a webpage).

Access the CMS at http://localhost:2404/imp/dashboard and log in with your credentials.

Navigate to Structure --> Categories via the main menu and create a test category by filling in the following information:

  • Name: My first template
  • Directory: /test
  • Filename: index.html
  • Workflow: Default --> Metaedit
  • Metafile: minimal-counter
  • Template: No description available. (myfirsttemplate)

Click on SAVE to finalize the new category.

5. Create an imperia Document#

With your test category established, you can now create an Imperia document. Initially, the generated page will appear blank as the template is yet to be populated with content.

  • Click in the Main Menu click on Documents --> Create New Document
  • (This will bring you into the first Worklflow-Step, in which you can choose the category to create your imperia document.)
  • Choose the Category with the name My first template.
  • Click on CREATE NEW DOCUMENT in the Header-Toolbar.
  • (This will bring you into the Metaedit Workflow-Step)
  • Enter a title for you document, e.g. My first template
  • Click on CONTINUE TO EDIT in the Header-Toolbar.
  • (This will bring you finally into the Edit Workflow-Step, where you can see your template)

6. Edit the imperia Template#

Now you want to enter some template code into your template an see the results in the imperia document.

Use the IDE or Code-Editor of your choice to open the myfirsttemplate.htms template file and copy the following example code into it.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><!--XX-title--></title>
  <link rel="stylesheet" href="/imperia/css/dist/bamboo.min.css">
  <!--IMPERIA:ONECLICKEDIT-->
</head>

<body>
<!--template-description:My first template-->

<!--formstart-->

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

<div class="form-group">
  <label for="IMPERIA:title">Title</label>
  <input name="IMPERIA:title" 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-->

<h1><!--XX-TEXT:title--></h1>
<p><!--XX-TEXT:content--></p>

#ENDIF

<!--formend-->
</body>
</html>

Dont forget to save the changes to the template.

7. Restart the imperia Document#

Now you want to see the changes made in the template to realize in the imperia document.

  • First you have to have to click on Close to close the imperia document
  • (This will bring you to the imperia Desktop, where all drafts live that are currently edited.)
  • (Currently there shold only be one document with the name "My first Template")
  • Click on Edit in the column current step to open the document again.
  • (This will bring you back into the edit step and you shouls now see the Input UI from the template)

Note: After you have done this once, you can just reload the page to show changes, when you have edited the template.

8. Preview the page#

  • Click on Preview in the header toolbar to display how the entered content is rendered.