templates/blocks/framework_content_image.html.twig line 1

Open in your IDE?
  1. {#
  2.     {
  3.         "key": "framework_content_image",
  4.         "category": "Framework",
  5.         "label": "Content + afbeelding",
  6.         "description": "Content met afbeelding",
  7.         "allowMove": true,
  8.         "blocks": [
  9.             {
  10.                 "key": "block-0",
  11.                 "size": 6,
  12.                 "buttons": true,
  13.                 "required": "none",
  14.                 "fields": [
  15.                     {
  16.                         "key": "title",
  17.                         "type": "text",
  18.                         "label": "Titel"
  19.                     },
  20.                     {
  21.                         "key": "text",
  22.                         "type": "textarea",
  23.                         "label": "Tekst"
  24.                     }
  25.                 ]
  26.             },
  27.             {
  28.                 "key": "block-1",
  29.                 "size": 6,
  30.                 "required": "media",
  31.                 "fields": []
  32.             }
  33.         ]
  34.     }
  35. #}
  37. {#
  38.     Available objects:
  40.     - page: current page
  41.     - locale: current locale
  42.     - wrapper: contains the wrapper around multiple blocks.
  43.     - firstBlock: contains the first block in the wrapper, useful when only one block is expected.
  44.     - data: contains the data as mentioned above this file
  45. #}
  47. <section
  48. class="text-blocks {{wrapper.classList}}"
  49. id="{{wrapper.cssId is defined ? wrapper.cssId : ''}}"
  50. style="{{wrapper.styleList}}"
  51. data-id="{{wrapper.id}}">
  53.   <div class="container">
  54.     {% if wrapper.label or wrapper.intro is not empty %}
  55.       <div class="introblock">
  56.         {% if wrapper.label is not empty %}
  57.           <div class="introtitle">
  58.             {{wrapper.label|raw}}
  59.           </div>
  60.         {% endif %}
  61.         {% if wrapper.intro is not empty %}
  62.           <div class="introtext">
  63.             {{wrapper.intro|raw}}
  64.           </div>
  65.         {% endif %}
  66.       </div>
  67.     {% endif %}
  69.     <div class="section-bg">
  70.       <div class="row">
  71.         {% for b in wrapper.blocks %}
  72.           {% if data.blocks_q[b.templateKey].required == 'media' %}
  74.             <div class="col-sm-12 col-md-12 col-lg-{{b.width}} {{b.offset('offset-lg-')}} {{b.config.class}}" id="{{b.config.id}}">
  75.               {% if b.media is not empty %}
  76.                 <div class="lcp">
  77.                   {% if b.media.hasBlurred %}
  78.                     <picture>
  79.                       {% if b.media.hasWebp() %}
  80.                         <source srcset="/{{b.media.getBlurredWebpPath('medium')}}" type="image/webp">
  81.                       {% endif %}
  82.                       <source srcset="/{{b.media.getBlurredWebPath('medium')}}" type="{{b.media.mime}}">
  83.                       <img class="lq" alt="{{b.media.description_alt}}" src="/{{b.media.getBlurredWebPath('medium')}}" type="{{b.media.mime}}" loading="lazy" width="{{b.media.width}}" height="{{b.media.height}}">
  84.                     </picture>
  85.                   {% endif %}
  86.                   <picture>
  87.                     {% if b.media.hasWebp() %}
  88.                       <source srcset="/{{b.media.getWebpPath('large')}}" type="image/webp">
  89.                     {% endif %}
  90.                     <source srcset="/{{b.media.getWebPath('large')}}" type="{{ b.media.mime }}">
  91.                   <img class="hq" alt="{{b.media.description_alt}}" src="/{{b.media.getWebPath('large')}}" type="{{b.media.mime}}" loading="lazy" width="{{b.media.width}}" height="{{b.media.height}}" onload="this.style.opacity=1{% if b.media.hasBlurred %};this.closest('.lcp').getElementsByClassName('lq')[0].style.opacity=0;{% endif %}" style="opacity: 0;">
  92.                   </picture>
  93.                 </div>
  94.               {% endif %}
  95.             </div>
  96.             
  97.           {% else %}
  99.             <div class="col-sm-12 col-md-12 col-lg-{{b.width}} {{b.offset('offset-lg-')}} {{b.config.class}}" id="{{b.config.id}}">
  100.             </div>
  101.             
  102.           {% endif %}
  103.         {% endfor %}
  104.       </div>
  105.     </div>
  107.     <div class="section-front">
  108.       <div class="row">
  109.         {% for b in wrapper.blocks %}
  110.           {% if data.blocks_q[b.templateKey].required == 'media' %}
  112.             <div class="col-sm-12 col-md-12 col-lg-{{b.width}} {{b.offset('offset-lg-')}} {{b.config.class}}" id="{{b.config.id}}">
  113.               <div class="image-wrapper">
  114.                 {% if b.media is not empty %}
  115.                   <div class="lcp">
  116.                     {% if b.media.hasBlurred %}
  117.                       <picture>
  118.                         {% if b.media.hasWebp() %}
  119.                           <source srcset="/{{b.media.getBlurredWebpPath('medium')}}" type="image/webp">
  120.                         {% endif %}
  121.                         <source srcset="/{{b.media.getBlurredWebPath('medium')}}" type="{{b.media.mime}}">
  122.                         <img class="lq" alt="{{b.media.description_alt}}" src="/{{b.media.getBlurredWebPath('medium')}}" type="{{b.media.mime}}" loading="lazy" width="{{b.media.width}}" height="{{b.media.height}}">
  123.                       </picture>
  124.                     {% endif %}
  125.                     <picture>
  126.                       {% if b.media.hasWebp() %}
  127.                         <source srcset="/{{b.media.getWebpPath('large')}}" type="image/webp">
  128.                       {% endif %}
  129.                       <source srcset="/{{b.media.getWebPath('large')}}" type="{{ b.media.mime }}">
  130.                     <img class="hq" alt="{{b.media.description_alt}}" src="/{{b.media.getWebPath('large')}}" type="{{b.media.mime}}" loading="lazy" width="{{b.media.width}}" height="{{b.media.height}}" onload="this.style.opacity=1{% if b.media.hasBlurred %};this.closest('.lcp').getElementsByClassName('lq')[0].style.opacity=0;{% endif %}" style="opacity: 0;">
  131.                     </picture>
  132.                   </div>
  133.                 {% endif %}
  134.               </div>
  135.             </div>
  136.             
  137.           {% else %}
  139.             <div class="col-sm-12 col-md-12 col-lg-{{b.width}} {{b.offset('offset-lg-')}} {{b.config.class}}" id="{{b.config.id}}">
  140.               <div class="text-wrapper">
  141.                 <div class="padder">
  142.                   {% if b.config.title is not empty %}
  143.                     <h3 class="title">{{b.config.title}}</h3>
  144.                   {% endif %}
  145.                   <div class="text">
  146.                     {{b.config.text|raw}}
  147.                   </div>
  149.                   {% if b.config.buttons is defined %}
  150.                     {% for button in b.config.buttons %}
  151.                       <a href="{{button.url}}" {% if button.target is defined and button.target != 'null' and button.target is not empty %} target="{{button.target}}" {% endif %} class="btn {{button.class}}">
  152.                         {{button.label}}
  153.                         <i class="fa fa-arrow-right"></i>
  154.                       </a>
  155.                     {% endfor %}
  156.                   {% endif %}
  157.                 </div>
  158.               </div>
  159.             </div>
  160.             
  161.           {% endif %}
  162.         {% endfor %}
  163.       </div>
  164.     </div>
  166.   </div>
  167. </section>