templates/content/homepage.html.twig line 1

Open in your IDE?
  1. {% extends base_layout() %}
  3. {% block content %}
  5.     <div class="container">
  7.         {% if editmode %}
  8.             <div class="row">
  9.                 <div class="col-12">
  10.                     <p class="advice">{{ 'tip: Door op het plusteken te klikken kun je kiezen welke inhoudelijke blok je kan toevoegen.'|trans({}, 'admin') }}</p>
  11.                 </div>
  12.             </div>
  13.         {% endif %}
  14.         <div class="row">
  15.             <div class="col-12">
  16.                 {{ include('includes/default-content.html.twig') }}
  17.             </div>
  18.         </div>
  19.     </div>
  21.     {#
  22.     <div class="container offset-1 mx-auto">
  23.         <div class="row g-3">
  24.             {% if products is defined %}
  25.                 {% for product in products %}
  26.                     <div class="col-2">
  27.                         <img src="https://via.placeholder.com/150" class="img-fluid">
  28.                         <p>{{ product.getTitle() }}</p>
  29.                     </div>
  30.                 {% endfor %}
  31.             {% endif %}
  32.         </div>
  33.     </div> #}
  35.     <div class="container my-5 py-5">
  36.         <div class="row">
  37.             <div class="col-lg-3 zeilen mb-5 mb-lg-0">
  38.                 {% if blogsZeilen is defined %}
  40.                     <div class="d-flex align-items-end cat-header-icon">
  41.                         <div class="mb-5 text-center">
  44.                             {% if editmode %}
  45.                                 <br>
  46.                                 {{ pimcore_image("zeilenicon") }}
  47.                             {% endif %}
  49.                             {% if not editmode and not pimcore_image("zeilenicon").isEmpty() %}
  51.                                 <img src="{{ pimcore_image("zeilenicon").getThumbnail('homepage-icon') }}"
  52.                                      title="{{ pimcore_image("zeilenicon").getText() }}"
  53.                                      alt="{{ pimcore_image("zeilenicon").getAlt() }}" class="img-fluid w-50 mx-auto mb-3">
  55.                             {% endif %}
  58.                             <h2 class="text-center underline underline-zeilen position-relative">{{ 'zeilen'|trans({}) }}</h2>
  60.                         </div></div>
  63.                     <div class="row">
  64.                         {% for blog in blogsZeilen %}
  65.                             <div class="col-12 mb-5">
  67.                                 <div class="blog">
  68.                                     <a href="{{ blog.getFullPath() }}">
  69.                                         <div class="blog-date text-black">
  70.                                             {{ blog.getEditable('publicationDate').getData()|format_datetime('full', 'none', locale='nl') }}
  71.                                         </div>
  72.                                         <img src="{{ blog.getEditable('publicationHeader').getThumbnail('news-homepage-thumb') }}" class="img-fluid mb-3 d-inline-block">
  73.                                         {# <img src="https://via.placeholder.com/600" class="img-fluid mb-3 d-inline-block"> #}
  76.                                         {# <img src="/static/img/shape-cat1.svg" class="img-fluid"> #}
  78.                                         {#
  79.                                         <div class="news-text">
  80.                                             {{ blog.getEditable('blogFilters').getElements()[0].getO_key()|capitalize }}
  81.                                         </div> #}
  83.                                         <div class="position-relative news-text text-black">
  85.                                             <h5 class="text-uppercase text-black">
  86.                                                 {{ blog.getEditable('articleTitle') }}</h5>
  88.                                             <p class="text-black text-opacity-50">
  89.                                                 {# {{ blog.getEditable('newsContent') }} #}
  90.                                                 {{ blog.getEditable('articleContent')|truncate(150, '...')|raw }}
  91.                                             </p>
  93.                                             <a href="{{ blog.getFullPath() }}" class="text-link">{{ 'Lees meer'|trans({}) }}</a>
  94.                                         </div>
  95.                                     </a>
  96.                                 </div>
  98.                             </div>
  99.                         {% endfor %}
  100.                     </div>
  101.                 {% endif %}
  103.                 <div class="row"><div class="col-12 text-end">
  104.                         <a href="{{ pimcore_website_config('blog_document') }}?filter=29" class="text-link">
  105.                             {{ 'LEES ALLES VAN HET ZEILEN'|trans({}) }}</a>
  107.                     </div></div>
  111.             </div>
  112.             <div class="col d-none d-lg-block text-center">
  113.                 <div class="h-100 separator mx-auto"></div>
  114.             </div>
  115.             <div class="col-lg-3 surfen mb-5 mb-lg-0">
  116.                 {% if blogsSurfen is defined %}
  117.                     <div class="d-flex align-items-end cat-header-icon">
  118.                         <div class="mb-5 text-center">
  121.                             {% if editmode %}
  122.                                 <br>
  123.                                 {{ pimcore_image("windsurfenicon") }}
  124.                             {% endif %}
  126.                             {% if not editmode and not pimcore_image("windsurfenicon").isEmpty() %}
  128.                                 <img src="{{ pimcore_image("windsurfenicon").getThumbnail('homepage-icon') }}"
  129.                                      title="{{ pimcore_image("windsurfenicon").getText() }}"
  130.                                      alt="{{ pimcore_image("windsurfenicon").getAlt() }}" class="img-fluid w-50 mx-auto mb-3">
  132.                             {% endif %}
  135.                             <h2 class="text-center underline underline-windsurfen position-relative">{{ 'windsurfen'|trans({}) }}</h2>
  137.                         </div></div>
  140.                     <div class="row">
  141.                         {% for blog in blogsSurfen %}
  142.                             <div class="col-12 mb-5">
  144.                                 <div class="blog">
  145.                                     <a href="{{ blog.getFullPath() }}">
  146.                                         <div class="blog-date text-black">
  147.                                             {{ blog.getEditable('publicationDate').getData()|format_datetime('full', 'none', locale='nl') }}
  148.                                         </div>
  149.                                         <img src="{{ blog.getEditable('publicationHeader').getThumbnail('news-homepage-thumb') }}" class="img-fluid mb-3 d-inline-block">
  150.                                         <div class="position-relative news-text text-black">
  152.                                             <h5 class="text-uppercase text-black">
  153.                                                 {{ blog.getEditable('articleTitle') }}</h5>
  155.                                             <p class="text-black text-opacity-50">
  156.                                                 {# {{ blog.getEditable('newsContent') }} #}
  157.                                                 {{ blog.getEditable('articleContent')|truncate(150, '...')|raw }}
  158.                                             </p>
  160.                                             <a href="{{ blog.getFullPath() }}" class="text-link">{{ 'Lees meer'|trans({}) }}</a>
  161.                                         </div>
  162.                                     </a>
  163.                                 </div>
  165.                             </div>
  166.                         {% endfor %}
  167.                     </div>
  168.                 {% endif %}
  169.                 <div class="row"><div class="col-12 text-end">
  170.                         <a href="{{ pimcore_website_config('blog_document') }}?filter=28" class="text-link">
  171.                             {{ 'LEES ALLES VAN HET SURFEN'|trans({}) }}</a>
  173.                     </div></div>
  174.             </div>
  175.             <div class="col d-none d-lg-block text-center">
  176.                 <div class="h-100 separator mx-auto"></div>
  177.             </div>
  178.             <div class="col-lg-3 suppen">
  179.                 {% if blogsSuppen is defined %}
  180.                     <div class="d-flex align-items-end cat-header-icon">
  181.                         <div class="mb-5 text-center">
  184.                             {% if editmode %}
  185.                                 <br>
  186.                                 {{ pimcore_image("suppenicon") }}
  187.                             {% endif %}
  189.                             {% if not editmode and not pimcore_image("suppenicon").isEmpty() %}
  191.                                 <img src="{{ pimcore_image("suppenicon").getThumbnail('homepage-icon') }}"
  192.                                      title="{{ pimcore_image("suppenicon").getText() }}"
  193.                                      alt="{{ pimcore_image("suppenicon").getAlt() }}" class="img-fluid w-50 mx-auto mb-3">
  195.                             {% endif %}
  198.                             <h2 class="text-center underline underline-suppen position-relative">{{ 'suppen'|trans({}) }}</h2>
  200.                         </div></div>
  202.                     <div class="row">
  203.                         {% for blog in blogsSuppen %}
  204.                             <div class="col-12 mb-5">
  206.                                 <div class="blog">
  207.                                     <a href="{{ blog.getFullPath() }}" class="position-relative d-block">
  208.                                         <div class="blog-date text-black">
  209.                                             {{ blog.getEditable('publicationDate').getData()|format_datetime('full', 'none', locale='nl') }}
  210.                                         </div>
  211.                                         <img src="{{ blog.getEditable('publicationHeader').getThumbnail('news-homepage-thumb') }}" class="img-fluid mb-3 d-inline-block">
  212.                                         {# <img src="https://via.placeholder.com/600" class="img-fluid mb-3 d-inline-block"> #}
  215.                                         {# <img src="/static/img/shape-cat1.svg" class="img-fluid"> #}
  217.                                         {#
  218.                                         <div class="news-text">
  219.                                             {{ blog.getEditable('blogFilters').getElements()[0].getO_key()|capitalize }}
  220.                                         </div> #}
  222.                                         <div class="position-relative news-text text-black">
  224.                                             <h5 class="text-uppercase text-black">
  225.                                                 {{ blog.getEditable('articleTitle') }}</h5>
  227.                                             <p class="text-black text-opacity-50">
  228.                                                 {# {{ blog.getEditable('newsContent') }} #}
  229.                                                 {{ blog.getEditable('articleContent')|truncate(150, '...')|raw }}
  230.                                             </p>
  232.                                             <a href="{{ blog.getFullPath() }}" class="text-link">{{ 'Lees meer'|trans({}) }}</a>
  233.                                         </div>
  234.                                     </a>
  235.                                 </div>
  237.                             </div>
  238.                         {% endfor %}
  239.                     </div>
  240.                 {% endif %}
  241.                 <div class="row"><div class="col-12 text-end">
  242.                         <a href="{{ pimcore_website_config('blog_document') }}?filter=27" class="text-link">
  243.                             {{ 'LEES ALLES VAN HET SUPPEN'|trans({}) }}</a>
  245.                     </div></div>
  246.             </div>
  248.             {#
  249.             <div class="col-3">
  250.                 <h2>{{ 'Info '|trans }}</h2>
  251.                 <div>
  252.                     <p>
  253.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet assumenda, atque
  254.                         consectetur dolorum enim incidunt maxime qui, quo saepe similique vel voluptatibus. Aut deserunt
  255.                         enim eum maxime quis!
  256.                     </p>
  258.                 </div>
  259.             </div> #}
  261.         </div>
  264.     </div>
  268.     <div class="break-out my-5">
  269.         <div class="container-fluid">
  270.             <div class="row">
  271.                 <div class="col-12 p-0">
  273.                     <div class="row overflow-row g-0 justify-content-between">
  274.                         {#
  275.                         <div class="col d-none d-md-block position-relative" style="z-index: -1"></div> #}
  277.                         <div class="breakoutimg col-12 col-lg-4 position-relative mb-lg-0"
  278.                              style="z-index: -1;">
  280.                             <div class="col bg-secondary bg-opacity-25 d-block h-100 w-100">
  281.                             </div>
  283.                         </div><!--end col-->
  285.                         <div class="bgsail col-12 col-lg-5 position-relative mb-lg-0"
  286.                              style="z-index: -1;">
  288.                             <div class="col d-block h-100 w-100">
  292.                             </div>
  294.                         </div><!--end col-->
  297.                     </div>
  299.                     <div class="container overflow-content start-0 end-0 top-0">
  301.                         <div class="row h-100">
  302.                             {#
  303.                             <div class="col d-none d-md-block position-relative" style="z-index: -1"></div> #}
  304.                             <div class="col-12 col-lg-6 position-relative py-5">
  306.                                 {% if editmode %}
  307.                                     <br>
  308.                                     {{ pimcore_image("goldpartners") }}
  309.                                 {% endif %}
  311.                                 {% if not editmode and not pimcore_image("goldpartners").isEmpty() %}
  313.                                     <img src="{{ pimcore_image("goldpartners").getSrc() }}"
  314.                                          title="{{ pimcore_image("goldpartners").getText() }}"
  315.                                          alt="{{ pimcore_image("goldpartners").getAlt() }}" class="img-fluid">
  317.                                 {% endif %}
  319.                                 {#
  320.                                 {% if sponsors %}
  321.                                     {% for sponsor in sponsors %}
  322.                                         <h2>{{ 'Onze Golden Partners' }}</h2>
  323.                                         {% if  sponsor.getPartner() == "Gold Partner" %}
  324.                                             <div class="carousel-item active">
  325.                                                 <a href="{{ sponsor.partnerLink.direct }}"
  326.                                                    target="{{ sponsor.partnerLink.target }}">
  327.                                                     <h3>{{ sponsor.getTitle() }}</h3>
  328.                                                     <div class="row">
  329.                                                         {% for Image in sponsor.image %}
  330.                                                             <div class="col-4">
  332.                                                                 <img src="{{ Image.image.getThumbnail('slideshow-product') }}"
  333.                                                                      alt="{{ sponsor.getTitle() }}" class="img-fluid">
  334.                                                             </div>
  335.                                                         {% endfor %}
  336.                                                     </div>
  338.                                                 </a>
  339.                                             </div>
  340.                                         {% endif %}
  341.                                     {% endfor %}
  342.                                 {% endif %}
  343.                                 #}
  345.                             </div>
  348.                             <div class="breakouttext col-12 col-lg-6 py-5 ps-lg-5 d-flex align-items-center coltext position-relative"
  349.                                  style="z-index: 1">
  350.                                 <div class="w-100 h-100 d-flex align-items-center">
  351.                                     <div class="w-100">
  352.                                         <h3 class="text-uppercase fw-bold mb-5 text-start">{{ 'Kalender'|trans }} {{ 'now' | date('Y') }}</h3>
  353.                                         {% for cal in calender %}
  354.                                             <div class="mb-5">
  355.                                                 <span class="text-uppercase text-secondary">{{ cal.month }}</span>
  356.                                                 {% if cal.days is defined %}
  357.                                                     {% for day in cal.days %}
  358.                                                         {% if day.Features_home %}
  359.                                                             <div class="mt-3">
  360.                                                                 <div class="row">
  361.                                                                     <div class="col-2">
  362.                                                                         <p>{{ day.Datum|date("d-m-y") }}</p>
  363.                                                                     </div>
  364.                                                                     <div class="col-3">
  365.                                                                         <p>{{ day.start_u }} - {{ day.eind_u }}</p>
  367.                                                                     </div>
  368.                                                                     <div class="col-6">
  369.                                                                         <p>{{ day.dayinfo }} {{ day.Place }}</p>{{ day.Datum_description|raw }}
  370.                                                                     </div>
  371.                                                                 </div>
  372.                                                             </div>
  373.                                                         {% endif %}
  374.                                                     {% endfor %}
  376.                                                 {% else %}
  377.                                                     <p class="my-3">{{ 'Geen aanbevolen datum voor deze maand'|trans }}</p>
  378.                                                 {% endif %}
  379.                                             </div>
  380.                                         {% endfor %}
  382.                                         {% if editmode %}
  383.                                             <br>
  384.                                             {{ pimcore_link('kalenderLink') }}
  385.                                         {% endif %}
  387.                                         {% if not editmode %}
  388.                                             <a class="btn btn-outline-secondary" href="{{ pimcore_link('kalenderLink').getHref() }}">{{ pimcore_link('kalenderLink').getText() }}</a>
  389.                                         {% endif %}
  393.                                     </div>
  395.                                 </div><!--end w-100-->
  396.                             </div><!--end col-->
  398.                         </div><!--end row-->
  399.                     </div><!--end container-->
  402.                 </div><!--end col-->
  404.             </div><!--end row-->
  405.         </div><!--end container-fluid-->
  406.     </div>
  412.     <div class="container-fluid bg-secondary bg-opacity-25 py-5 my-5">
  413.         <div class="row">
  414.             <h3 class="text-uppercase text-center fw-bold mb-3">{{ 'Onze Sponsors'|trans }}</h3>
  415.             <div class="splide" id="sponsors">
  416.                 <div class="splide__track">
  417.                     <ul class="splide__list">
  418.                         {% for sponsor in sponsors %}
  419.                             {% for Image in sponsor.image %}
  420.                                 <li class="splide__slide">
  421.                                     {% if  sponsor.partnerLink %}<a href="{{ sponsor.partnerLink.direct }}"
  422.                                        target="{{ sponsor.partnerLink.target }}">{% endif %}
  423.                                         <img
  424.                                             src="{{ Image.image.getThumbnail('slideshow-sponsor') }}"
  425.                                             alt="{{ sponsor.getTitle() }}" class="img-fluid">
  426.                                     {% if  sponsor.partnerLink %}</a>{% endif %}
  427.                                 </li>
  428.                             {% endfor %}
  429.                         {% endfor %}
  430.                     </ul>
  431.                 </div>
  432.             </div>
  433.         </div>
  434.     </div>
  436.     <?xml version="1.0" encoding="utf-8"?>
  437.     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  438.          viewBox="0 0 1920 148.4" style="enable-background:new 0 0 1920 148.4;" xml:space="preserve">
  439.         <path class="st-primary-25" d="M0,148.4h1920V84.8c-212.9,29.4-354.5-12.5-458.9-25.3c-141.3-17.3-249.3-29.8-532.5,50.1
  440.     c-283.3,80-520-12.9-669.6-69C139.2-4.2,30-3,0,3v30.8V148.4z"/>
  441. </svg>
  445.     <div class="container-fluid bg-primary bg-opacity-25 pt-5">
  446. <div class="container mt-5">
  447.         <div class="row justify-content-between" >
  448.             <div class="col-12 col-lg-6 text-center d-flex align-items-center justify-content-center position-relative">
  450.                 <div class="{% if not editmode %}info-icon{% endif %}">
  452.                     <div class="rounded-circle bg-primary text-center mb-3 border border-white border-4">
  453.                         <h1 class="display-2 fw-bold text-white text-center">i</h1>
  454.                     </div>
  456.                     <h2>{{ pimcore_input("info", {'width': 300}) }}</h2>
  457.                 </div>
  459.                 <div>
  460.                     {% if document.property('googlemaps') is defined %}
  462.                         <iframe src="{{ document.property('googlemaps') }}" width="100%" height="350" frameborder="0"
  463.                                 style="border:0" allowfullscreen></iframe>
  465.                     {% endif %}
  469.                     {% if editmode %}
  470.                         <br>
  471.                         {{ pimcore_link('windfinderLink') }}
  472.                         {{ pimcore_image("windfinder") }}
  473.                     {% endif %}
  475.                     {% if not editmode and not pimcore_image("windfinder").isEmpty() %}
  476.                         <a href=" {{ pimcore_link('windfinderLink').getHref() }}">
  477.                             <img src="{{ pimcore_image("windfinder").getSrc() }}"
  478.                                  title="{{ pimcore_image("windfinder").getText() }}"
  479.                                  alt="{{ pimcore_image("windfinder").getAlt() }}" class="img-fluid w-25 mt-3">
  480.                         </a>
  481.                     {% endif %}
  482.                 </div>
  484.             </div>
  485.             <div class="col-12 col-lg-4">
  487.                 {% if editmode %}
  488.                     {{ pimcore_link('webcamLink') }}
  489.                     {{ pimcore_image("webcam") }}
  490.                 {% endif %}
  492.                 {% if not editmode and not pimcore_image("webcam").isEmpty() %}
  493.                     <a href=" {{ pimcore_link('webcamLink').getHref() }}">
  494.                         <img src="{{ pimcore_image("webcam").getSrc() }}"
  495.                              title="{{ pimcore_image("webcam").getText() }}"
  496.                              alt="{{ pimcore_image("webcam").getAlt() }}" class="img-fluid mt-3">
  497.                     </a>
  498.                 {% endif %}
  499.             </div>
  500.         </div>
  501. </div>
  502.     </div>
  505.     <?xml version="1.0" encoding="utf-8"?>
  506.     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  507.          viewBox="0 0 1920 214.8" xml:space="preserve">
  508.     <path class="st-secondary" d="M216,148.2C106.4,115.7,26.3,122.5,0,129.9v84.9h1920V2.8c-314,137.3-505,87.4-632,81.3
  509.     c-127-6.1-224-10.2-471,81.3S353,188.9,216,148.2z"/>
  510.         <path class="st-primary-25" d="M1920,0H0v97.5c40.7-2.1,104.7,2.1,183.5,26c140.7,42.6,363.6,113.9,618.9,23.7c255.4-90.2,355.3-85.1,486-77.6
  511.     c128,7.3,318.8,57.8,631.5-67.6V0z"/>
  512. </svg>
  515.     <script>
  516.         const onResizing = function(event) {
  517.             breakout = $( ".break-out" );
  518.             breakoutimgdiv = $( ".breakoutimg" );
  519.             breakoutimg = $(".breakoutimg").outerHeight();
  520.             breakouttext = $(".breakouttext").outerHeight();
  522.             if (breakouttext >= breakoutimg) {
  523.                 height = breakouttext + "px";
  525.             } else {
  526.                 height = "auto"
  527.             };
  529.             breakout.css('min-height', height);
  530.             breakoutimgdiv.css('min-height', height);
  531.             //console.log(height);
  532.         };
  534.         window.onresize = onResizing;
  535.         window.onload = onResizing;
  536.     </script>
  538. {% endblock %}