templates/areas/hero/view.html.twig line 1

{% block content %}

    {# images #}
    {% set images = pimcore_relations("images", {
        "types": ["asset"],
        "subtypes": {
            "asset": ["image"]
        }
    }) %}

    {# title #}
    {% set title = pimcore_textarea('title', {
        'placeholder': 'Titel',
        'nl2br': true
    }) %}

    {# large #}
    {% set large = pimcore_checkbox('large') %}

    {% if large.checked %}
        {% set thumbS = '800x400' %}
        {% set thumbM = '1200x600' %}
        {% set thumbL = '2000x900' %}
        {% set thumbXL = '2000x800' %}

        {% set heroClass = 'section-hero -frontpage' %}
    {% else %}
        {% set thumbS = '800x300' %}
        {% set thumbM = '1200x450' %}
        {% set thumbL = '2000x600' %}
        {% set thumbXL = '2000x550' %}

        {% set heroClass = 'section-hero' %}
    {% endif %}

    {# random #}
    {% set random = random() %}

    {% if editmode %}
        <div class="editmode grid-x">
            <div class="cell toggler-title">
                <div data-toggle="settings-{{ random }}">Hero</div>
            </div>
            <div class="cell toggler-content" id="settings-{{ random }}" data-toggler=".is-active">
                <div class="toggler-content-panel">
                    <div class="grid-x grid-padding-x">

                        <div class="cell">
                            <label>Bilder</label>
                            {{ images|raw }}
                        </div>

                        <div class="cell">
                            <label>Titel</label>
                            {{ title|raw }}
                        </div>

                        <div class="cell">
                            <label>{{ large|raw }} Grosser Hero</label>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    <section class="{{ heroClass }}">

        <div class="slick slick-slider-single-fade-autoplay">
            {% for image in images %} 
                <div class="hero-slide">
                    <div class="image-container">
                        <img src="/static/assets/img/shim.png" data-interchange="
                            [{{ image.thumbnail(thumbS) }}, small], 
                            [{{ image.thumbnail(thumbM) }}, medium], 
                            [{{ image.thumbnail(thumbL) }}, large], 
                            [{{ image.thumbnail(thumbXL) }}, xlarge]
                        " alt="{{ title.data }}" class="hero-wrapper">
                    </div>
                </div>
            {% endfor %}
        </div>

        {% if title.data %}
            <div class="caption">
                <div class="nav-wrap">
                    <div class="grid-x">
                        <div class="cell">
                            <div class="panel">

                                <p class="show-for-xmedium">
                                    {# with nl2br #}
                                    {{ title.data|nl2br }}
                                </p>

                                <p class="hide-for-xmedium">
                                    {# without nl2br #}
                                    {{ title.data }}
                                </p>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

    </section>

{% endblock %}