templates/front/blog/blog.twig line 1

Open in your IDE?
  1. {% extends "front/layouts/default.twig" %}
  3. {% block content %}
  4.  <div class="bg-nav space-under-nav">
  5.         <div class="container">
  6.             <div class="row justify-content-center">
  7.                 <div class="col-12">
  8.                     <div class="row align-items-center filter__list uppercase mt-lg-3">
  9.                         <div class="col-auto">
  10.                             <a href="{{ path('front-page', {url: get_page_url(app.request.locale, constant('App\\Config\\Pages::HOMEPAGE'))}) }}" class="btn filter__button back-btn text-nowrap"><span
  11.                                     class="fz-20 text-secondary">
  12.                                 < </span>{{ 'USER_ZONE.BLOG.BUTTON_FIRST'|trans() }}</a>
  13.                         </div>
  14.                     </div>
  15.                 </div>
  16.             </div>
  17.         </div>
  18.     </div>
  19.     <div class="container">
  20.         <div class="row justify-content-center">
  21.             <div class="col-12 mt-5">
  22.                 <div class="row">
  23.                     <div class="content-wrapper col-lg-8">
  24.                         <div class="row header">
  25.                             <h1>{{ 'USER_ZONE.BLOG.TEXT_FIRST'|trans() }}</h1>
  26.                         </div>
  27.                     </div>
  28.                 </div>
  30.                 <div class="row page-nav mt-4">
  31.                     <div class="col-12">
  32.                         <div class="row">
  33.                             <div class="col-12 col-lg-12">
  34.                                 <div class=" py-2 border-2 border-top border-bottom border-nonary">
  35.                                     <div class="row justify-content-start fz-14 bold text-octonary align-items-center filter-checkbox">
  36.                                         <div class="mx-2 fmx-lg-2 mt-3 mt-lg-0 col-5 col-lg-auto">
  37.                                             <a href="#" class="text-octonary filter_blog" data-filter-key="category" data-filter="all">{{ 'USER_ZONE.BLOG.LIST_ITEM_1'|trans() }}</a>
  38.                                         </div>
  39.                                         <div class="mx-2 mt-3 mt-lg-0 col-5 col-lg-auto">
  40.                                             <div class="row custom-select py-lg-0">
  41.                                                 <select name="blog-select" id="blog-select" class="filter-industry">
  42.                                                         <option value="" selected>{{ 'USER_ZONE.BLOG.ALL_INDUSTRY'|trans }}</option>
  43.                                                     {% for industry in industrys %}
  44.                                                         <option value="{{ industry.name|default('') != '' ? industry.name|default('') : industry.translation['en']['nameCategory']|default('') }}" {% if app.request.attributes.get('originalRequest').query.get('industry') == (industry.name|default('') != '' ? industry.name|default('') : industry.translation['en']['nameCategory']|default('')) %}selected{% endif %}>
  45.                                                         {% if app.request.locale == "pl" %}
  46.                                                             {{ industry.name|default('') != '' ? industry.name|default('') : industry.translation['en']['nameCategory']|default('') }}
  47.                                                         {% else %}
  48.                                                             {{ industry.translation['en']['nameCategory']|default('') != '' ? industry.translation['en']['nameCategory']|default('') : industry.name|default('') }}
  49.                                                         {% endif %}
  50.                                                         </option>
  51.                                                     {% endfor %}
  52.                                                 </select>
  53.                                                 <label for="blog-select" class="custom-arrow custom-arrow-black"></label>
  54.                                             </div>
  55.                                         </div>
  56.                                         <div class="mx-2 mt-3 mt-lg-0 col-5 col-lg-auto">
  57.                                             <a href="#" class="text-octonary filter_blog" data-filter-key="category" data-filter="general">{{ 'USER_ZONE.BLOG.LIST_ITEM_5'|trans() }}</a>
  58.                                         </div>
  59.                                         <div class="mx-2 mt-3 mt-lg-0 col-5 col-lg-auto">
  60.                                             <a href="#" class="text-octonary filter_blog" data-filter-key="category" data-filter="advice">{{ 'USER_ZONE.BLOG.LIST_ITEM_2'|trans() }}</a>
  61.                                         </div>
  62.                                         <div class="mx-2 mt-3 mt-lg-0 col-5 col-lg-auto">
  63.                                             <a href="#" class="text-octonary filter_blog" data-filter-key="category" data-filer-key="category"data-filter="job">{{ 'USER_ZONE.BLOG.LIST_ITEM_3'|trans() }}</a>
  64.                                         </div>
  65.                                         <div class="mx-2 mt-3 mt-lg-0 col-5 col-lg-auto">
  66.                                             <a href="#" class="text-octonary filter_blog" data-filter-key="category" data-filter="benefits">{{ 'USER_ZONE.BLOG.LIST_ITEM_4'|trans() }}</a>
  67.                                         </div>
  68.                                     </div>
  69.                                 </div>
  70.                             </div>
  71.                         </div>
  72.                     </div>
  73.                 </div>
  75.                 <div class="row py-5 border-bottom border-nonary">
  77.                 {% for blog in blogs %}
  78.                     <div class="col-lg-4 col-12 col-sm-6">
  79.                         <div class="blog-card">
  80.                             <div class="blog-card-content">
  81.                                 <div class="row">
  83.                                     <div class="col-12">
  84.                                         {% for photo in blog.photo %}
  85.                                             <a href="{{ path('front-page', {url: get_page_only_url(app.request.locale, blog.id )}) }}">
  86.                                                 <img src="{{asset('blog/' ~ photo.fileName ~ '.' ~ photo.extension)|imagine_filter('blog_img') }}" alt="">
  87.                                             </a>
  88.                                         {% endfor %}
  89.                                     </div>
  91.                                     <div class="col-12 mt-3">
  92.                                         <span class="blog-card-date">{{blog.createdAt|date('d.m.Y')}} | {{ blog.fullName }}</span>
  93.                                     </div>
  95.                                     <div class="col-12 mt-2">
  96.                                         <h2 class="blog-card-h2 mb-0">
  97.                                             <a href="{{ path('front-page', {url: get_page_only_url(app.request.locale, blog.id )}) }}">
  98.                                                 <p class="m-0 p-0" style="
  99.                                                 text-overflow: ellipsis;
  100.                                                 overflow: hidden;
  101.                                                 white-space: nowrap;">
  102.                                                 {% if app.request.locale == "pl" %}
  103.                                                     {{blog.title}}
  104.                                                 {% endif %}
  106.                                                 {% if app.request.locale == "en" %}
  107.                                                     {{blog.translation['title'] ?? ''}}
  108.                                                 {% endif %}
  109.                                                 </p>
  110.                                             </a>
  111.                                         </h2>
  112.                                     </div>
  114.                                     <div class="col-12">
  115.                                         <p style="
  116.                                         text-overflow: ellipsis;
  117.                                         overflow: hidden;
  118.                                         white-space: nowrap;">
  119.                                         {% if app.request.locale == "pl" %}
  120.                                             {{ blog.passion }}
  121.                                         {% endif %}
  123.                                         {% if app.request.locale == "en" %}
  124.                                             {{ blog.translation['passion'] ?? '' }}
  125.                                         {% endif %}
  126.                                         </p>
  127.                                     </div>
  128.                                 </div>
  129.                             </div>
  130.                             <div class="col-12 mt-4 text-center">
  131.                                 <a href="{{ path('front-page', {url: get_page_only_url(app.request.locale, blog.id)}) }}" class="btn btn-outline-info btn-md">{{ 'USER_ZONE.BLOG.BUTTON_READ'|trans() }}</a>
  132.                             </div>
  133.                         </div>
  134.                     </div>
  135.                  {% endfor  %}
  136.                 </div>
  137.                 <div class="col-auto mb-5 text-center pagination-wrapper">
  138.                     <a href="#" class="custom-arrow pagination pagination-back button-pagination" data-filter-key="page" data-filter-value="{{ (thisPage) - 1 > 1 ? (thisPage) - 1 : 1 }}"></a>
  139.                     <div>
  140.                         <label class="pagination-label" for="quantity">{{ thisPage }} {{ 'USER_ZONE.PAGINATION.OUT_OF'|trans }} {{ maxPages }}</label>
  141.                     </div>
  142.                     <a href="#" class="custom-arrow pagination pagination-next button-pagination" data-filter-key="page" data-filter-value="{{ (thisPage) + 1 <= maxPages ? (thisPage) + 1 : thisPage }}"></a>
  143.                 </div>
  144.             </div>
  145.         </div>
  146.     </div>
  147.     </div>
  148. {% endblock %}
  150. {% block script %}
  151. <script>
  152.     let filters = [];
  153.     let filtersString = '';
  154.     let page = '';
  155.     let searchParams = new URLSearchParams(window.location.search);
  156.     let industry = searchParams.get('industry');
  157.     let category = searchParams.get('category');
  159.     $(document).on('click','.filter_blog',function(){
  160.         $('.checked-filter').removeClass('checked-filter');
  161.         $(this).addClass('checked-filter');
  162.      
  163.         createFiltersString();
  164.         let url = buildUrl();
  165.       
  166.         window.history.pushState({path: url}, '', url);
  167.         $.get(url, function (data) {
  168.            location.reload();
  169.         })
  170.     });
  172.     function createFiltersString() {
  173.         filtersString = '';
  174.         page = '';
  175.         $('.filter-checkbox .checked-filter').each(function() {
  176.             if($('.filter-industry').val() != ''){
  177.                 if (filtersString === '') {
  178.                     filtersString += '?';
  179.                     filtersString += 'industry' + '=' + $('.filter-industry').val();
  180.                 } else {
  181.                     filtersString += '&';
  182.                     filtersString += 'industry' + '=' + $('.filter-industry').val();
  183.                 }
  184.             }
  185.                 if (filtersString === '') {
  186.                     filtersString += '?';
  187.                     filtersString += $(this).data('filter-key') + '=' + $(this).data('filter');
  189.                 } else {
  190.                     filtersString += '&';
  191.                     filtersString += $(this).data('filter-key') + '=' + $(this).data('filter');
  192.                 }
  194.                 if($(this).data('filter') == "all"){
  195.                     filtersString = '';
  196.                 }else{
  197.                     page += '&page=1'; 
  198.                 }
  199.                
  200.             // }
  201.         });
  202.     }
  204.     function createPage(button) {
  205.         filtersString = '';
  206.         page = '';
  208.         if(industry){
  209.             filtersString = '?industry='+industry;
  210.             if(category)
  211.             {
  212.                filtersString += '&category='+category;
  213.             }
  214.             page += '&';
  215.             page += $(button).data('filter-key') + '=' + $(button).data('filter-value');
  216.         }else{
  217.             page += '?';
  218.             page += $(button).data('filter-key') + '=' + $(button).data('filter-value');
  219.         }
  220.     }
  222.     createFiltersString();
  224.     $(document).on('change', '.filter-industry', function (e) {
  225.         let url = buildUrl();
  226.         window.history.pushState({path: url}, '', url);
  227.         if (filtersString === '') {
  228.             url += '?industry=' + $('.filter-industry').val() + '&' + 'page=1' ;
  229.         } else {
  230.             url += '&industry=' + $('.filter-industry').val() + '&' + 'page=1' ;
  231.         }
  233.         if($('.filter-industry').val() == ""){
  234.             url = '';
  235.         }
  237.         window.history.pushState({path: url}, '', url);
  238.         $.get(url, function (data) {
  239.            location.reload();
  240.         })
  241.     });
  243.     $(document).on('click', '.button-pagination', function (e) {
  244.         createPage($(this));
  245.         let url = buildUrl();
  246.         window.history.pushState({path: url}, '', url);
  248.         location.reload();
  249.         return false;
  250.     });
  252.     function buildUrl() {
  253.         let newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + filtersString + page;
  254.         return newUrl;
  255.     }
  256. </script>
  257. {% endblock %}