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:

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.

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. It can be adjusted with a predefined height, background color and transparency as well as a certain padding.

<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'>

Insert picture with link:¶

A linkage was added to the previously inserted logo. It references to the Mapbender website (href='https://mapbender.org') if the logo is clicked on. The link is opened in a new tab because of target='_blank'.

<a href='https://mapbender.org' target='_blank'>
<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'></a>

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 defines font size, font width, font color as well as position 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