templates/Theme/regiovacatures/pages/blog_overview.html.twig line 1

Open in your IDE?
  1. {% import 'page/macro/breadcrumbs.html.twig' as breadcrumbNode %}
  2. <div data-component="BlogFilter" data-detail-route="blog_detail" data-index-route="blogs"
  3.      data-filter-route="blogs_with_filters" data-limit="{{ limitPerPage }}">
  4.     {% if breadcrumbs is defined %}
  5.         <div class="row">
  6.             <div class="col-12">
  7.                 {{ breadcrumbNode.generate(breadcrumbs) }}
  8.             </div>
  9.         </div>
  10.     {% endif %}
  11.     <div class="title is-display-flex is-justify-content-space-between">
  12.         <h1>{{ 'News'|trans }}</h1>
  13.         <div class="sorting w-auto is-border-0 is-margin-0 is-padding-0">
  14.             <form id="blog-filter-form" action="{{ path('blogs') }}" method="get">
  15.                 <ul>
  16.                     <span>{{ 'Sort by'|trans }}:</span>
  17.                     <li class="current"><a data-sort="date" data-dir="desc" href="#" class="desc"
  18.                                            data-orderable="true">{{ 'Placement date'|trans }}</a></li>
  19.                     <ul class="checkbox-group d-inline-block">
  20.                         {% for category in categories %}
  21.                             <li>
  22.                                 <input type="checkbox" class="filter-checkbox" id="{{ category.slug }}"
  23.                                        value="{{ category.slug }}"
  24.                                        name="filters[]" {% if category.slug in selectedFilters %} checked {% endif %}>
  25.                                 <label for="{{ category.slug }}">
  26.                                     {{ category.category }}</label>
  27.                             </li>
  28.                         {% endfor %}
  29.                     </ul>
  30.                 </ul>
  32.                 <input name="sortDir" type="hidden" value="desc"/>
  33.                 <input name="limit" type="hidden" value="{{ limitPerPage }}">
  34.             </form>
  35.         </div>
  36.     </div>
  37.     <div class="row">
  38.         <main class="col-12 col-md-8">
  39.             <div id="blog-list" class="main-content blog">
  40.                 <div class="row">
  41.                     <script id="blogTemplate" type="text/x-jsrender">
  42.                     <article class="col-12 col-md-6 flex-eq-height">
  43.                         <div class="card">
  44.                                 <%if banner_image %>
  45.                                     <div class="card-img-top">
  46.                                         <a href="<%generateBlogUrl id slug/%>" title="<%:title%>">
  47.                                             <img loading="lazy" src="<%:banner_image.w992xh550%>" alt="<%:title%>" class="img-responsive">
  48.                                         </a>
  49.                                     </div>
  50.                                 <%/if%>
  51.                                 <div class="card-body">
  52.                                     <div class="blog">
  53.                                         <div class="blog-title">
  54.                                             <a title="<%:title%>" href="<%generateBlogUrl id slug/%>" class="mt-0">
  55.                                                 <h3><%:title%></h3>
  56.                                             </a>
  57.                                         </div>
  58.                                         <div class="blog-intro">
  59.                                             <p>
  60.                                                 <%stripIntro intro 55/%>
  61.                                             </p>
  62.                                         </div>
  63.                                         <div class="blog-footer">
  64.                                            <div class="date is-margin-bottom-10">
  65.                                            <i class="fal fa-calendar-alt icon-before is-color-primary"></i> <%dateFormat:created_at 'd-M-Y'%></div>&nbsp;&nbsp; | &nbsp;&nbsp;
  66.                                             <a href="<%generateBlogUrl id slug/%>" title="<%:title%>">
  67.                                                 {{ 'Read more'|trans }}<i class="fal fa-angle-right icon-after"></i>
  68.                                             </a>
  69.                                         </div>
  70.                                     </div>
  71.                             </div>
  72.                         </div>
  73.                     </article>
  75.                     </script>
  76.                 </div>
  78.                 <div id="blog-list">
  79.                     <div id="blog-results" class="row">
  80.                         <p>Loading....</p>
  81.                     </div>
  82.                 </div>
  84.                 <div class="button-set h-align h-align-center">
  85.                     <a href="#" title="{{ 'Load more blog posts'|trans }}"
  86.                        class="load-more is-btn is-btn-outlined is-btn-outlined-primary">
  87.                         <i class="far fa-plus icon-before"></i> {{ 'Load more'|trans }}
  88.                     </a>
  89.                 </div>
  90.             </div>
  91.         </main>
  93.         <aside class="blog-sidebar col-12 col-md-4">
  94.             <div class="card is-box-shadow-0 newsletter-signup is-background-color-default">
  95.                 <div class="card-body">
  96.                     <h2>Op de hoogte blijven van het
  97.                         laatste nieuws?</h2>
  98.                     <p>Meld je aan voor onze nieuwsbrief</p>
  99.                     <a href="/newsletter" class="is-btn is-background-color-primary">
  100.                         Aanmelden
  101.                     </a>
  102.                 </div>
  103.             </div>
  104.             <div class="recent-vacancies">
  105.                 <h2 class="is-font-size-27">{{ 'Latest vacancies'|trans }}</h2>
  106.                 <div class="row">
  107.                     {recentVacancies}
  108.                 </div>
  109.             </div>
  110.         </aside>
  111.     </div>
  112. </div>
  114. <div class="clearfix"></div>