templates/blog/overview.html.twig line 1

Open in your IDE?
  1. {% extends base_layout() %}
  3. {% block content %}
  4.     <div
  5.         class="section section-default bg-white pt-5 pb-0">
  7.         {#
  8.                 {% if not editmode and not pimcore_image('publicationHeader').isEmpty() %}
  9.                     <div class="blog-image-header position-relative mb-5" style="display: flex;">
  10.                         <img src="{{ pimcore_image('publicationHeader').getThumbnail('blog-thumb') }}" class="blog-image bg-cover img-fluid w-100">
  11.         
  12.                         {% if not pimcore_input("publicationHeaderTitle").isEmpty() %}
  13.                             <div class="d-flex overlay text-center h-100">
  14.                                 <span class="m-auto">{{ pimcore_input("publicationHeaderTitle") }}</span>
  15.                             </div>
  16.                         {% endif %}
  17.                     </div>
  18.                 {% endif %}
  19.                 #}
  21.         <div class="container">
  22.             <div class="row">
  23.                 <div
  24.                     class="col-12">
  25.                     {#
  26.                                         {% if editmode %}
  27.                                             <div class="alert alert-info" role="alert">
  28.                                                 {% if editmode %}
  29.                                                     {% set message = 'Afbeelding' %}
  30.                                                     {% include 'includes/basicBlocks/admin/message/tip.html.twig' with {'message': message, 'type' : 'info'} %}
  31.                                                 {% endif %}
  32.                     
  33.                                                 {{ pimcore_image('publicationHeader', {
  34.                                                     "width": 800,
  35.                                                     "height": 200,
  36.                                                     "thumbnail": "blog-header",
  37.                                                     "class": "img-fluid w-100"
  38.                                                 }) }}
  39.                     
  40.                                                 {% if editmode %}
  41.                                                     {% set message = 'Titel op afbeelding' %}
  42.                                                     {% include 'includes/basicBlocks/admin/message/tip.html.twig' with {'message': message, 'type' : 'info'} %}
  43.                                                 {% endif %}
  44.                     
  45.                                                 {{ pimcore_input("publicationHeaderTitle") }}
  46.                                             </div>
  47.                                         {% endif %}
  48.                                         #}
  50.                     <div class="text-center text-black mb-5">
  51.                         <h1>
  52.                             {{ pimcore_input('heading_blogs', {
  53.                                 "placeholder" : 'page title'|trans
  54.                             }) }}
  55.                         </h1>
  56.                     </div>
  58.                     <div class="content py-2">
  59.                         {{ pimcore_wysiwyg('blogContent') }}
  60.                     </div>
  62.                     {% if blogfilters is defined %}
  63.                         {% if blogfilters|length > 0 %}
  64.                             <div class="row filters my-3 text-center">
  65.                                 <div class="col-sm-12">
  66.                                     <a class="btn btn-primary text-uppercase font-weight-bold btn-filter mb-1 active" data-filter="all">
  67.                                         <span class="text-white">
  68.                                             {{ 'Alle'|trans }}
  69.                                         </span>
  70.                                     </a>
  72.                                     {% for blogfilter in blogfilters %}
  73.                                         <a class="btn btn-primary text-uppercase font-weight-bold btn-filter mb-1" data-filter="{{ blogfilter.getId() }}">
  74.                                             <span class="text-white">
  75.                                                 {{ blogfilter.getFilterName() }}
  76.                                             </span>
  77.                                         </a>
  78.                                     {% endfor %}
  79.                                 </div>
  80.                             </div>
  81.                         {% endif %}
  82.                     {% endif %}
  85.                     {% if articles is defined %}
  86.                         <div class="articles row py-2">
  87.                             {{ include('includes/blog/article.html.twig', {
  88.                                 'articles': articles
  89.                             }) }}
  90.                         </div>
  92.                         <div class="load-more-items py-3">
  93.                             <div class="aligner">
  94.                                 <div class="loading-circle loading-bar-primary loading-bg-default mx-auto"></div>
  95.                             </div>
  97.                             <input type="hidden" class="pageCounter" value="1">
  98.                         </div>
  99.                     {% endif %}
  102.                 </div>
  103.             </div>
  104.         </div>
  105.     </div>
  106.     <script>
  107.         $('.btn-filter').click(function (e) {
  108. var filter = $(this).data('filter');
  109. var fetchUrl = $(location).attr('href');
  111. $(".btn-filter").each(function (index) {
  112. $(this).removeClass('active');
  113. });
  115. $(this).addClass('active');
  117. $.ajax({
  118. url: fetchUrl,
  119. type: 'GET',
  120. data: {
  121. filter: filter
  122. },
  123. success: function (result) {
  124. if (result.result) {
  125. $(".articles").html(result.result);
  126. $('.pageCounter').val(1);
  127. } else if (result.noresult) {
  128. $(".articles").html(result.noresult);
  129. $('.pageCounter').val(1);
  130. }
  131. }
  132. });
  133. });
  134.     </script>
  135. {% endblock %}