templates/Blog/blogDetail.html.twig line 1

Open in your IDE?
  2. {% extends 'layouts/layout.html.twig' %}
  5. {% set bannerImage = ''%}
  7. {% if blog.image %}
  8.     {% set bannerImage = blog.image %}
  9. {% elseif blog.category and blog.category.bannerImage %}
  10.     {% set bannerImage = blog.category.bannerImage %}
  11. {% else %}
  12.     {% set bannerImage = '/insights/insight_banner_image_general.jpg' %}
  13. {% endif %}
  16. {% block ogTags %}
  17. <meta property="og:title" content="{{blog.title}}">
  18. <meta property="og:image" content="{{ app.request.getSchemeAndHttpHost() ~ bannerImage }}">
  19. <meta property="og:url" content="{{blog.url}}">
  20. <meta property="og:description" content="{{blog.shortDescription}}">
  21. {% endblock %}
  23. {% block content %}
  28.     <!--Hero Section -->
  29.     <div id="hero" class="has-image has-logo">
  30.     <div id="hero-styles">
  31.       <div id="hero-caption" class="content-max-width">
  32.         <div class="inner">
  33.           <div class="hero-arrow"><i class="arrow-icon"></i></div>
  34.           <div class="hero-subtitle">
  35.             <span>{{blog.date|date('Y')}} </span>
  36.             {# <span>{{blog.postedBy}}</span> #}
  37.           </div>
  39.           <div class="hero-title-wrapper">
  40.             <div class="blog-N hero-title hero-title-small">
  41.                 <h1><span>{{blog.title}}</span></h1>
  42.               {# <span>Electronics | Navigating</span>
  43.               <span>the Digital Landscape</span> #}
  44.             </div>
  45.           </div>
  46.         </div>
  47.       </div>
  48.       <div id="hero-footer">
  49.         <div class="hero-footer-right">
  50.           <div class="button-wrap right scroll-down">
  51.             <div class="icon-wrap parallax-wrap">
  52.               <div class="button-icon parallax-element">
  53.                 <i class="fa fa-angle-down"></i>
  54.               </div>
  55.             </div>
  56.             <div class="button-text sticky right">
  57.               <span data-hover="Scroll to navigate"
  58.                 >Scroll to navigate</span
  59.               >
  60.             </div>
  61.           </div>
  62.         </div>
  63.       </div>
  64.     </div>
  65.   </div>
  66.   <div id="hero-image-wrapper">
  67.     <div id="hero-background-layer" class="parallax-scroll-image">
  68.       <div id="hero-bg-image">
  69.             <img src="{{bannerImage}}" alt="{{blog.title}}" id="hero-bg-image"class="insights-header-image">
  70.     </div>
  71.     </div>
  72.   </div>
  73.   <!--/Hero Section -->
  75.   <!-- Main Content -->
  76.   <div id="main-content">
  77.     <!-- Main Page Content -->
  78.     <div id="main-page-content" class="content-max-width">
  79.       <div class="blog-detail">
  80.         <!-- Row -->
  81.         <div
  82.           class="content-row row_padding_bottom row_padding_top light-section change-header-color"
  83.           data-bgcolor="#fff"
  84.         >
  85.           <div class="blogs-layout">
  86.             <div class="blogs-main blogs-main-Headings">
  87.               <div class="blog-detail-header">
  88.                 {# <h5>{{blog.postedBy}}</h5> #}
  89.                 <h5>{{blog.date|date("d/m/Y")}}</h5>
  90.               </div>
  91.               {{ blog.content | raw}}
  93.               {% if blogPosts and blogPosts|length > 0 %}
  94.               <div>
  95.                 <div class="one_half">
  96.                   <h3 class="has-mask-fill no-margins">Read</h3>
  97.                   <h3 class="has-mask-fill">More Stories</h3>
  98.                 </div>
  99.                 <hr />
  100.                 <div class="blog-detail-blogs change-header">
  102.                 {% for blogPost in blogPosts %}
  103.                     
  104.                 
  105.                 
  106.                   <div class="blogs-blog">
  107.                     <div class="hero-arrow">
  108.                       <i class="arrow-icon"></i>
  109.                     </div>
  110.                     <div class="next-hero-subtitle">
  111.                       <span>{{blogPost.date|date("d/m/Y")}}</span>
  112.                       {# <span>{{blogPost.postedBy}}</span> #}
  113.                     </div>
  114.                     <div class="news-panel-title">
  115.                       <span>{{blogPost.title}}</span
  116.                       >
  117.                     </div>
  118.                     <a href="/insights/{{blogPost.category.url ~ '/' ~ blogPost.url}}" class="has-animation has-icon-end">
  119.                       Read More
  120.                     </a>
  121.                   </div>
  122.                 {% endfor %}
  123.                 
  125.                 </div>
  126.               </div>
  127.             {% endif %}
  128.             </div>
  129.             <aside class="blogs-aside">
  130.                             <img
  131.                               src="/assets/images/icons/filter-icon.svg"
  132.                               alt="Icon"
  133.                               class="filter-icon"
  134.                             />
  135.                             <form action="/insights-search" method ="GET" class="blog-aside-form">
  136.                             <div class="search-input">
  137.                               <input type="text" placeholder="Search" name="name"/>
  138.                               <span class="search-input-icon">
  139.                                 <i class="fa-solid fa-magnifying-glass"></i>
  140.                               </span>
  141.                             </div>
  142.                             <select name="category" class="primary-select">
  143.                               {% if categories|length > 0 %}
  144.                                 {% for category in categories %}
  145.                 
  146.                                   {% if category.id == blog.category.id %}
  147.                 
  148.                                     <option value="" selected> {{category.name}} </option>
  149.                                   {% else %}
  150.                 
  151.                                     <option value="{{category.url}}" > {{category.name}} </option>
  152.                 
  153.                                   {% endif %}
  154.                                 
  155.                                 {% endfor %}
  157.                                 
  158.                                 
  159.                               {% endif %}
  160.                             <option value="all" > {{"All" |trans}} </option>
  161.                               
  162.                             </select>
  163.                             <button
  164.                               class="primary-button button-square has-animation"
  165.                               style="width: 100%"
  166.                             >
  167.                               Search
  168.                             </button>
  169.                           </form>
  171.                             {% set image = ''%}
  173.                             {% if blog.bannerImage %}
  174.                                 {% set image = blog.bannerImage %}
  175.                             {% elseif blog.category and blog.category.image %}
  176.                                 {% set image = blog.category.image %}
  177.                             {% else %}
  178.                                 {% set image = '/assets/images/blog-aside.png'%}
  179.                             {% endif %}
  180.                             {% include "Blog/__banner_sidebar.html.twig" with {
  181.                         'image': image,
  182.                         'alt':'Design Retainer | Centric'
  183.             } %}
  184.                           </aside>
  185.           </div>
  186.         </div>
  187.         <!--/Row -->
  188.       </div>
  190.     <!-- Contact Form Start -->
  191.         {% include "includes/contact_us_new_c2_form.html.twig" %}
  193.     <!-- Contact Form Start -->
  194.     </div>
  195.     <!--/Main Page Content -->
  197.     
  198.   </div>
  199.   <!--/Main Content -->
  201. {% endblock %}