src/CmsBundle/Resources/views/blocks/framework_hero_centered.html.twig line 1

Open in your IDE?
  1. {#
  2.     {
  3.         "key": "framework_hero_centered",
  4.         "category": "Framework",
  5.         "label": "Hero (Gecentreerd)",
  6.         "description": "...",
  7.         "allowMove": false,
  8.         "blocks": [
  9.             {
  10.                 "key": "block-0",
  11.                 "size": 12,
  12.                 "required": "none",
  13.                 "buttons": true,
  14.                 "fields": [
  15.                     {
  16.                         "key": "title",
  17.                         "type": "textarea",
  18.                         "label": "Titel"
  19.                     },
  20.                     {
  21.                         "key": "subtitle",
  22.                         "type": "textarea",
  23.                         "label": "Subtitel"
  24.                     }
  25.                 ]
  26.             },
  27.             {
  28.                 "key": "block-1",
  29.                 "size": 12,
  30.                 "required": "media",
  31.                 "fields": []
  32.             }
  33.         ]
  34.     }
  35. #}
  37. <section
  38. class="hero centered {{wrapper.classList}}"
  39. id="{{wrapper.cssId is defined ? wrapper.cssId : ''}}"
  40. style="{{wrapper.styleList}}"
  41. data-id="{{wrapper.id}}">
  43.   <div class="slider">
  44.     <div class="slide">
  46.       {% if wrapper.blocks[1].media is not empty %}
  47.         <div class="lcp">
  48.           {% if wrapper.blocks[1].media.hasBlurred %}
  49.             <picture>
  50.               {% if wrapper.blocks[1].media.hasWebp() %}
  51.                 <source srcset="/{{wrapper.blocks[1].media.getBlurredWebpPath('large')}}" type="image/webp">
  52.               {% endif %}
  53.               <source srcset="/{{wrapper.blocks[1].media.getBlurredWebPath('large')}}" type="{{wrapper.blocks[1].media.mime}}">
  54.               <img class="lq" alt="{{wrapper.blocks[1].media.description_alt}}" src="/{{wrapper.blocks[1].media.getBlurredWebPath('large')}}" type="{{wrapper.blocks[1].media.mime}}" loading="lazy" width="{{wrapper.blocks[1].media.width}}" height="{{wrapper.blocks[1].media.height}}">
  55.             </picture>
  56.           {% endif %}
  57.           <picture>
  58.             {% if wrapper.blocks[1].media.hasWebp() %}
  59.               <source srcset="/{{wrapper.blocks[1].media.getWebpPath('full')}}" type="image/webp">
  60.             {% endif %}
  61.             <source srcset="/{{wrapper.blocks[1].media.getWebPath('full')}}" type="{{ wrapper.blocks[1].media.mime }}">
  62.           <img class="hq" alt="{{wrapper.blocks[1].media.description_alt}}" src="/{{wrapper.blocks[1].media.getWebPath('full')}}" type="{{wrapper.blocks[1].media.mime}}" loading="lazy" width="{{wrapper.blocks[1].media.width}}" height="{{wrapper.blocks[1].media.height}}" onload="this.style.opacity=1{% if wrapper.blocks[1].media.hasBlurred %};this.closest('.lcp').getElementsByClassName('lq')[0].style.opacity=0;{% endif %}" style="opacity: 0;">
  63.           </picture>
  64.         </div>
  65.       {% endif %}
  67.         {% if firstBlock.config.title or firstBlock.config.subtitle or firstBlock.config.buttons is defined %}
  68.           <div class="container {{ firstBlock.class }}">
  69.             <div class="vtable">
  70.               <div class="vcell">
  71.                 <div class="titles">
  72.                   <div class="title"><h1>{{firstBlock.config.title|raw}}</h1></div>
  73.                   <div class="text">{{firstBlock.config.subtitle|raw}}</div>
  75.                   {% if firstBlock.config.buttons is defined %}
  76.                     <div class="btns">
  77.                     {% for button in firstBlock.config.buttons %}
  78.                       <a href="{{button.url}}" {% if button.target is defined and button.target != "null" %} target="{{button.target}}" {% endif %} class="btn {{button.class}}">
  79.                         {{button.label}}
  80.                         <i class="fa fa-arrow-right"></i>
  81.                       </a>
  82.                     {% endfor %}
  83.                     </div>
  84.                   {% endif %}
  85.                 </div>
  86.               </div>
  87.             </div>
  88.           </div>
  89.         </div>
  90.       {% endif %}
  91.     </div>
  92.   </div>
  93. </section>