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

Open in your IDE?
  1. {# settings #}
  2. {% extends ('areas_shared/settings.html.twig') %}
  4. {% block content %}
  6.     {# default margin bottom #}
  7.     {% if marginBottom.isEmpty() %}
  8.         {% do marginBottom.setDataFromResource('no-margin-bottom') %}
  9.     {% endif %}
  11.     {# large #}
  12.     {% set large = pimcore_checkbox('large', {
  13.         'reload': true
  14.     }) %}
  16.     {# image #}
  17.     {% set image = pimcore_image('image', {
  18.         'reload': true,
  19.         'width': 300
  20.     }) %}
  22.     {# editmode #}
  23.     {% if editmode %}
  24.         <div class="editmode">
  25.             <div class="accordion-container">
  26.                 <div class="accordion-button">
  27.                     <span class="accordion-button-text">Hero</span>
  28.                     {{ include('svg/editmode/setting.html.twig') }}
  29.                 </div>
  30.                 <div class="panel">
  31.                     <div class="settings-container">
  33.                         <div class="setting input">
  34.                             <label>Anker:</label>
  35.                             {{ anchor|raw }}
  36.                         </div>
  38.                         <div class="setting checkbox">
  39.                             <label>{{ large|raw }} Gross</label>
  40.                         </div>
  42.                         <div class="setting">
  43.                             <label>Bild:</label>
  44.                             {{ image|raw }}
  45.                         </div>
  47.                         <div class="setting select">
  48.                             <label>Abstand unten:</label>
  49.                             {{ marginBottom|raw }}
  50.                         </div>
  52.                     </div>
  53.                 </div>
  54.             </div>
  55.         </div>
  56.     {% endif %}
  58.     {% if image.src %}
  59.         <div class="hero-brick brick-container {{ backgroundColor.data }} {{ marginBottom.data }}">
  61.             {# anchor #}
  62.             {% if anchor.data %}
  63.                 <div class="anchor" id="{{ anchor.data }}"></div>
  64.             {% endif %}
  66.             <div class="container-2500 no-padding">
  68.                 {# large #}
  69.                 {% if image.src and large.checked %}
  70.                     <div class="image large">
  71.                         {{ image.thumbnail('heroLarge').html({
  72.                             'alt': image.alt,
  73.                             'disableWidthHeightAttributes': true,
  74.                             'imgAttributes': {
  75.                                 'width': 480,
  76.                                 'height': 400,
  77.                                 'loading': 'eager'
  78.                             }
  79.                         })|raw }}
  80.                     </div>
  82.                 {# normal #}
  83.                 {% elseif image.src %}
  84.                     <div class="image">
  85.                         {{ image.thumbnail('heroSmall').html({
  86.                             'alt': image.alt,
  87.                             'disableWidthHeightAttributes': true,
  88.                             'imgAttributes': {
  89.                                 'width': 480,
  90.                                 'height': 200,
  91.                                 'loading': 'eager'
  92.                             }
  93.                         })|raw }}
  94.                     </div>
  95.                 {% endif %}
  97.                 {# wave #}
  98.                 {% if not large.checked %}
  99.                     <div class="wave">
  100.                         {{ include('svg/hero/wave.html.twig') }}
  101.                     </div>
  102.                 {% endif %}
  104.             </div>
  105.         </div>
  106.     {% endif %}
  108. {% endblock %}