templates/blocks/framework_content_image.html.twig line 1

Open in your IDE?
  1. {#
  2.     {
  3.         "key": "framework_content_image",
  4.         "category": "02. Content",
  5.         "label": "02.03 Content with image",
  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 id="{{wrapper.cssId is defined ? wrapper.cssId : ''}}" class="text-blocks {{wrapper.cssClass is defined ? wrapper.cssClass : ''}}">
  48.   <div class="container">
  49.     {% if wrapper.label or wrapper.intro is not empty %}
  50.       <div class="introblock">
  51.         {% if wrapper.label is not empty %}
  52.           <div class="introtitle">
  53.             {{wrapper.label|raw}}
  54.           </div>
  55.         {% endif %}
  56.         {% if wrapper.intro is not empty %}
  57.           <div class="introtext">
  58.             {{wrapper.intro|raw}}
  59.           </div>
  60.         {% endif %}
  61.       </div>
  62.     {% endif %}
  64.     <div class="row d-flex align-items-center">
  65.       {# WALK THROUGH EVERY BLOCK #}
  66.       {% for b in wrapper.blocks %}
  67.         {# FIND TYPE BY REQUIRED INPUT FOR BLOCK #}
  68.         {% if data.blocks_q[b.templateKey].required == 'media' %}
  69.           {# FOUND MEDIA BLOCK #}
  70.           <div class="col-sm-12 col-lg-6 h-100 image-block order-0 order-lg-1" style="background: url(/{{b.media.getWebPath}}) no-repeat center; background-size: cover;">
  71.             <img src="/{{b.media.getWebPath}}" alt="">
  72.           </div>
  73.         {% else %}
  74.           {# NO MEDIA BLOCK, MUST BE TEXT BLOCK #}
  75.           <div class="col-sm-12 col-lg-6 order-1 order-lg-0">
  76.             <div class="padder">
  77.               {% if b.config.title is not empty %}
  78.                 <h3 class="title">{{b.config.title}}</h3>
  79.               {% endif %}
  80.               <p>
  81.                 {{b.config.text|raw}}
  82.               </p>
  84.               {% if b.config.buttons is defined %}
  85.                 {% for button in b.config.buttons %}
  86.                   <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}}">
  87.                     {{button.label}}
  88.                     <i class="fa fa-angle-right"></i>
  89.                   </a>
  90.                 {% endfor %}
  91.               {% endif %}
  92.             </div>
  93.           </div>
  94.         {% endif %}
  95.       {% endfor %}
  97.     </div>
  98.   </div>
  99. </section>