templates/blocks/custom_gallery.html.twig line 1

Open in your IDE?
  1. {#
  2.   {
  3.     "key": "custom_gallery",
  4.     "label": "Galerij",
  5.     "description": "Blokken met afbeeldingen met tekst op hover-functie",
  6.     "allowMove": true,
  7.     "category": "IDB",
  8.     "blocks": [
  9.       {
  10.         "key": "block-0",
  11.         "size": 4,
  12.         "required": "media",
  13.         "multiple": false,
  14.         "fields": [
  15.           {
  16.             "key": "content",
  17.             "type": "textarea",
  18.             "label": "Tekst"
  19.           }
  20.         ]
  21.       },
  22.       {
  23.         "key": "block-1",
  24.         "size": 4,
  25.         "required": "media",
  26.         "multiple": false,
  27.         "fields": [
  28.           {
  29.             "key": "content",
  30.             "type": "textarea",
  31.             "label": "Tekst"
  32.           }
  33.         ]
  34.       },
  35.       {
  36.         "key": "block-2",
  37.         "size": 4,
  38.         "required": "media",
  39.         "multiple": false,
  40.         "fields": [
  41.           {
  42.             "key": "content",
  43.             "type": "textarea",
  44.             "label": "Tekst"
  45.           }
  46.         ]
  47.       },
  48.       {
  49.         "key": "block-3",
  50.         "size": 4,
  51.         "required": "media",
  52.         "multiple": false,
  53.         "fields": [
  54.           {
  55.             "key": "content",
  56.             "type": "textarea",
  57.             "label": "Tekst"
  58.           }
  59.         ]
  60.       },
  61.       {
  62.         "key": "block-4",
  63.         "size": 4,
  64.         "required": "media",
  65.         "multiple": false,
  66.         "fields": [
  67.           {
  68.             "key": "content",
  69.             "type": "textarea",
  70.             "label": "Tekst"
  71.           }
  72.         ]
  73.       },
  74.       {
  75.         "key": "block-5",
  76.         "size": 4,
  77.         "required": "media",
  78.         "multiple": false,
  79.         "fields": [
  80.           {
  81.             "key": "content",
  82.             "type": "textarea",
  83.             "label": "Tekst"
  84.           }
  85.         ]
  86.       }
  87.     ]
  88.   }
  89. #}
  91. <section id="{{wrapper.cssId is defined ? wrapper.cssId : ''}}" class="custom-gallery {{wrapper.cssClass is defined ? wrapper.cssClass : ''}}">
  92.   <div class="container {{firstBlock.config.class is not empty ? firstBlock.config.class : ''}}">
  93.     {% if wrapper.label or wrapper.intro is not empty %}
  94.       <div class="introblock">
  95.         {% if wrapper.label is not empty %}
  96.           <div class="introtitle">
  97.             {{wrapper.label|raw}}
  98.           </div>
  99.         {% endif %}
  100.         {% if wrapper.intro is not empty %}
  101.           <div class="introtext">
  102.             {{wrapper.intro|raw}}
  103.           </div>
  104.         {% endif %}
  105.       </div>
  106.     {% endif %}
  107.   </div>
  109.   <div class="images">
  110.     <a href="{{wrapper.blocks[0].config.link}}" target="_blank">
  111.       <div class="image img-1" {% if wrapper.blocks[0].media is not empty %} style="background: url(/{{wrapper.blocks[0].media.getWebPath}}) no-repeat center; background-size: cover;" {% endif %}></div>
  112.       <div class="text">
  113.         {% if wrapper.blocks[0].config.content is not empty %}
  114.           {{wrapper.blocks[0].config.content|raw}}
  115.         {% endif %}
  117.         <div class="corner-shape">
  118.             <svg preserveaspectratio="none" class="corner-shape-topleft" x="0px" y="0px" viewbox="0 0 21.4 19.5" style="enable-background:new 0 0 21.4 19.5;" xml:space="preserve">
  119.               <path
  120.                 d="M20,0.3L18.9,0c-0.4-0.1-0.9,0-1.3,0.3S17,1,17,1.4l-0.1,1.2c0,0.1,0,0.2,0,0.3s0,0.2,0,0.3
  121.               c0,0.2-0.1,0.5-0.1,0.7c-0.1,0.5-0.2,0.9-0.3,1.4c-0.3,1-0.6,1.9-1.1,2.7c-0.9,1.7-2.1,3.1-3.6,4.1c-1.4,1-3.2,1.7-5.2,2
  122.               c-1.5,0.2-3.2,0.3-4.9,0.2c-0.4,0-0.8,0.1-1.1,0.4C0.2,15.1,0,15.5,0,15.9v1.9v0.1c0,0.1,0,0.3,0,0.4v1.2h5.8l0,0
  123.               c0.5-0.1,1.1-0.1,1.6-0.2c3.8-0.7,6.3-2.2,7.2-2.9c2.1-1.5,3.9-3.5,5.2-6c0.6-1.1,1.1-2.3,1.4-3.6c0.1-0.3,0.2-0.6,0.2-1l0,0V0.7
  124.               C21,0.6,20.5,0.5,20,0.3z"/>
  125.             </svg>
  126.             <svg preserveaspectratio="none" class="corner-shape-top" viewbox="0 0 290.3 22.5" style="enable-background:new 0 0 290.3 22.5;" xml:space="preserve">
  127.               <path
  128.                 d="M290.3,1.8c-0.2-0.8-1-1.3-1.8-1.1c-24,5.7-48.2,10.2-72.1,13.1c-24.2,3-48.8,4.6-73,4.8
  129.                 c-24.2-0.3-48.8-2.1-73-5.3C47.1,10.2,23.4,5.8,0,0v5.1c23.2,5.5,46.7,9.7,69.9,12.6c24.4,3,49.1,4.7,73.5,4.8
  130.                 c24.4-0.3,49.1-2.1,73.4-5.3c24-3.1,48.3-7.8,72.3-13.7C290,3.4,290.5,2.6,290.3,1.8z"/>
  131.             </svg>
  132.             <svg preserveaspectratio="none" class="corner-shape-left" viewbox="0 0 5.83 168.4">
  133.               <path d="M0,151.7v15.2a1.54,1.54,0,0,0,1.5,1.5h0A1.54,1.54,0,0,0,3,166.9V151.8c.1-23,.8-46.3,1.4-69C5.2,55.5,6,27.5,5.8,0H0Z"/>
  134.             </svg>
  135.           </div>
  136.       </div>
  137.     </a>
  139.     <a href="{{wrapper.blocks[1].config.link}}" target="_blank">
  140.       <div class="image img-2" {% if wrapper.blocks[1].media is not empty %} style="background: url(/{{wrapper.blocks[1].media.getWebPath}}) no-repeat center; background-size: cover;" {% endif %}></div>
  141.       <div class="text">
  142.         {% if wrapper.blocks[1].config.content is not empty %}
  143.           {{wrapper.blocks[1].config.content|raw}}
  144.         {% endif %}
  146.         <div class="corner-shape">
  147.             <svg preserveaspectratio="none" class="corner-shape-topleft" x="0px" y="0px" viewbox="0 0 21.4 19.5" style="enable-background:new 0 0 21.4 19.5;" xml:space="preserve">
  148.               <path
  149.                 d="M20,0.3L18.9,0c-0.4-0.1-0.9,0-1.3,0.3S17,1,17,1.4l-0.1,1.2c0,0.1,0,0.2,0,0.3s0,0.2,0,0.3
  150.               c0,0.2-0.1,0.5-0.1,0.7c-0.1,0.5-0.2,0.9-0.3,1.4c-0.3,1-0.6,1.9-1.1,2.7c-0.9,1.7-2.1,3.1-3.6,4.1c-1.4,1-3.2,1.7-5.2,2
  151.               c-1.5,0.2-3.2,0.3-4.9,0.2c-0.4,0-0.8,0.1-1.1,0.4C0.2,15.1,0,15.5,0,15.9v1.9v0.1c0,0.1,0,0.3,0,0.4v1.2h5.8l0,0
  152.               c0.5-0.1,1.1-0.1,1.6-0.2c3.8-0.7,6.3-2.2,7.2-2.9c2.1-1.5,3.9-3.5,5.2-6c0.6-1.1,1.1-2.3,1.4-3.6c0.1-0.3,0.2-0.6,0.2-1l0,0V0.7
  153.               C21,0.6,20.5,0.5,20,0.3z"/>
  154.             </svg>
  155.             <svg preserveaspectratio="none" class="corner-shape-top" viewbox="0 0 290.3 22.5" style="enable-background:new 0 0 290.3 22.5;" xml:space="preserve">
  156.               <path
  157.                 d="M290.3,1.8c-0.2-0.8-1-1.3-1.8-1.1c-24,5.7-48.2,10.2-72.1,13.1c-24.2,3-48.8,4.6-73,4.8
  158.                 c-24.2-0.3-48.8-2.1-73-5.3C47.1,10.2,23.4,5.8,0,0v5.1c23.2,5.5,46.7,9.7,69.9,12.6c24.4,3,49.1,4.7,73.5,4.8
  159.                 c24.4-0.3,49.1-2.1,73.4-5.3c24-3.1,48.3-7.8,72.3-13.7C290,3.4,290.5,2.6,290.3,1.8z"/>
  160.             </svg>
  161.             <svg preserveaspectratio="none" class="corner-shape-left" viewbox="0 0 5.83 168.4">
  162.               <path d="M0,151.7v15.2a1.54,1.54,0,0,0,1.5,1.5h0A1.54,1.54,0,0,0,3,166.9V151.8c.1-23,.8-46.3,1.4-69C5.2,55.5,6,27.5,5.8,0H0Z"/>
  163.             </svg>
  164.           </div>
  165.       </div>
  166.     </a>
  168.     <a href="{{wrapper.blocks[2].config.link}}"  target="_blank">
  169.       <div class="image img-3" {% if wrapper.blocks[2].media is not empty %} style="background: url(/{{wrapper.blocks[2].media.getWebPath}}) no-repeat center; background-size: cover;" {% endif %}></div>
  170.       <div class="text">
  171.         {% if wrapper.blocks[2].config.content is not empty %}
  172.           {{wrapper.blocks[2].config.content|raw}}
  173.         {% endif %}
  175.         <div class="corner-shape">
  176.             <svg preserveaspectratio="none" class="corner-shape-topleft" x="0px" y="0px" viewbox="0 0 21.4 19.5" style="enable-background:new 0 0 21.4 19.5;" xml:space="preserve">
  177.               <path
  178.                 d="M20,0.3L18.9,0c-0.4-0.1-0.9,0-1.3,0.3S17,1,17,1.4l-0.1,1.2c0,0.1,0,0.2,0,0.3s0,0.2,0,0.3
  179.               c0,0.2-0.1,0.5-0.1,0.7c-0.1,0.5-0.2,0.9-0.3,1.4c-0.3,1-0.6,1.9-1.1,2.7c-0.9,1.7-2.1,3.1-3.6,4.1c-1.4,1-3.2,1.7-5.2,2
  180.               c-1.5,0.2-3.2,0.3-4.9,0.2c-0.4,0-0.8,0.1-1.1,0.4C0.2,15.1,0,15.5,0,15.9v1.9v0.1c0,0.1,0,0.3,0,0.4v1.2h5.8l0,0
  181.               c0.5-0.1,1.1-0.1,1.6-0.2c3.8-0.7,6.3-2.2,7.2-2.9c2.1-1.5,3.9-3.5,5.2-6c0.6-1.1,1.1-2.3,1.4-3.6c0.1-0.3,0.2-0.6,0.2-1l0,0V0.7
  182.               C21,0.6,20.5,0.5,20,0.3z"/>
  183.             </svg>
  184.             <svg preserveaspectratio="none" class="corner-shape-top" viewbox="0 0 290.3 22.5" style="enable-background:new 0 0 290.3 22.5;" xml:space="preserve">
  185.               <path
  186.                 d="M290.3,1.8c-0.2-0.8-1-1.3-1.8-1.1c-24,5.7-48.2,10.2-72.1,13.1c-24.2,3-48.8,4.6-73,4.8
  187.                 c-24.2-0.3-48.8-2.1-73-5.3C47.1,10.2,23.4,5.8,0,0v5.1c23.2,5.5,46.7,9.7,69.9,12.6c24.4,3,49.1,4.7,73.5,4.8
  188.                 c24.4-0.3,49.1-2.1,73.4-5.3c24-3.1,48.3-7.8,72.3-13.7C290,3.4,290.5,2.6,290.3,1.8z"/>
  189.             </svg>
  190.             <svg preserveaspectratio="none" class="corner-shape-left" viewbox="0 0 5.83 168.4">
  191.               <path d="M0,151.7v15.2a1.54,1.54,0,0,0,1.5,1.5h0A1.54,1.54,0,0,0,3,166.9V151.8c.1-23,.8-46.3,1.4-69C5.2,55.5,6,27.5,5.8,0H0Z"/>
  192.             </svg>
  193.           </div>
  194.       </div>
  195.     </a>
  197.     <a href="{{wrapper.blocks[3].config.link}}"  target="_blank">
  198.       <div class="image img-4" {% if wrapper.blocks[3].media is not empty %} style="background: url(/{{wrapper.blocks[3].media.getWebPath}}) no-repeat center; background-size: cover;" {% endif %}></div>
  199.       <div class="text">
  200.         {% if wrapper.blocks[3].config.content is not empty %}
  201.           {{wrapper.blocks[3].config.content|raw}}
  202.         {% endif %}
  204.         <div class="corner-shape">
  205.             <svg preserveaspectratio="none" class="corner-shape-topleft" x="0px" y="0px" viewbox="0 0 21.4 19.5" style="enable-background:new 0 0 21.4 19.5;" xml:space="preserve">
  206.               <path
  207.                 d="M20,0.3L18.9,0c-0.4-0.1-0.9,0-1.3,0.3S17,1,17,1.4l-0.1,1.2c0,0.1,0,0.2,0,0.3s0,0.2,0,0.3
  208.               c0,0.2-0.1,0.5-0.1,0.7c-0.1,0.5-0.2,0.9-0.3,1.4c-0.3,1-0.6,1.9-1.1,2.7c-0.9,1.7-2.1,3.1-3.6,4.1c-1.4,1-3.2,1.7-5.2,2
  209.               c-1.5,0.2-3.2,0.3-4.9,0.2c-0.4,0-0.8,0.1-1.1,0.4C0.2,15.1,0,15.5,0,15.9v1.9v0.1c0,0.1,0,0.3,0,0.4v1.2h5.8l0,0
  210.               c0.5-0.1,1.1-0.1,1.6-0.2c3.8-0.7,6.3-2.2,7.2-2.9c2.1-1.5,3.9-3.5,5.2-6c0.6-1.1,1.1-2.3,1.4-3.6c0.1-0.3,0.2-0.6,0.2-1l0,0V0.7
  211.               C21,0.6,20.5,0.5,20,0.3z"/>
  212.             </svg>
  213.             <svg preserveaspectratio="none" class="corner-shape-top" viewbox="0 0 290.3 22.5" style="enable-background:new 0 0 290.3 22.5;" xml:space="preserve">
  214.               <path
  215.                 d="M290.3,1.8c-0.2-0.8-1-1.3-1.8-1.1c-24,5.7-48.2,10.2-72.1,13.1c-24.2,3-48.8,4.6-73,4.8
  216.                 c-24.2-0.3-48.8-2.1-73-5.3C47.1,10.2,23.4,5.8,0,0v5.1c23.2,5.5,46.7,9.7,69.9,12.6c24.4,3,49.1,4.7,73.5,4.8
  217.                 c24.4-0.3,49.1-2.1,73.4-5.3c24-3.1,48.3-7.8,72.3-13.7C290,3.4,290.5,2.6,290.3,1.8z"/>
  218.             </svg>
  219.             <svg preserveaspectratio="none" class="corner-shape-left" viewbox="0 0 5.83 168.4">
  220.               <path d="M0,151.7v15.2a1.54,1.54,0,0,0,1.5,1.5h0A1.54,1.54,0,0,0,3,166.9V151.8c.1-23,.8-46.3,1.4-69C5.2,55.5,6,27.5,5.8,0H0Z"/>
  221.             </svg>
  222.           </div>
  223.       </div>
  224.     </a>
  226.     <a href="{{wrapper.blocks[4].config.link}}"  target="_blank">
  227.       <div class="image img-5" {% if wrapper.blocks[3].media is not empty %} style="background: url(/{{wrapper.blocks[4].media.getWebPath}}) no-repeat center; background-size: cover;" {% endif %}></div>
  228.       <div class="text">
  229.         {% if wrapper.blocks[4].config.content is not empty %}
  230.           {{wrapper.blocks[4].config.content|raw}}
  231.         {% endif %}
  233.         <div class="corner-shape">
  234.             <svg preserveaspectratio="none" class="corner-shape-topleft" x="0px" y="0px" viewbox="0 0 21.4 19.5" style="enable-background:new 0 0 21.4 19.5;" xml:space="preserve">
  235.               <path
  236.                 d="M20,0.3L18.9,0c-0.4-0.1-0.9,0-1.3,0.3S17,1,17,1.4l-0.1,1.2c0,0.1,0,0.2,0,0.3s0,0.2,0,0.3
  237.               c0,0.2-0.1,0.5-0.1,0.7c-0.1,0.5-0.2,0.9-0.3,1.4c-0.3,1-0.6,1.9-1.1,2.7c-0.9,1.7-2.1,3.1-3.6,4.1c-1.4,1-3.2,1.7-5.2,2
  238.               c-1.5,0.2-3.2,0.3-4.9,0.2c-0.4,0-0.8,0.1-1.1,0.4C0.2,15.1,0,15.5,0,15.9v1.9v0.1c0,0.1,0,0.3,0,0.4v1.2h5.8l0,0
  239.               c0.5-0.1,1.1-0.1,1.6-0.2c3.8-0.7,6.3-2.2,7.2-2.9c2.1-1.5,3.9-3.5,5.2-6c0.6-1.1,1.1-2.3,1.4-3.6c0.1-0.3,0.2-0.6,0.2-1l0,0V0.7
  240.               C21,0.6,20.5,0.5,20,0.3z"/>
  241.             </svg>
  242.             <svg preserveaspectratio="none" class="corner-shape-top" viewbox="0 0 290.3 22.5" style="enable-background:new 0 0 290.3 22.5;" xml:space="preserve">
  243.               <path
  244.                 d="M290.3,1.8c-0.2-0.8-1-1.3-1.8-1.1c-24,5.7-48.2,10.2-72.1,13.1c-24.2,3-48.8,4.6-73,4.8
  245.                 c-24.2-0.3-48.8-2.1-73-5.3C47.1,10.2,23.4,5.8,0,0v5.1c23.2,5.5,46.7,9.7,69.9,12.6c24.4,3,49.1,4.7,73.5,4.8
  246.                 c24.4-0.3,49.1-2.1,73.4-5.3c24-3.1,48.3-7.8,72.3-13.7C290,3.4,290.5,2.6,290.3,1.8z"/>
  247.             </svg>
  248.             <svg preserveaspectratio="none" class="corner-shape-left" viewbox="0 0 5.83 168.4">
  249.               <path d="M0,151.7v15.2a1.54,1.54,0,0,0,1.5,1.5h0A1.54,1.54,0,0,0,3,166.9V151.8c.1-23,.8-46.3,1.4-69C5.2,55.5,6,27.5,5.8,0H0Z"/>
  250.             </svg>
  251.           </div>
  252.       </div>
  253.     </a>
  255.     <a href="{{wrapper.blocks[5].config.link}}"  target="_blank">
  256.       <div class="image img-6" {% if wrapper.blocks[5].media is not empty %} style="background: url(/{{wrapper.blocks[5].media.getWebPath}}) no-repeat center; background-size: cover;" {% endif %}></div>
  257.       <div class="text">
  258.         {% if wrapper.blocks[5].config.content is not empty %}
  259.           {{wrapper.blocks[5].config.content|raw}}
  260.         {% endif %}
  262.         <div class="corner-shape">
  263.             <svg preserveaspectratio="none" class="corner-shape-topleft" x="0px" y="0px" viewbox="0 0 21.4 19.5" style="enable-background:new 0 0 21.4 19.5;" xml:space="preserve">
  264.               <path
  265.                 d="M20,0.3L18.9,0c-0.4-0.1-0.9,0-1.3,0.3S17,1,17,1.4l-0.1,1.2c0,0.1,0,0.2,0,0.3s0,0.2,0,0.3
  266.               c0,0.2-0.1,0.5-0.1,0.7c-0.1,0.5-0.2,0.9-0.3,1.4c-0.3,1-0.6,1.9-1.1,2.7c-0.9,1.7-2.1,3.1-3.6,4.1c-1.4,1-3.2,1.7-5.2,2
  267.               c-1.5,0.2-3.2,0.3-4.9,0.2c-0.4,0-0.8,0.1-1.1,0.4C0.2,15.1,0,15.5,0,15.9v1.9v0.1c0,0.1,0,0.3,0,0.4v1.2h5.8l0,0
  268.               c0.5-0.1,1.1-0.1,1.6-0.2c3.8-0.7,6.3-2.2,7.2-2.9c2.1-1.5,3.9-3.5,5.2-6c0.6-1.1,1.1-2.3,1.4-3.6c0.1-0.3,0.2-0.6,0.2-1l0,0V0.7
  269.               C21,0.6,20.5,0.5,20,0.3z"/>
  270.             </svg>
  271.             <svg preserveaspectratio="none" class="corner-shape-top" viewbox="0 0 290.3 22.5" style="enable-background:new 0 0 290.3 22.5;" xml:space="preserve">
  272.               <path
  273.                 d="M290.3,1.8c-0.2-0.8-1-1.3-1.8-1.1c-24,5.7-48.2,10.2-72.1,13.1c-24.2,3-48.8,4.6-73,4.8
  274.                 c-24.2-0.3-48.8-2.1-73-5.3C47.1,10.2,23.4,5.8,0,0v5.1c23.2,5.5,46.7,9.7,69.9,12.6c24.4,3,49.1,4.7,73.5,4.8
  275.                 c24.4-0.3,49.1-2.1,73.4-5.3c24-3.1,48.3-7.8,72.3-13.7C290,3.4,290.5,2.6,290.3,1.8z"/>
  276.             </svg>
  277.             <svg preserveaspectratio="none" class="corner-shape-left" viewbox="0 0 5.83 168.4">
  278.               <path d="M0,151.7v15.2a1.54,1.54,0,0,0,1.5,1.5h0A1.54,1.54,0,0,0,3,166.9V151.8c.1-23,.8-46.3,1.4-69C5.2,55.5,6,27.5,5.8,0H0Z"/>
  279.             </svg>
  280.           </div>
  281.       </div>
  282.     </a>
  283.   </section>