Creating a Basic Template#

In this chapter, we'll walk you through the process of creating a simple Imperia template. This basic template will include elements such as a headline, header image, and a body of text. Let's break down a simple Imperia template:

<!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:Artikel Minimal-->

<!--formstart-->

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

<div>
  <label for="IMPERIA:headline">Überschrift</label>
  <input name="IMPERIA:headline" id="headline"></input>
</div>

<div>
  <label for="IMPERIA:headline">Titelbild</label>
  <img src="IMPERIA:header_image" width="800" height="600"></img>
</div>

<?imperia iwe2
id: main_text
toolbar: Imperiaminimal
?>

</main>

#ELSE <!--Savemode-->
<main>
<h1><!--XX-TEXT:headline--></h1>

<div>
<img src="<!--XX-OBJ:header_image-->"></img>
</div>

<!--XX-main_text-->
</main>
#ENDIF

<!--formend-->

</body>
</html>

Setting Up the HTML Structure#

Every HTML document begins with a declaration of the document type (<!DOCTYPE html>) and the opening <html> tag. In this case, the language attribute (lang="de") is set to German.

The <head> section of the document includes essential meta tags for character encoding (UTF-8) and viewport settings (essential for responsive design). It also includes the document title, which is filled dynamically using the  placeholder. The stylesheet link references a CSS file located in the /imperia/css/dist/ directory.

The  tag enables the OneClickEdit feature in Imperia, allowing users to edit content directly from the published page.

Defining the Template#

The  line describes the template. This is particularly useful when working with multiple templates, as it provides a quick overview of the template's purpose or structure.

Setting Up the Form#

The  and  tags encapsulate the main body of the template, which is divided into two sections by an #IF condition. This condition checks whether the template is in edit mode or save mode.

Edit Mode#

In edit mode, the template displays form fields for inputting content. The Überschrift field captures the headline, while the Titelbild field is used to specify an image to be used as the header image. The dimensions of the image are defined directly in the img tag.

The <?imperia iwe2 id: main_text toolbar: Imperiaminimal ?> block enables the Imperia inline editor, providing a WYSIWYG interface for authors to input and format the main body of text.

Save Mode#

In save mode, the template displays the final page as it will appear when published. The headline, header image, and main text are all populated dynamically from the content inputted in edit mode. Note how the variables used in the input fields and the content entered in edit mode is now reflected on the webpage during save mode. The placeholders are replaced by the actual content. Here's how it works:

The headline entered in edit mode is fetched with the  tag and placed within the <h1> tags to serve as the main title of the page.
The image URL specified during the editing phase is fetched with the  tag and used as the src attribute of the img tag. This displays the chosen image on the webpage.
The main text, inputted and formatted with the Imperia inline editor, is fetched with the  tag and displayed in the main section of the page.

Closing the Form and HTML Document#

Once the content for both the edit mode and save mode has been defined, the form is closed with the  tag. This signifies the end of the main body of the template.

The HTML document is then closed with the closing </body> and </html> tags.

This basic template serves as a great starting point for creating Imperia templates. It provides a simple yet effective structure that can be easily expanded upon to accommodate more complex layouts and additional content types.