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

{% block content %}

    {# is hoch #}
    {% set isHoch = pimcore_checkbox('isHoch', {
        'reload': true
    }) %}

    {# image left, text right #}
    {% set imageLeft = pimcore_checkbox('imageLeft', {
        'reload': true
    }) %}

    {% if imageLeft.checked %}
        {% set class = 'odd' %}
        {% set order1 = 'small-order-1 xmedium-order-1' %}
        {% set order2 = 'small-order-2 xmedium-order-2' %}
    {% else %}
        {% set class = 'even' %}
        {% set order1 = 'small-order-1 xmedium-order-2' %}
        {% set order2 = 'small-order-2 xmedium-order-1' %}
    {% endif %}

    {# image #}
    {% set imageLarge = pimcore_image('imageLarge', {
        'reload': true
    }) %}

    {% set imageSmall = pimcore_image('imageSmall', {
        'reload': true
    }) %}

    {# anchor #}
    {% set anchor = pimcore_input('anchor', {
        'placeholder': 'Anker',
        'width:': 200
    }) %}

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

    {# title #}
    {% set title = pimcore_input('title', {
        'placeholder': 'Titel'
    }) %}

    {# link #}
    {% set link = pimcore_link('link') %}

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

    {% if editmode %}
        <div class="editmode grid-x">
            <div class="cell toggler-title">
                <div data-toggle="settings-{{ random }}">Teaser</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="-auto cell">
                            <label>Anker:</label>
                            {{ anchor|raw }}
                        </div>

                        <div class="-auto cell">
                            <label>{{ imageLeft|raw }} Bild links, Text rechts</label>
                        </div>

                        <div class="-shrink cell -text-right">
                            <label>{{ isLead|raw }} Grosse Schrift</label>
                        </div>

                        <div class="-auto cell">
                            <label>{{ isHoch|raw }} Bild Hochformat</label>
                        </div>

                        {% if isHoch.checked %}
                            <div class="-auto cell large-4">
                                <label>Bild Hochformat</label>
                                {{ imageLarge|raw }}
                            </div>
                        {% else %}
                            <div class="-auto cell large-4">
                                <label>Bild Querformat</label>
                                {{ imageSmall|raw }}
                            </div>
                        {% endif %}

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

    {% if anchor.data %}
        <div class="anchor" id="{{ anchor.data }}">
        </div>
    {% endif %}

    <section class="section-teaser {{ class }}">
        <div class="grid-container">
            <div class="grid-x grid-margin-x {% if not isHoch.checked %}align-middle{% endif %}">

                <div class="cell xmedium-6 {{ order1 }}">
                    <div class="teaser-image {% if isHoch.checked %}hoch{% endif %}">

                        {# image #}
                        {% if isHoch.checked %}
                            <img src="/static/assets/img/shim.png" data-interchange="
                                [{{ imageLarge.thumbnail('600x300') }}, small], 
                                [{{ imageLarge.thumbnail('800x400') }}, medium], 
                                [{{ imageLarge.thumbnail('500x800') }}, xmedium], 
                                [{{ imageLarge.thumbnail('600x900') }}, large]
                            " alt="{{ imageLarge.alt }}"
                            title="{{ title.data }}">
                        {% else %}
                            <img src="/static/assets/img/shim.png" data-interchange="
                                [{{ imageSmall.thumbnail('600x300') }}, small], 
                                [{{ imageSmall.thumbnail('800x400') }}, medium], 
                                [{{ imageSmall.thumbnail('800x700') }}, xmedium], 
                                [{{ imageSmall.thumbnail('800x600') }}, large]
                            " alt="{{ imageSmall.alt }}"
                            title="{{ title.data }}">
                        {% endif %}

                    </div>
                </div>

                <div class="cell xmedium-6 {{ order2 }}">
                    <div class="teaser-text {% if isLead.checked %}lead{% endif %}" {% if isHoch.checked %}style="margin-top: 30px;"{% endif %}>

                        {# title #}
                        {% if editmode or title.data %}
                            <h2>
                                {{ title|raw }}
                            </h2>
                        {% endif %}

                        {# text #}
                        {{ pimcore_wysiwyg('text', {
                            'placeholder': 'Text'
                        }) }}

                        {# link #}
                        {% if editmode %}
                            {{ link|raw }}
                        {% elseif link.href %}
                            <a href="{{ link.href }}" class="btn" {% if link.target %}target="{{ link.target }}"{% endif %}>{{ link.text }}</a>
                        {% endif %}

                    </div>
                </div>
            </div>
        </div>
    </section>

{% endblock %}