templates/frontend/blog/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.         }
  37.         .dot {
  38.             height: 6px;
  39.             width: 6px;
  40.             margin-left: 3px;
  41.             margin-right: 3px;
  42.             margin-top: 2px !important;
  43.             background-color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %};
  44.             border-radius: 50%;
  45.             display: inline-block
  46.         }
  48.         .days-ago {
  49.             margin-top: -10px;
  50.             color: #606271
  51.         }
  53.         .snipimage img {
  54.             height: 150px
  55.         }
  57.         .widget {
  58.             position: relative;
  59.             display: block;
  60.             margin-bottom: 30px;
  61.         }
  63.         .widget_title {
  64.             background-color: #fff;
  65.             z-index: 3;
  66.         }
  68.         .widget_title:after {
  69.             position: relative;
  70.             display: inline-block;
  71.             bottom: 35px;
  72.             left: 52%;
  73.             content: " ";
  74.             width: 50%;
  75.             border-top: 2px solid #eee;
  76.             z-index: 1;
  77.         }
  79.         .widget_black h2:after {
  80.             display: table;
  81.             position: relative;
  82.             left: 50%;
  83.             bottom: 10px;
  84.             height: 2px;
  85.             content: " ";
  86.             text-shadow: none;
  87.             width: 15%;
  88.             background-color: #000;
  89.             z-index: 2;
  90.         }
  92.         .widget i:hover {
  93.             color: #f7510f;
  94.             cursor: pointer;
  95.         }
  97.         .widget_adv {
  98.             text-align: center;
  99.             margin: 30px;
  100.         }
  102.         .widget_advertisement {
  103.             text-align: center;
  104.             margin: 30px 0;
  105.         }
  107.         .widget_body img {
  108.             float: left;
  109.             position: relative;
  110.             margin-right: 25px;
  111.         }
  113.         .widget .add_img {
  114.             display: inline-block;
  115.             padding: 12px 12px;
  116.         }
  118.         .widget .media {
  119.             margin-top: 0;
  120.             margin-bottom: 30px;
  121.         }
  123.         .widget .media-heading {
  124.             margin-bottom: 5px;
  125.             font-size: 15px;
  126.             line-height: 18px;
  127.         }
  129.         .widget .media-date {
  130.             color: #b2b0b0;
  131.         }
  133.         .widget_article_social {
  134.             color: #a5a5a5;
  135.             margin-top: 15px;
  136.         }
  138.         .widget_article_social i {
  139.             padding: 5px;
  140.             margin-right: 5px;
  141.             color: #fff;
  142.             font-size: 10px;
  143.             background-color: #a5a5a5;
  144.         }
  146.         .widget_article_social span {
  147.             margin-right: 10px;
  148.         }
  150.         .widget_article_social a {
  151.             font-weight: bold;
  152.         }
  154.         .widget_img {
  155.             text-align: center;
  156.             margin: 0 auto;
  157.         }
  159.         .widget .adv_img {
  160.             display: inline-block;
  161.         }
  163.         .widget_body .btn {
  164.             border-radius: 0;
  165.         }
  167.         .widget hr {
  168.             border-color: #e0e0e0;
  169.         }
  171.         .widget-title hr {
  172.             border-width: 4px;
  173.             margin-bottom: 0;
  174.         }
  176.         .widget-title hr:before {
  177.             width: 80px;
  178.             background-color: #ddd;
  179.             display: block;
  180.             height: 4px;
  181.             position: relative;
  182.             content: "";
  183.             top: -4px;
  184.         }
  185.         .widget_divider {
  186.             display: inline-block;
  187.             vertical-align: baseline;
  188.             zoom: 1;
  189.             width: 98%;
  190.             position: relative;
  191.             text-align: right;
  192.             text-transform: uppercase;
  193.             font-size: 11px;
  194.         }
  196.         .widget_divider::after {
  197.             content: '';
  198.             display: block;
  199.             width: 75%;
  200.             left: 0;
  201.             text-align: right;
  202.             position: absolute;
  203.             top: 12px;
  204.             border-top: 1px solid #f1f1f1;
  205.         }
  206.         .media-body, .media-left, .media-right{
  207.             display: table-cell;
  208.             vertical-align: top;
  209.         }
  210.         .media-left, .media > .pull-left{
  211.             padding-right: 10px;
  212.         }
  213.         .media-body{
  215.         }
  217.         marquee p {
  218.             display: contents;
  219.         }
  221.         .padded {
  222.             padding: 100px 0;
  223.         }
  224.         .wrapper-grey {
  225.             background: #F4F4F4;
  226.         }
  227.         .avatar {
  228.             width: 30px;
  229.             border-radius: 50%;
  230.         }
  231.         .avatar-bordered {
  232.             box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  233.             border: white 1px solid;
  234.         }
  235.         .avatar-large {
  236.             width: 50px;
  237.         }
  238.         /* .banner {
  239.           color: white;
  240.           text-align: center;
  241.           height: 100vh;
  242.           background-size: cover !important;
  243.           display: flex;
  244.           align-items: center;
  245.           justify-content: center;
  246.         }
  247.         .banner h1 {
  248.           font-size: 50px;
  249.           font-weight: bold;
  250.           text-shadow: 0px 1px rgba(0, 0, 0, 0.2);
  251.         }
  252.         .banner p {
  253.           font-size: 25px;
  254.           font-weight: lighter;
  255.           color: rgba(255, 255, 255, 0.8);
  256.           margin-bottom: 50px;
  257.         } */
  259.         .card {
  260.             height: 250px;
  261.             text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  262.             background-size: cover !important;
  263.             color: white;
  264.             position: relative;
  265.             border-radius: 5px;
  266.             margin-bottom: 20px;
  267.         }
  268.         .card-user {
  269.             position: absolute;
  270.             right: 10px;
  271.             top: 10px;
  272.         }
  273.         .card-category {
  274.             position: absolute;
  275.             top: 10px;
  276.             left: 10px;
  277.             font-size: 20px;
  278.         }
  279.         .card-description {
  280.             position: absolute;
  281.             bottom: 10px;
  282.             left: 10px;
  283.         }
  284.         .card-description h2 {
  285.             font-size: 22px;
  286.         }
  287.         .card-description p {
  288.             font-size: 15px;
  289.         }
  290.         .card-link {
  291.             position: absolute;
  292.             top: 0;
  293.             bottom: 0;
  294.             width: 100%;
  295.             z-index:2;
  296.             background: black;
  297.             opacity: 0;
  298.         }
  299.         .card-link:hover{
  300.             opacity: 0.1;
  301.         }
  302.         .features img {
  303.             width: 100px;
  304.         }
  305.         .features h2 {
  306.             font-size: 20px;
  307.             margin-bottom: 10px;
  308.         }
  309.         .features p {
  310.             font-size: 15px;
  311.             font-weight: lighter;
  312.         }
  316.     </style>
  318. {% endblock %}
  320. {% block body %}
  322.     <div class=" d-flex flex-column flex-row-fluid" style="">
  323.         <div class="card-body row ">
  324.             {%  for p in frontend_page %}
  325.                 {% if p.adminLink == page_admink_link %}
  326.                     <h1 style="font-weight: bolder;font-size: 38px;margin-bottom: 5px" class="bold text-left text-primary">{{ p.name }}</h1>
  327.                 {% endif %}
  328.             {% endfor %}
  330.             {% if school_notifs|length >0 or educati_notifs|length>0 %}
  331.                 <div class="">
  332.                     <div class="row">
  333.                         <div class="col-md-12">
  334.                             <div class="d-flex justify-content-between align-items-center breaking-news " style="
  335.                                     border-bottom-style: solid;border-bottom-color:  {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %}24!important;border-bottom-width: 2px;
  336.                                     ">
  338.                                 <marquee style="display: inline-block;font-size: 16px;min-height: 35px; padding-top: 6px;" class="news-scroll" behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
  339.                                     {% if school_notifs|length >0  %}
  340.                                         {% for no in school_notifs %}
  341.                                             {% if no.startAt is not null %}
  342.                                                 {% if date_now >= no.startAt %}
  343.                                                     {% if no.expiredAt is not null  %}
  344.                                                         {% if no.expiredAt >= date_now %}
  345.                                                             {{ no.content|raw}} <i class="dot" style="margin-right: 40px"></i>
  346.                                                         {% endif %}
  347.                                                     {% else %}
  348.                                                         {{ no.content|raw}} <i class="dot" style="margin-right: 40px"></i>
  349.                                                     {% endif %}
  351.                                                 {% endif %}
  352.                                             {% else %}
  353.                                                 {% if no.expiredAt is not null  %}
  354.                                                     {% if no.expiredAt >= date_now %}
  355.                                                         {{ no.content|raw}} <i class="dot" style="margin-right: 10px"></i>
  356.                                                     {% endif %}
  357.                                                 {% else %}
  358.                                                     {{ no.content|raw}} <i class="dot" style="margin-right: 10px"></i>
  359.                                                 {% endif %}
  360.                                             {% endif %}
  361.                                         {% endfor %}
  362.                                     {% endif %}
  363.                                     {% for n in educati_notifs %}
  364.                                         <span>{{ n.content|raw }}</span><i class="dot" style="margin-right: 10px"></i>
  365.                                     {% endfor %}
  366.                                 </marquee>
  367.                             </div>
  368.                         </div>
  369.                     </div>
  370.                 </div>
  371.             {% endif %}
  374.             <div class="container-fluid categorie-div" style="margin-top: 18px;background: #f3f3f3;">
  375.                 <div class="d-flex align-items-center" style="width: 100%">
  376.                     <div class="flex-shrink-0">
  377.                         <a href="#" class="btn-left btn-link p-2 toggle3 text-dark"><i class="bi bi-caret-left"></i></a>
  378.                     </div>
  379.                     <div class="flex-grow-1  o-hidden">
  380.                         <ul class="nav nav-blog nav-fill small position-relative flex-nowrap div-ul-link">
  382.                             {%  for cat in categories %}
  383.                                 <li class="nav-item">
  384.                                     <a href="{{ path('app_show_category_articles',{'slug':cat.slug})  }}" class="header-nav-link" style="">{{ cat.name }}</a>
  385.                                 </li>
  386.                             {% endfor %}
  387.                         </ul>
  388.                     </div>
  389.                     <div class="flex-shrink-0">
  390.                         <a href="#" class="btn-right btn-link toggle3 p-2 text-dark"><i class="bi bi-caret-right"></i></a>
  391.                     </div>
  392.                 </div>
  393.             </div>
  394.             <div class="separator" style="border-width: 5px"></div>
  397.             <div class="container mt-4">
  399.                         <div class=" p-3 row">
  400.                             <div class="col-lg-8">
  401.                                 {% for a in articles_to_display %}
  402.                                     {% if a.image_cover is not defined %}
  403.                                 <div class="row mb-8">
  404.                                     <div class="col-md-3 col-lg-3 col-sm-12">
  405.                                         <div class="position-relative snipimage">
  406.                                             <a href="{{ path('blog_show_article',{'slug':a.slug}) }}">
  407.                                                 {% if a.imageCoverMini != '' %}
  408.                                                     <img style="object-fit: cover;width: 300px;" src="{{ asset('uploads/'~a.imageCoverMini) }}" class=" img-fluid  img-responsive">
  409.                                                 {% else %}
  410.                                                     {% if a.imageCover != '' %}
  411.                                                         <img style="object-fit: cover;width: 300px;" src="{{ asset('uploads/'~a.imageCover) }}" class=" img-fluid  img-responsive">
  412.                                                     {% else %}
  413.                                                         <img style="object-fit: cover;width: 300px" src="{{ asset('assets/media/avatars/blank.png') }}" class=" img-fluid img-responsive">
  414.                                                     {% endif %}
  415.                                                 {% endif %}
  417.                                             </a>
  418.                                         </div>
  419.                                     </div>
  420.                                     <div class="col-md-9 col-lg-9 col-sm-12">
  421.                                         <div class="mt-2">
  422.                                             <div class="d-flex justify-content-between align-items-center">
  423.                                                 <a href="{{ path('blog_show_article',{'slug':a.slug}) }}"><h5 class="mb-1">{{ a.title}} </h5></a>
  424.                                             </div>
  425.                                             <div class="fs-13 mb-2" style="color: #7a7a7a">
  426.                                                 <span class="mr-2 badge badge-primary">{{ a.category.name }} </span>
  427.                                             </div>
  428.                                             <div class="d-flex justify-content-md-start justify-content-between views-content mt-2">
  429.                                                 <a href="{{ path('blog_show_article',{'slug':a.slug}) }}">
  430.                                                     {{ a.content|striptags|u.truncate(200, '...')|raw  }}
  431.                                                 </a>
  432.                                             </div>
  433.                                             <div class="d-flex align-items-center mb-2">
  434.                                                 <div class="ms-3">
  435.                                                     {% 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 %}
  437.                                                     <span class="text-muted fs-7 mb-1"><span class="bi bi-clock"></span> {{ a.date|date('Y-m-d') }}</span>
  438.                                                 </div>
  439.                                             </div>
  441.                                         </div>
  442.                                     </div>
  443.                                 </div>
  444.                                     {% else %}
  445.                                         <div class="row mb-8" style="background-color: #f7f7f7">
  446.                                             <div class="col-md-3 col-lg-3 col-sm-12">
  447.                                                 <div class="position-relative snipimage">
  448.                                                     <a target="_blank" href="{{ educati_article_show~a.slug }}">
  449.                                                             <img style="object-fit: cover;width: 300px;" src="{{ educati_uploads_dir }}{{ a.image_cover }}" class=" img-fluid  img-responsive">
  450.                                                     </a>
  451.                                                 </div>
  452.                                             </div>
  453.                                             <div class="col-md-9 col-lg-9 col-sm-12">
  454.                                                 <div class="mt-2">
  455.                                                     <div class="d-flex justify-content-between align-items-center">
  456.                                                         <a target="_blank" href="{{ educati_article_show~a.slug }}"><h5 class="mb-1">{{ a.title}} </h5></a>
  457.                                                     </div>
  458.                                                     <div class="fs-13 mb-2" style="color: #7a7a7a">
  459.                                                         <span class="mr-2 badge badge-primary">{{ a.category.name }} </span>
  460.                                                     </div>
  461.                                                     <div class="d-flex justify-content-md-start justify-content-between views-content mt-2">
  462.                                                         <a target="_blank" href="{{ educati_article_show~a.slug }}">
  463.                                                             {{ a.content|striptags|u.truncate(200, '...')|raw  }}
  464.                                                         </a>
  465.                                                     </div>
  466.                                                     <div class="d-flex align-items-center mb-2">
  467.                                                         <div class="ms-3">
  469.                                                             <span class="text-muted fs-7 mb-1"><span class="bi bi-clock"></span> {{ a.date|date('Y-m-d') }}</span>
  470.                                                         </div>
  471.                                                     </div>
  473.                                                 </div>
  474.                                             </div>
  475.                                         </div>
  477.                                     {% endif %}
  478.                                     <div class="separator" style="margin-bottom: 20px; height: 4px"></div>
  479.                                 {% endfor %}
  480.                                 {{ knp_pagination_render(articles) }}
  481.                             </div>
  482.                             {% if school_global.display_educati_news %}
  483.                                 <div class="col-lg-4 col-md-4 col-sm-12">
  484.                                     {% include 'frontend/blog/ads_list.html.twig' %}
  485.                                 </div>
  486.                             {% endif %}
  489.                         </div>
  492.                 </div>
  501.         </div>
  503.     </div>
  507. {% endblock %}
  509.  {% block js %}
  510.      <script src="{{ asset('assets/plugins/custom/ckeditor/ckeditor-classic.bundle.js') }}"></script>
  511.      <script id="templateAds" type="text/html">
  512.          <div class="col-md-12">
  513.              <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]]');">
  514.                  <div class="card-category" style="text-shadow: 1px 1px 2px #7f3e98, 0 0 1em #7f3e98, 0 0 0.2em #7f3e98;">[[title]]</div>
  515.                  <div class="card-description">
  516.                      <p style="text-shadow: 1px 1px 2px #7f3e98, 0 0 1em #7f3e98, 0 0 0.2em #7f3e98;">[[content]]</p>
  517.                  </div>
  518.                  <a target="_blank" class="card-link" href="[[link]]" ></a>
  519.              </div>
  520.          </div>
  521.      </script>
  523.      <script>
  524.          $.ajax({
  525.              url: "{{educati_ads_list}}"+"10/0?lang="+getCookie('lang'),
  526.              type: 'GET',
  527.              dataType: 'json',
  528.              success: function(res){
  529.                  let templateRep = document.getElementById("templateAds");
  530.                  let templateRepHtml = templateRep.innerHTML;
  531.                  let listHtml = "";
  532.                  res.data.forEach(function (e){
  533.                      let link = "{{educati_ads_show}}";
  534.                      link = link+e.slug;
  535.                      listHtml += templateRepHtml
  536.                          .replace("[[image]]",e.image)
  537.                          .replace("[[link]]",link)
  538.                          .replace("[[title]]",e.title)
  539.                          .replace("[[content]]",e.description);
  540.                  });
  542.                  $('#ads_list').html(listHtml);
  544.              },
  545.              error :function (error) {
  546.                  console.log(error);
  547.              }
  548.          });
  550.      </script>
  551.      <script>
  552.          $('.toggle3').click(function(){
  553.              $('.nav-blog').toggleClass("justify-content-end");
  554.              $('.toggle3').toggleClass("text-light");
  555.          });
  558.      </script>
  561.  {% endblock %}