templates/Blog/blog_category.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/layout.html.twig' %}
  2. {% block content %}
  4. {% set bannerImage = ''%}
  7. {% if blogcategory.bannerImage %}
  8.     {% set bannerImage = blogcategory.bannerImage %}
  9. {% else %}
  10.     {% set bannerImage = '/insights/insight_banner_image_general.jpg' %}
  11. {% endif %}
  13.   <!--Hero Section -->
  14.   <div id="hero" class="has-image has-logo">
  15.   <div id="hero-styles">
  16.     <div id="hero-caption" class="content-max-width">
  17.       <div class="inner">
  18.         <div class="hero-title-wrapper">
  19.           <div class="one_half">
  20.             <div class="inner">
  21.               <div
  22.                 class="hero-title hero-title-small"
  23.                 style="margin-bottom: 1rem"
  24.               >
  25.               <h1 class="h1-banner-heading">
  26.                   <span>{{blogcategory.name}}</span>
  27.               </h1>
  28.               </div>
  29.               <div class="hero-text">
  30.                 <span>
  31.                   {{blogcategory.description}}
  32.                 </span>
  33.               </div>
  34.             </div>
  35.           </div>
  36.           <div class="one_half last"></div>
  37.         </div>
  38.       </div>
  39.     </div>
  40.     <div id="hero-footer">
  41.       <div class="hero-footer-right">
  42.         <div class="button-wrap right scroll-down">
  43.           <div class="icon-wrap parallax-wrap">
  44.             <div class="button-icon parallax-element">
  45.               <i class="fa fa-angle-down"></i>
  46.             </div>
  47.           </div>
  48.           <div class="button-text sticky right">
  49.             <span data-hover="Scroll to navigate"
  50.               >Scroll to navigate</span
  51.             >
  52.           </div>
  53.         </div>
  54.       </div>
  55.     </div>
  56.   </div>
  57. </div>
  58. <div id="hero-image-wrapper">
  59.   <div id="hero-background-layer" class="parallax-scroll-image">
  60.     <div
  61.       id="hero-bg-image"
  62.       style="
  63.         background-image: url({{bannerImage}});
  64.       "
  65.     ></div>
  66.   </div>
  67. </div>
  68. <!--/Hero Section -->
  72. <!-- Main Content -->
  73. <div id="main-content">
  74. <!-- Main Page Content -->
  75. <div id="main-page-content" class="content-max-width">
  76.   <div class="content-row light-section" data-bgcolor="#fff">
  77.     <!-- Row -->
  78.     <div
  79.       class="content-row row_padding_top row_padding_bottom light-section change-header-color"
  80.       data-bgcolor="#fff"
  81.     >
  82.       <div class="one_half">
  84.       {% if editmode %}
  85.       {{ pimcore_input("HeadlineOne", {"placeholder": "heading two"}) }}
  86.       {{ pimcore_input("HeadlineTwo", {"placeholder": "heading two"}) }}
  87.     {% else %}
  88.         <h2 class="has-mask-fill our-product-N no-margins">{{ pimcore_input("HeadlineOne") }}</h2>
  89.         <h2 class="has-mask-fill our-product-N">  {{ pimcore_input("HeadlineTwo") }}</h2>
  91. {% endif %}
  93.         <hr />
  95.         <p class="has-animation" data-delay="0">
  96.         {{ pimcore_textarea("description",{
  97.             "nl2br": false,
  98.             "height": 100,
  99.             "placeholder": "content"
  100.         }) }}
  101.         </p>
  102.       </div>
  104.       <div class="one_half last"></div>
  105.     </div>
  107.     
  108.     <!-- blogs grid -->
  109.     <div class="">
  110.       <!-- Row -->
  111.       <div  class="content-row row_padding_bottom light-section change-header-color"  data-bgcolor="#fff">
  112.         <div class="blogs-layout">
  113.           <div class="blogs-main change-header" id='blog-category'>
  114.           {% set catUrl = ''%}
  115.           {% set catId = ''%}
  116.           {% set image = '/assets/images/blog-aside.png'%}
  117.           {% set altTag = 'Design Retainer | Centric' %}
  119.           {% if blogs|length > 0 %}
  121.           {% for blog in blogs %}
  123.             {% if blog.category.image %}
  124.               {% set image = blog.category.image %}
  125.               {% set altTag =  blog.category.imageAltTag %}
  126.             
  127.             {% endif %}
  129.           {% set catUrl =  blog.category.url %}
  130.           {% set catId =  blog.category.id %}
  132.           {% include "Blog/blog_category_teaser.html.twig" %}
  133.           
  134.           {% endfor %}
  135.             
  136.         {% endif %}
  137.        
  138.           </div>
  139.           <aside class="blogs-aside">
  140.           <img
  141.             src="/assets/images/icons/filter-icon.svg"
  142.             alt="Icon"
  143.             class="filter-icon"
  144.           />
  145.           <form action="/insights-search" method ="GET" class="blog-aside-form">
  146.             <div class="search-input">
  147.               <input type="text" placeholder="Search" name="name"/>
  148.               <span class="search-input-icon">
  149.                 <i class="fa-solid fa-magnifying-glass"></i>
  150.               </span>
  151.             </div>
  152.             <select name="category" class="primary-select">
  153.             {% if categories|length > 0 %}
  154.             {% for category in categories %}
  156.             {% if category.id == catId %}
  158.             <option value="" selected> {{category.name}} </option>
  159.             {% else %}
  161.           <option value="{{category.url}}" > {{category.name}} </option>
  163.           {% endif %}
  164.               
  165.             {% endfor %}
  166.               
  167.             {% endif %}
  168.           <option value="all" > {{"All" |trans}} </option>
  169.               
  170.             </select>
  171.             <button
  172.               class="primary-button button-square has-animation"
  173.               style="width: 100%"
  174.             >
  175.               Search
  176.             </button>
  177.           </form>
  179.           {% include "Blog/__banner_sidebar.html.twig" with {
  180.                         'image': image,
  181.             'alt':altTag
  182.             
  183.             } %}
  184.                 
  185.             
  186.          
  187.         </aside>
  188.         </div>
  190.         <!-- blog pagination starts -->
  191.         <div class="blog-pagination" id="paginate" data-url="/insights-{{catUrl}}-listing?page=">
  192.              {% 
  193.                 include "Blog/pagination.html.twig" with {
  194.                     'paginationVariables': pagination,
  195.                     'catUrl':catUrl } 
  196.             %}
  197.         </div>
  198.          <!-- blog pagination ends -->
  199.       </div>
  200.       <!--/Row -->
  201.     </div>
  202.     <!-- /blogs grid -->
  204.     <!--/Row -->
  205.   </div>
  206. </div>
  207. <!--/Main Page Content -->
  209. </div>
  210. <!--/Main Content -->
  212. <script src="/assets/js/jquery.min.js"></script>
  214. <script>
  216.     $(document).ready(function () {
  217.     
  218.     function blogList( page) {
  219.         let postUrl = $(this).data('url');
  220.         console.log(postUrl);
  221.             $.ajax({
  222.             url: postUrl,
  223.             type: 'POST',
  224.             data: {
  225.                 page: page
  226.             },
  227.             success: function (response) {
  228.                 $('#blog-category').html('');
  230.                 $('#blog-category').html(response.html);
  231.                  $('#paginate').empty()
  232.           
  233.                   $('#paginate').html(response.pagination);
  234.                
  235.             }
  236.         });
  237.     }
  238.  
  240.     function handleFilterChange(event) {
  241.           
  242.         var page = $(event.target).data('value') || $(event.target).parent().data('value');
  243. console.log(page)
  244.            blogList(page);
  245.     }
  247.     
  249.     $('#paginate').on('click', handleFilterChange);
  250.         });
  252. </script>
  257. {% endblock %}