HTML

This element allows the integration of HTML anywhere in an application. Figures, links or e.g. texts can be inserted. The following illustration shows the integration of a Mapbender logo in footer, toolbar and sidepane:

../../../_images/html_preview_example1.png

The following variables can be integrated in HTML:

  • “application” (Entity Application)

  • “entity” (Entity HTML-Element)

Configuration

This element has to be integrated in the backend.

../../../_images/html_element1.png

  • Title: Title of the element. The title will be listed in “Layouts”.

  • Content: Content of the HTML-element. The variables “application” and “entity” are available.

  • Classes: You can refer to a CSS class for the HTML element. The class can be defined in the css editor.

Configuration examples

Insert picture:

In this example, the Mapbender Logo was integrated in the sidepane (<img src='https://mapbender.org/fileadmin/mapbender/resources/images/logos/Mapbender-Logo.svg' />). It can be adjusted with a predefined height (height='60px'), background color and transparency (background-color:rgb(240, 240, 240, 0.9)) as well as a certain padding (padding:10px). These configurations were defined as styling through style=.

<img src='https://mapbender.org/fileadmin/mapbender/resources/images/logos/Mapbender-Logo.svg'
height='60px' style='background-color:rgb(240, 240, 240, 0.9); padding:10px'>
../../../_images/html_example_logo1.png

Variables & HTML-Element

Several variables can be integrated in the HTML-Element.

  • Variable: “application.title”

This variable allows the integration of the application title. In the example, this corresponds to “Konfigurationsbeispiele”.

The HTML-Code could look like this:

<b><span style="font-size:25px;color:#b6dd18;margin-right:50vw"> Anwendung {{ application.title }} </span></b>

The application title is defined through {{ application.title }}. The term “Anwendung” is an addition and will display independently from the actual title. The style-block (style=) defines font size (font-size:25px), font width (<b></b>), font color (color:#b6dd18) as well as position (margin-right:50vw) of the title.

The result for the configuration example looks like this:

../../../_images/html_example_application_title1.png

  • Variable: app.user.username

This variable displays the name of the active user:

<p>Username: {{ app.user.username }}</p>

In this example, the user name is displayed in the toolbar:

../../../_images/html_example_user_name1.png

  • Variable: group.title

The group of a user cannot be defined in a single expression, because Twig only supports the map-filter in higher versions. In order to integrate this variable, a loop will be used:

{% for index, group in app.user.groups %}
    <p>Group #{{ index }}: {{ group.title }}</p>
{% endfor %}

In this example, index and group name are displayed in the toolbar:

../../../_images/html_example_group_name1.png

  • Variable: “entity”

The variable { entity } displays the ID and { entity.title }, which displays the title of the HTML-element.

In the following, the variable { entity.title } was integrated with the text addition “HTML-Element”. The Styling parameters correspond to those of the example with application.title. Text additions, variables and position were simply adjusted for entity.title.

<b><span style=“font-size:25px;color:#b6dd18;margin-right:60vw“> HTML-Element
{{ entity.title }} </span></b>

These variables could look as follows:

../../../_images/html_example_entity_title1.png

Refer to a twig file

You can refer to a twig file in the Content area. Please note that the twig file has to contain valid HTML.

../../../_images/html_configuration_include_twig1.png

YAML-Definition:

This template can be used to insert the element into a YAML application.

title: 'HTML-Element'
class: Mapbender\CoreBundle\Element\HTMLElement
content: <p>Hello, World!</p><p>Application: {{ application.title |trans }}</p> # The variables "application" and "entity" are available.
classes: my-special-css-class