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

Open in your IDE?
  1. {# settings #}
  2. {% extends ('areas_shared/settings.html.twig') %}
  4. {% block content %}
  6.     {# default margin #}
  7.     {% if marginBottom.isEmpty() %}
  8.         {% do marginBottom.setDataFromResource('full-margin-bottom') %}
  9.     {% endif %}
  11.     {# default background color #}
  12.     {% if backgroundColor.isEmpty() %}
  13.         {% do backgroundColor.setDataFromResource('background-white') %}
  14.     {% endif %}
  16.     {# title #}
  17.     {% set title = pimcore_textarea('title', {
  18.         'placeholder': 'Titel',
  19.         'nl2br': true
  20.     }) %}
  22.     {# image #}
  23.     {% set image = pimcore_image('image', {
  24.         'reload': true,
  25.         'width': 600
  26.     }) %}
  28.     {# editmode #}
  29.     {% if editmode %}
  30.         <div class="editmode">
  31.             <div class="accordion-container">
  32.                 <div class="accordion-button">
  33.                     <span class="accordion-button-text">Wolke</span>
  34.                     {{ include('svg/editmode/setting.html.twig') }}
  35.                 </div>
  36.                 <div class="panel">
  37.                     <div class="settings-container">
  38.                         
  39.                         <div class="setting input">
  40.                             <label>Anker:</label>
  41.                             {{ anchor|raw }}
  42.                         </div>
  44.                         <div class="setting">
  45.                             <label>Bild:</label>
  46.                             {{ image|raw }}
  47.                         </div>
  49.                         <div class="setting select">
  50.                             <label>Abstand unten:</label>
  51.                             {{ marginBottom|raw }}
  52.                         </div>
  54.                     </div>
  55.                 </div>
  56.             </div>
  57.         </div>
  58.     {% endif %}
  60.     <div class="wolke-brick brick-container {{ backgroundColor.data }} {{ marginBottom.data }} {% if editmode %}wolke-editmode{% endif %}">
  62.         {# anchor #}
  63.         {% if anchor.data %}
  64.             <div class="anchor" id="{{ anchor.data }}"></div>
  65.         {% endif %}
  67.         <div class="container-2500 no-padding">
  69.             <div class="top">
  70.                 {{ include('svg/call-to-action/top.html.twig') }}
  71.             </div>
  73.         </div>
  75.         <div class="container-2500 no-padding">
  76.             <div class="content">
  77.                 <div class="container-1420">
  78.                     <div class="space">
  79.                     
  80.                         {% if editmode or title.data %}
  82.                             <div class="title">
  83.                                 <p>
  84.                                     {{ title|raw }}
  85.                                 </p>
  86.                             </div>
  88.                             <div class="wave">
  89.                                 {{ include('svg/link-wave/single.html.twig') }}
  90.                             </div>
  92.                         {% endif %}
  94.                         {# image #}
  95.                         {% if image.src %}
  96.                             <div class="image">
  97.                                 {{ image.thumbnail('wolke').html({
  98.                                     'alt': image.alt,
  99.                                     'imgAttributes': {
  100.                                         'loading': 'lazy'
  101.                                     }
  102.                                 })|raw }}
  103.                             </div>
  104.                         {% endif %}
  106.                     </div>
  107.                 </div>
  108.             </div>
  109.         </div>
  111.         <div class="container-2500 no-padding">
  112.             <div class="bottom">
  113.                 {{ include('svg/call-to-action/bottom.html.twig') }}
  114.             </div>
  115.         </div>
  117.     </div>
  119. {% endblock %}