templates/blog/articles_category.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}
  4.     {% if blog_name == ''%} {{ 'blog_title'|trans}} {% else%} {{ blog_name|striptags|raw }} {% endif%}
  6. {% endblock %}
  8. {% block css %}
  9.     <style>
  10.         .card {
  11.             border: none;
  12.             color: #fff;
  13.             border-radius: 12px
  14.         }
  16.         .user-timing {
  17.             right: 9px;
  18.             bottom: 9px;
  19.             color: #fff
  20.         }
  22.         .views-content {
  23.             color: #606271
  24.         }
  26.         .views {
  27.             font-size: 12px
  28.         }
  30.         .dots {
  31.             display: flex;
  32.             height: 10px;
  33.             width: 10px;
  34.             background-color: green;
  35.             border-radius: 50%;
  36.             margin-left: 5px;
  37.             margin-bottom: 6px
  38.         }
  40.         .days-ago {
  41.             margin-top: -10px;
  42.             color: #606271
  43.         }
  45.         .snipimage img {
  46.             height: 150px
  47.         }
  49.         .widget {
  50.             position: relative;
  51.             display: block;
  52.             margin-bottom: 30px;
  53.         }
  55.         .widget_title {
  56.             background-color: #fff;
  57.             z-index: 3;
  58.         }
  60.         .widget_title:after {
  61.             position: relative;
  62.             display: inline-block;
  63.             bottom: 35px;
  64.             left: 52%;
  65.             content: " ";
  66.             width: 50%;
  67.             border-top: 2px solid #eee;
  68.             z-index: 1;
  69.         }
  71.         .widget_black h2:after {
  72.             display: table;
  73.             position: relative;
  74.             left: 50%;
  75.             bottom: 10px;
  76.             height: 2px;
  77.             content: " ";
  78.             text-shadow: none;
  79.             width: 15%;
  80.             background-color: #000;
  81.             z-index: 2;
  82.         }
  84.         .widget i:hover {
  85.             color: #f7510f;
  86.             cursor: pointer;
  87.         }
  89.         .widget_adv {
  90.             text-align: center;
  91.             margin: 30px;
  92.         }
  94.         .widget_advertisement {
  95.             text-align: center;
  96.             margin: 30px 0;
  97.         }
  99.         .widget_body img {
  100.             float: left;
  101.             position: relative;
  102.             margin-right: 25px;
  103.         }
  105.         .widget .add_img {
  106.             display: inline-block;
  107.             padding: 12px 12px;
  108.         }
  110.         .widget .media {
  111.             margin-top: 0;
  112.             margin-bottom: 30px;
  113.         }
  115.         .widget .media-heading {
  116.             margin-bottom: 5px;
  117.             font-size: 15px;
  118.             line-height: 18px;
  119.         }
  121.         .widget .media-date {
  122.             color: #b2b0b0;
  123.         }
  125.         .widget_article_social {
  126.             color: #a5a5a5;
  127.             margin-top: 15px;
  128.         }
  130.         .widget_article_social i {
  131.             padding: 5px;
  132.             margin-right: 5px;
  133.             color: #fff;
  134.             font-size: 10px;
  135.             background-color: #a5a5a5;
  136.         }
  138.         .widget_article_social span {
  139.             margin-right: 10px;
  140.         }
  142.         .widget_article_social a {
  143.             font-weight: bold;
  144.         }
  146.         .widget_img {
  147.             text-align: center;
  148.             margin: 0 auto;
  149.         }
  151.         .widget .adv_img {
  152.             display: inline-block;
  153.         }
  155.         .widget_body .btn {
  156.             border-radius: 0;
  157.         }
  159.         .widget hr {
  160.             border-color: #e0e0e0;
  161.         }
  163.         .widget-title hr {
  164.             border-width: 4px;
  165.             margin-bottom: 0;
  166.         }
  168.         .widget-title hr:before {
  169.             width: 80px;
  170.             background-color: #ddd;
  171.             display: block;
  172.             height: 4px;
  173.             position: relative;
  174.             content: "";
  175.             top: -4px;
  176.         }
  177.         .widget_divider {
  178.             display: inline-block;
  179.             vertical-align: baseline;
  180.             zoom: 1;
  181.             width: 98%;
  182.             position: relative;
  183.             text-align: right;
  184.             text-transform: uppercase;
  185.             font-size: 11px;
  186.         }
  188.         .widget_divider::after {
  189.             content: '';
  190.             display: block;
  191.             width: 75%;
  192.             left: 0;
  193.             text-align: right;
  194.             position: absolute;
  195.             top: 12px;
  196.             border-top: 1px solid #f1f1f1;
  197.         }
  198.         .media-body, .media-left, .media-right{
  199.             display: table-cell;
  200.             vertical-align: top;
  201.         }
  202.         .media-left, .media > .pull-left{
  203.             padding-right: 10px;
  204.         }
  205.         .media-body{
  207.         }
  209.         marquee p {
  210.             display: contents;
  211.         }
  213.         .padded {
  214.             padding: 100px 0;
  215.         }
  216.         .wrapper-grey {
  217.             background: #F4F4F4;
  218.         }
  219.         .avatar {
  220.             width: 30px;
  221.             border-radius: 50%;
  222.         }
  223.         .avatar-bordered {
  224.             box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  225.             border: white 1px solid;
  226.         }
  227.         .avatar-large {
  228.             width: 50px;
  229.         }
  230.         /* .banner {
  231.           color: white;
  232.           text-align: center;
  233.           height: 100vh;
  234.           background-size: cover !important;
  235.           display: flex;
  236.           align-items: center;
  237.           justify-content: center;
  238.         }
  239.         .banner h1 {
  240.           font-size: 50px;
  241.           font-weight: bold;
  242.           text-shadow: 0px 1px rgba(0, 0, 0, 0.2);
  243.         }
  244.         .banner p {
  245.           font-size: 25px;
  246.           font-weight: lighter;
  247.           color: rgba(255, 255, 255, 0.8);
  248.           margin-bottom: 50px;
  249.         } */
  251.         .card {
  252.             height: 250px;
  253.             text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  254.             background-size: cover !important;
  255.             color: white;
  256.             position: relative;
  257.             border-radius: 5px;
  258.             margin-bottom: 20px;
  259.         }
  260.         .card-user {
  261.             position: absolute;
  262.             right: 10px;
  263.             top: 10px;
  264.         }
  265.         .card-category {
  266.             position: absolute;
  267.             top: 10px;
  268.             left: 10px;
  269.             font-size: 20px;
  270.         }
  271.         .card-description {
  272.             position: absolute;
  273.             bottom: 10px;
  274.             left: 10px;
  275.         }
  276.         .card-description h2 {
  277.             font-size: 22px;
  278.         }
  279.         .card-description p {
  280.             font-size: 15px;
  281.         }
  282.         .card-link {
  283.             position: absolute;
  284.             top: 0;
  285.             bottom: 0;
  286.             width: 100%;
  287.             z-index:2;
  288.             background: black;
  289.             opacity: 0;
  290.         }
  291.         .card-link:hover{
  292.             opacity: 0.1;
  293.         }
  294.         .features img {
  295.             width: 100px;
  296.         }
  297.         .features h2 {
  298.             font-size: 20px;
  299.             margin-bottom: 10px;
  300.         }
  301.         .features p {
  302.             font-size: 15px;
  303.             font-weight: lighter;
  304.         }
  307.     </style>
  309. {% endblock %}
  311. {% block body %}
  313.     <div class=" d-flex flex-column flex-row-fluid" style="margin-top: 25px">
  314.         <div class="card-body row">
  316.             <h1 style="font-weight: bolder;font-size: 38px;margin-bottom: 35px" class="bold text-left text-primary">{% if blog_name == ''%} {{ 'blog_title'|trans}} {% else%} {{ blog_name|raw }} {% endif%}<span style="float: right" class="fs-3">  >> {{ current_category.name }}</span></h1>
  319.             <div class="container-fluid categorie-div" style="margin-top: 18px;background: #f3f3f3;">
  320.                 <div class="d-flex align-items-center" style="width: 100%">
  321.                     <div class="flex-shrink-0">
  322.                         <a href="#" class="btn-left btn-link p-2 toggle3 text-dark"><i class="bi bi-caret-left"></i></a>
  323.                     </div>
  324.                     <div class="flex-grow-1  o-hidden" style="overflow-x: scroll">
  325.                         <ul class="nav nav-blog nav-fill small position-relative flex-nowrap div-ul-link" style="margin-bottom: 8px">
  327.                             {%  for cat in categories %}
  328.                                 <li class="nav-item">
  329.                                     <a href="{{ path('app_show_category_articles',{'slug':cat.slug})  }}" class="header-nav-link" style="">{{ cat.name }}</a>
  330.                                 </li>
  331.                             {% endfor %}
  332.                         </ul>
  333.                     </div>
  334.                     <div class="flex-shrink-0">
  335.                         <a href="#" class="btn-right btn-link toggle3 p-2 text-dark"><i class="bi bi-caret-right"></i></a>
  336.                     </div>
  337.                 </div>
  338.             </div>
  339.             <div class="separator" style="border-width: 5px"></div>
  342.             <div class="container mt-4">
  344.                 <div class=" p-3 row">
  345.                     <div class="col-lg-8 col-md-8 col-sm-12">
  346.                         {% for a in articles %}
  347.                             <div class="row mb-8">
  348.                                 <div class="col-md-3 col-lg-3 col-sm-12">
  349.                                     <div class="position-relative snipimage">
  350.                                         <a href="{{ path('blog_show_article',{'slug':a.slug}) }}">
  351.                                             {% if a.imageCover != '' %}
  352.                                                 <img style="object-fit: cover;width: 300px;" src="{{ asset('uploads/'~a.imageCover) }}" class=" img-fluid  img-responsive">
  353.                                             {% else %}
  354.                                                 <img style="object-fit: cover;width: 300px" src="{{ asset('assets/media/avatars/blank.png') }}" class=" img-fluid img-responsive">
  355.                                             {% endif %}
  357.                                         </a>
  358.                                     </div>
  359.                                 </div>
  360.                                 <div class="col-md-9 col-lg-9 col-sm-12">
  361.                                     <div class="mt-2">
  362.                                         <div class="d-flex justify-content-between align-items-center">
  363.                                             <a href="{{ path('blog_show_article',{'slug':a.slug}) }}"><h5 class="mb-1">{{ a.title}} </h5></a>
  364.                                         </div>
  365.                                         <div class="fs-13 mb-2" style="color: #7a7a7a">
  366.                                             <span class="mr-2 badge badge-primary">{{ a.category.name }} </span>
  367.                                         </div>
  368.                                         <div class="d-flex justify-content-md-start justify-content-between views-content mt-2">
  369.                                             <a href="{{ path('blog_show_article',{'slug':a.slug}) }}">
  370.                                                 {{ a.content|striptags|u.truncate(200, '...')|raw  }}
  371.                                             </a>
  372.                                         </div>
  373.                                         <div class="d-flex align-items-center mb-2">
  374.                                             <div class="ms-3">
  376.                                                 <span class="text-muted fs-7 mb-1"><span class="bi bi-clock"></span> {{ a.date|date('Y-m-d') }}</span>
  377.                                             </div>
  378.                                         </div>
  380.                                     </div>
  381.                                 </div>
  382.                             </div>
  383.                             <div class="separator" style="margin-bottom: 20px; height: 4px"></div>
  384.                         {% endfor %}
  385.                         {{ knp_pagination_render(articles) }}
  386.                     </div>
  388.                     <div class="col-lg-4 col-md-4 col-sm-12">
  389.                         {% include 'blog/ads_list.html.twig' %}
  390.                     </div>
  394.                 </div>
  397.             </div>
  406.         </div>
  408.     </div>
  412. {% endblock %}
  414.  {% block js %}
  415.      <script src="{{ asset('assets/plugins/custom/ckeditor/ckeditor-classic.bundle.js') }}"></script>
  416.      <script id="templateAds" type="text/html">
  417.          <div class="col-md-12">
  418.              <div class="card" style="max-height: 220px; background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.2)), url('{{ asset('uploads/') }}[[image]]');">
  419.                  <div class="card-category" style="text-shadow: 1px 1px 2px #7f3e98, 0 0 1em #7f3e98, 0 0 0.2em #7f3e98;">[[title]]</div>
  420.                  <div class="card-description">
  421.                      <p style="text-shadow: 1px 1px 2px #7f3e98, 0 0 1em #7f3e98, 0 0 0.2em #7f3e98;">[[content]]</p>
  422.                  </div>
  423.                  <a target="_blank" class="card-link" href="[[link]]" ></a>
  424.              </div>
  425.          </div>
  426.      </script>
  428.      <script>
  429.          $.ajax({
  430.              url: "{{ path('list_ads_json',{'limit':10,'offset':0}) }}"+'?lang='+getCookie('lang'),
  431.              type: 'GET',
  432.              dataType: 'json',
  433.              success: function(res){
  434.                  let templateRep = document.getElementById("templateAds");
  435.                  let templateRepHtml = templateRep.innerHTML;
  436.                  let listHtml = "";
  437.                  res.data.forEach(function (e){
  438.                      let link = "{{ path('display_ads',{'slug':'0000'}) }}";
  439.                      link = link.replace('0000',e.slug)
  440.                      listHtml += templateRepHtml
  441.                          .replace("[[image]]",e.image)
  442.                          .replace("[[link]]",link)
  443.                          .replace("[[title]]",e.title)
  444.                          .replace("[[content]]",e.description);
  445.                  });
  447.                  $('#ads_list').html(listHtml);
  449.              },
  450.              error :function (error) {
  451.                  console.log(error);
  452.              }
  453.          });
  455.      </script>
  458.      <script>
  459.          $('.toggle3').click(function(){
  460.              $('.nav-blog').toggleClass("justify-content-end");
  461.              $('.toggle3').toggleClass("text-light");
  462.          });
  465.      </script>
  468.  {% endblock %}