templates/frontend/blog/articles_model_1.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}  {%  for p in frontend_page %}
  4.                     {% if p.adminLink == page_admink_link %} {{p.name}}{% endif %}{% endfor %}{% endblock %}
  6. {% block css %}
  7.     <style>
  8.         .card {
  9.             border: none;
  10.             color: #fff;
  11.             border-radius: 12px
  12.         }
  14.         .user-timing {
  15.             right: 9px;
  16.             bottom: 9px;
  17.             color: #fff
  18.         }
  20.         .views-content {
  21.             color: #606271
  22.         }
  24.         .views {
  25.             font-size: 12px
  26.         }
  28.         .dots {
  29.             display: flex;
  30.             height: 10px;
  31.             width: 10px;
  32.             background-color: green;
  33.             border-radius: 50%;
  34.             margin-left: 5px;
  35.             margin-bottom: 6px
  36.         }
  38.         .days-ago {
  39.             margin-top: -10px;
  40.             color: #606271
  41.         }
  43.         .snipimage img {
  44.             height: 150px
  45.         }
  47.         .widget {
  48.             position: relative;
  49.             display: block;
  50.             margin-bottom: 30px;
  51.         }
  53.         .widget_title {
  54.             background-color: #fff;
  55.             z-index: 3;
  56.         }
  58.         .widget_title:after {
  59.             position: relative;
  60.             display: inline-block;
  61.             bottom: 35px;
  62.             left: 52%;
  63.             content: " ";
  64.             width: 50%;
  65.             border-top: 2px solid #eee;
  66.             z-index: 1;
  67.         }
  69.         .widget_black h2:after {
  70.             display: table;
  71.             position: relative;
  72.             left: 50%;
  73.             bottom: 10px;
  74.             height: 2px;
  75.             content: " ";
  76.             text-shadow: none;
  77.             width: 15%;
  78.             background-color: #000;
  79.             z-index: 2;
  80.         }
  82.         .widget i:hover {
  83.             color: #f7510f;
  84.             cursor: pointer;
  85.         }
  87.         .widget_adv {
  88.             text-align: center;
  89.             margin: 30px;
  90.         }
  92.         .widget_advertisement {
  93.             text-align: center;
  94.             margin: 30px 0;
  95.         }
  97.         .widget_body img {
  98.             float: left;
  99.             position: relative;
  100.             margin-right: 25px;
  101.         }
  103.         .widget .add_img {
  104.             display: inline-block;
  105.             padding: 12px 12px;
  106.         }
  108.         .widget .media {
  109.             margin-top: 0;
  110.             margin-bottom: 30px;
  111.         }
  113.         .widget .media-heading {
  114.             margin-bottom: 5px;
  115.             font-size: 15px;
  116.             line-height: 18px;
  117.         }
  119.         .widget .media-date {
  120.             color: #b2b0b0;
  121.         }
  123.         .widget_article_social {
  124.             color: #a5a5a5;
  125.             margin-top: 15px;
  126.         }
  128.         .widget_article_social i {
  129.             padding: 5px;
  130.             margin-right: 5px;
  131.             color: #fff;
  132.             font-size: 10px;
  133.             background-color: #a5a5a5;
  134.         }
  136.         .widget_article_social span {
  137.             margin-right: 10px;
  138.         }
  140.         .widget_article_social a {
  141.             font-weight: bold;
  142.         }
  144.         .widget_img {
  145.             text-align: center;
  146.             margin: 0 auto;
  147.         }
  149.         .widget .adv_img {
  150.             display: inline-block;
  151.         }
  153.         .widget_body .btn {
  154.             border-radius: 0;
  155.         }
  157.         .widget hr {
  158.             border-color: #e0e0e0;
  159.         }
  161.         .widget-title hr {
  162.             border-width: 4px;
  163.             margin-bottom: 0;
  164.         }
  166.         .widget-title hr:before {
  167.             width: 80px;
  168.             background-color: #ddd;
  169.             display: block;
  170.             height: 4px;
  171.             position: relative;
  172.             content: "";
  173.             top: -4px;
  174.         }
  175.         .widget_divider {
  176.             display: inline-block;
  177.             vertical-align: baseline;
  178.             zoom: 1;
  179.             width: 98%;
  180.             position: relative;
  181.             text-align: right;
  182.             text-transform: uppercase;
  183.             font-size: 11px;
  184.         }
  186.         .widget_divider::after {
  187.             content: '';
  188.             display: block;
  189.             width: 75%;
  190.             left: 0;
  191.             text-align: right;
  192.             position: absolute;
  193.             top: 12px;
  194.             border-top: 1px solid #f1f1f1;
  195.         }
  196.         .media-body, .media-left, .media-right{
  197.             display: table-cell;
  198.             vertical-align: top;
  199.         }
  200.         .media-left, .media > .pull-left{
  201.             padding-right: 10px;
  202.         }
  203.         .media-body{
  205.         }
  207.         .padded {
  208.             padding: 100px 0;
  209.         }
  210.         .wrapper-grey {
  211.             background: #F4F4F4;
  212.         }
  213.         .avatar {
  214.             width: 30px;
  215.             border-radius: 50%;
  216.         }
  217.         .avatar-bordered {
  218.             box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  219.             border: white 1px solid;
  220.         }
  221.         .avatar-large {
  222.             width: 50px;
  223.         }
  224.         /* .banner {
  225.           color: white;
  226.           text-align: center;
  227.           height: 100vh;
  228.           background-size: cover !important;
  229.           display: flex;
  230.           align-items: center;
  231.           justify-content: center;
  232.         }
  233.         .banner h1 {
  234.           font-size: 50px;
  235.           font-weight: bold;
  236.           text-shadow: 0px 1px rgba(0, 0, 0, 0.2);
  237.         }
  238.         .banner p {
  239.           font-size: 25px;
  240.           font-weight: lighter;
  241.           color: rgba(255, 255, 255, 0.8);
  242.           margin-bottom: 50px;
  243.         } */
  245.         .card {
  246.             height: 250px;
  247.             text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  248.             background-size: cover !important;
  249.             color: white;
  250.             position: relative;
  251.             border-radius: 5px;
  252.             margin-bottom: 20px;
  253.         }
  254.         .card-user {
  255.             position: absolute;
  256.             right: 10px;
  257.             top: 10px;
  258.         }
  259.         .card-category {
  260.             position: absolute;
  261.             top: 10px;
  262.             left: 10px;
  263.             font-size: 20px;
  264.         }
  265.         .card-description {
  266.             position: absolute;
  267.             bottom: 10px;
  268.             left: 10px;
  269.         }
  270.         .card-description h2 {
  271.             font-size: 22px;
  272.         }
  273.         .card-description p {
  274.             font-size: 15px;
  275.         }
  276.         .card-link {
  277.             position: absolute;
  278.             top: 0;
  279.             bottom: 0;
  280.             width: 100%;
  281.             z-index:2;
  282.             background: black;
  283.             opacity: 0;
  284.         }
  285.         .card-link:hover{
  286.             opacity: 0.1;
  287.         }
  288.         .features img {
  289.             width: 100px;
  290.         }
  291.         .features h2 {
  292.             font-size: 20px;
  293.             margin-bottom: 10px;
  294.         }
  295.         .features p {
  296.             font-size: 15px;
  297.             font-weight: lighter;
  298.         }
  300.     </style>
  302. {% endblock %}
  304. {% block body %}
  306.     <div class=" d-flex flex-column flex-row-fluid">
  307.         <div class="card-body row ">
  308.             {%  for p in frontend_page %}
  309.                 {% if p.adminLink == page_admink_link %}
  310.                     <a href="{{ path('app_show_frontend_page',{'slug':p.slug}) }}"><h1 style="font-weight: bolder;font-size: 38px;margin-bottom: 15px" class="bold text-left text-primary">{{ p.name }}
  311.                             <em class="fs-5"> >>
  312.                                 {% for cat in categories %}
  313.                                     {% if cat.id == cat_current %}
  314.                                         {{ cat.name }}
  315.                                     {% endif %}
  317.                                 {% endfor %}
  318.                             </em>
  320.                     </h1>
  321.                     </a>
  322.                 {% endif %}
  323.             {% endfor %}
  324.             <div class="container-fluid categorie-div" style="margin-top: 18px;background: #f3f3f3" >
  325.                 <div class="d-flex align-items-center" style="width: 100%">
  326.                     <div class="flex-shrink-0">
  327.                         <a href="#" class="btn-left btn-link p-2 toggle3 text-dark"><i class="bi bi-caret-left"></i></a>
  328.                     </div>
  329.                     <div class="flex-grow-1  o-hidden">
  330.                         <ul class="nav nav-blog nav-fill small position-relative flex-nowrap div-ul-link">
  332.                             {%  for cat in categories %}
  333.                                 <li class="nav-item">
  334.                                     <a href="{{ path('app_show_category_articles',{'slug':cat.slug})  }}" class="header-nav-link" style="">{{ cat.name }}</a>
  335.                                 </li>
  336.                             {% endfor %}
  337.                         </ul>
  338.                     </div>
  339.                     <div class="flex-shrink-0">
  340.                         <a href="#" class="btn-right btn-link toggle3 p-2 text-dark"><i class="bi bi-caret-right"></i></a>
  341.                     </div>
  342.                 </div>
  343.             </div>
  346.             <div class="separator" style="border-width: 5px"></div>
  347.             <div class="container mt-4">
  348.                 <div class=" p-3 row">
  349.                     <div class="col-lg-8">
  350.                         {% for a in articles_to_display %}
  351.                             {% if a.image_cover is not defined %}
  352.                                 <div class="row mb-8">
  353.                                     <div class="col-md-3 col-lg-3 col-sm-12">
  354.                                         <div class="position-relative snipimage">
  355.                                             <a href="{{ path('blog_show_article',{'slug':a.slug}) }}">
  356.                                                 {% if a.imageCoverMini != '' %}
  357.                                                     <img style="object-fit: cover;width: 300px;" src="{{ asset('uploads/'~a.imageCoverMini) }}" class=" img-fluid  img-responsive">
  358.                                                 {% else %}
  359.                                                     {% if a.imageCover != '' %}
  360.                                                         <img style="object-fit: cover;width: 300px;" src="{{ asset('uploads/'~a.imageCover) }}" class=" img-fluid  img-responsive">
  361.                                                     {% else %}
  362.                                                         <img style="object-fit: cover;width: 300px" src="{{ asset('assets/media/avatars/blank.png') }}" class=" img-fluid img-responsive">
  363.                                                     {% endif %}
  364.                                                 {% endif %}
  366.                                             </a>
  367.                                         </div>
  368.                                     </div>
  369.                                     <div class="col-md-9 col-lg-9 col-sm-12">
  370.                                         <div class="mt-2">
  371.                                             <div class="d-flex justify-content-between align-items-center">
  372.                                                 <a href="{{ path('blog_show_article',{'slug':a.slug}) }}"><h5 class="mb-1">{{ a.title}} </h5></a>
  373.                                             </div>
  375.                                             <div class="d-flex justify-content-md-start justify-content-between views-content mt-2">
  376.                                                 <a href="{{ path('blog_show_article',{'slug':a.slug}) }}">
  377.                                                     {{ a.content|striptags|u.truncate(200, '...')|raw  }}
  378.                                                 </a>
  379.                                             </div>
  380.                                             <div class="d-flex align-items-center mb-2">
  381.                                                 <div class="ms-3">
  382.                                                     {% if a.user is defined and a.user is not null %} <a href="{{ path('app_show_article_redactor',{'id':a.user.profile~'-'~a.user.id}) }}" class="fs-5 fw-bolder text-gray-900 text-hover-primary me-1 ">{{ a.user.surname}} {{ a.user.name}}</a>  {% endif %}
  384.                                                     <span class="text-muted fs-7 mb-1"><span class="bi bi-clock"></span> {{ a.date|date('Y-m-d') }}</span>
  385.                                                 </div>
  386.                                             </div>
  388.                                         </div>
  389.                                     </div>
  390.                                 </div>
  391.                             {% else %}
  392.                                 <div class="row mb-8" style="background-color: #f7f7f7">
  393.                                     <div class="col-md-3 col-lg-3 col-sm-12">
  394.                                         <div class="position-relative snipimage">
  395.                                             <a target="_blank" href="{{ educati_article_show~a.slug }}">
  396.                                                 <img style="object-fit: cover;width: 300px;" src="{{ educati_uploads_dir }}{{ a.image_cover }}" class=" img-fluid  img-responsive">
  397.                                             </a>
  398.                                         </div>
  399.                                     </div>
  400.                                     <div class="col-md-9 col-lg-9 col-sm-12">
  401.                                         <div class="mt-2">
  402.                                             <div class="d-flex justify-content-between align-items-center">
  403.                                                 <a target="_blank" href="{{ educati_article_show~a.slug }}"><h5 class="mb-1">{{ a.title}} </h5></a>
  404.                                             </div>
  406.                                             <div class="d-flex justify-content-md-start justify-content-between views-content mt-2">
  407.                                                 <a target="_blank" href="{{ educati_article_show~a.slug }}">
  408.                                                     {{ a.content|striptags|u.truncate(200, '...')|raw  }}
  409.                                                 </a>
  410.                                             </div>
  411.                                             <div class="d-flex align-items-center mb-2">
  412.                                                 <div class="ms-3">
  414.                                                     <span class="text-muted fs-7 mb-1"><span class="bi bi-clock"></span> {{ a.date|date('Y-m-d') }}</span>
  415.                                                 </div>
  416.                                             </div>
  418.                                         </div>
  419.                                     </div>
  420.                                 </div>
  422.                             {% endif %}
  423.                             <div class="separator" style="margin-bottom: 20px; height: 4px"></div>
  424.                         {% endfor %}
  425.                         {{ knp_pagination_render(articles) }}
  426.                     </div>
  427.                     {% if school_global.display_educati_news %}
  428.                     <div class="col-lg-4 col-md-4 col-sm-12">
  429.                             {% include 'frontend/blog/ads_list.html.twig' %}
  430.                     </div>
  431.                     {% endif %}
  434.                 </div>
  435.             </div>
  436.             {{ knp_pagination_render(articles) }}
  442.         </div>
  444.     </div>
  448. {% endblock %}
  450.  {% block js %}
  451.      <script src="{{ asset('assets/plugins/custom/ckeditor/ckeditor-classic.bundle.js') }}"></script>
  452.      <script id="templateAds" type="text/html">
  453.          <div class="col-md-12">
  454.              <div class="card" style="max-height: 220px; background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.2)), url('{{ educati_uploads_dir }}[[image]]');">
  455.                  <div class="card-category" style="text-shadow: 1px 1px 2px #7f3e98, 0 0 1em #7f3e98, 0 0 0.2em #7f3e98;">[[title]]</div>
  456.                  <div class="card-description">
  457.                      <p style="text-shadow: 1px 1px 2px #7f3e98, 0 0 1em #7f3e98, 0 0 0.2em #7f3e98;">[[content]]</p>
  458.                  </div>
  459.                  <a target="_blank" class="card-link" href="[[link]]" ></a>
  460.              </div>
  461.          </div>
  462.      </script>
  464.      <script>
  465.          $.ajax({
  466.              url: "{{educati_ads_list}}"+"10/0?lang="+getCookie('lang'),
  467.              type: 'GET',
  468.              dataType: 'json',
  469.              success: function(res){
  470.                  let templateRep = document.getElementById("templateAds");
  471.                  let templateRepHtml = templateRep.innerHTML;
  472.                  let listHtml = "";
  473.                  res.data.forEach(function (e){
  474.                      let link = "{{educati_ads_show}}";
  475.                      link = link+e.slug;
  476.                      listHtml += templateRepHtml
  477.                          .replace("[[image]]",e.image)
  478.                          .replace("[[link]]",link)
  479.                          .replace("[[title]]",e.title)
  480.                          .replace("[[content]]",e.description);
  481.                  });
  483.                  $('#ads_list').html(listHtml);
  485.              },
  486.              error :function (error) {
  487.                  console.log(error);
  488.              }
  489.          });
  491.      </script>
  493.      <script>
  494.          $('.toggle3').click(function(){
  495.              $('.nav-blog').toggleClass("justify-content-end");
  496.              $('.toggle3').toggleClass("text-light");
  497.          });
  501.      </script>
  504.  {% endblock %}