templates/blog/show_article_model_1.html.twig line 1

Open in your IDE?
  1. {% extends 'base_simple.html.twig' %}
  5. {% block css %}
  6.     <style>
  7.         @media only screen and (max-width: 425px){
  8.             .main-body{
  9.                 margin-top: 30px!important;
  10.             }
  12.         }
  13.         .blog {
  14.             padding: 40px 0 20px 0;
  15.         }
  17.         .blog .entry {
  18.             padding: 30px;
  19.             margin-bottom: 60px;
  20.             box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.4);
  21.         }
  23.         .blog .entry .entry-img {
  24.             max-height: 500px;
  25.             /*margin: -30px -30px 20px -30px;*/
  26.             overflow: hidden;
  27.             text-align: center;
  28.         }
  30.         .blog .entry .entry-title {
  31.             font-size: 20px;
  32.             font-weight: bold;
  33.             padding: 0;
  34.             margin: 0 0 20px 0;
  35.         }
  37.         .blog .entry .entry-title a {
  38.             color: #111;
  39.             transition: 0.3s;
  40.         }
  42.         .blog .entry .entry-title a:hover {
  43.             color: #0084d6;
  44.         }
  46.         .blog .entry .entry-meta {
  47.             margin-bottom: 15px;
  48.             color: #aaaaaa;
  49.         }
  51.         .blog .entry .entry-meta ul {
  52.             display: flex;
  53.             flex-wrap: wrap;
  54.             list-style: none;
  55.             padding: 0;
  56.             margin: 0;
  57.         }
  59.         .blog .entry .entry-meta ul li + li {
  60.             padding-left: 20px;
  61.         }
  63.         .blog .entry .entry-meta i {
  64.             font-size: 14px;
  65.             padding-right: 4px;
  66.         }
  68.         .blog .entry .entry-meta a {
  69.             color: #5e5e5e;
  70.             font-size: 14px;
  71.             display: inline-block;
  72.             line-height: 20px;
  73.             transition: 0.3s;
  74.         }
  76.         .blog .entry .entry-meta a:hover {
  77.             color: #0084d6;
  78.         }
  80.         .blog .entry .entry-content p {
  81.             line-height: 24px;
  82.         }
  84.         .blog .entry .entry-content .read-more {
  85.             -moz-text-align-last: right;
  86.             text-align-last: right;
  87.         }
  89.         .blog .entry .entry-content .read-more a {
  90.             display: inline-block;
  91.             background: #0084d6;
  92.             color: #fff;
  93.             padding: 7px 25px;
  94.             transition: 0.3s;
  95.             font-size: 14px;
  96.             border-radius: 4px;
  97.         }
  99.         .blog .entry .entry-content .read-more a:hover {
  100.             background: #0084d6;
  101.         }
  103.         .blog .entry .entry-content h3 {
  104.             font-size: 22px;
  105.             margin-top: 30px;
  106.             font-weight: bold;
  107.         }
  109.         .blog .entry .entry-content blockquote {
  110.             overflow: hidden;
  111.             background-color: #fafafa;
  112.             padding: 60px;
  113.             position: relative;
  114.             text-align: center;
  115.             margin: 20px 0;
  116.         }
  118.         .blog .entry .entry-content blockquote p {
  119.             color: #4d4643;
  120.             line-height: 1.6;
  121.             margin-bottom: 0;
  122.             font-style: italic;
  123.             font-weight: 500;
  124.             font-size: 22px;
  125.         }
  127.         .blog .entry .entry-content blockquote .quote-left {
  128.             position: absolute;
  129.             left: 20px;
  130.             top: 20px;
  131.             font-size: 36px;
  132.             color: #e7e7e7;
  133.         }
  135.         .blog .entry .entry-content blockquote .quote-right {
  136.             position: absolute;
  137.             right: 20px;
  138.             bottom: 20px;
  139.             font-size: 36px;
  140.             color: #e7e7e7;
  141.         }
  143.         .blog .entry .entry-content blockquote::after {
  144.             content: '';
  145.             position: absolute;
  146.             left: 0;
  147.             top: 0;
  148.             bottom: 0;
  149.             width: 3px;
  150.             background-color: #111;
  151.             margin-top: 20px;
  152.             margin-bottom: 20px;
  153.         }
  155.         .blog .entry .entry-footer {
  156.             padding-top: 10px;
  157.             border-top: 1px solid #e6e6e6;
  158.         }
  160.         .blog .entry .entry-footer i {
  161.             color: #5e5e5e;
  162.             display: inline;
  163.         }
  165.         .blog .entry .entry-footer a {
  166.             color: #8b8b8b;
  167.             transition: 0.3s;
  168.         }
  170.         .blog .entry .entry-footer a:hover {
  171.             color: #0084d6;
  172.         }
  174.         .blog .entry .entry-footer .cats {
  175.             list-style: none;
  176.             display: inline;
  177.             padding: 0 20px 0 0;
  178.             font-size: 14px;
  179.         }
  181.         .blog .entry .entry-footer .cats li {
  182.             display: inline-block;
  183.         }
  185.         .blog .entry .entry-footer .tags {
  186.             list-style: none;
  187.             display: inline;
  188.             padding: 0;
  189.             font-size: 14px;
  190.         }
  192.         .blog .entry .entry-footer .tags li {
  193.             display: inline-block;
  194.         }
  196.         .blog .entry .entry-footer .tags li + li::before {
  197.             padding-right: 6px;
  198.             color: #6c757d;
  199.             content: ",";
  200.         }
  202.         .blog .entry .entry-footer .share {
  203.             font-size: 16px;
  204.         }
  206.         .blog .entry .entry-footer .share i {
  207.             padding-left: 5px;
  208.         }
  210.         .blog .entry-single {
  211.             margin-bottom: 30px;
  212.         }
  214.         .blog .blog-author {
  215.             padding: 20px;
  216.             margin-bottom: 30px;
  217.             box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  218.         }
  220.         .blog .blog-author img {
  221.             width: 120px;
  222.         }
  224.         .blog .blog-author h4 {
  225.             margin-left: 140px;
  226.             font-weight: 600;
  227.             font-size: 22px;
  228.             margin-bottom: 0px;
  229.             padding: 0;
  230.         }
  232.         .blog .blog-author .social-links {
  233.             margin: 0 0 5px 140px;
  234.         }
  236.         .blog .blog-author .social-links a {
  237.             color: #777777;
  238.         }
  240.         .blog .blog-author p {
  241.             margin-left: 140px;
  242.             font-style: italic;
  243.             color: #bfb9b6;
  244.         }
  246.         .blog .blog-comments {
  247.             margin-bottom: 30px;
  248.         }
  250.         .blog .blog-comments .comments-count {
  251.             font-weight: bold;
  252.         }
  254.         .blog .blog-comments .comment {
  255.             margin-top: 30px;
  256.             position: relative;
  257.         }
  259.         .blog .blog-comments .comment .comment-img {
  260.             width: 50px;
  261.         }
  263.         .blog .blog-comments .comment h5 {
  264.             margin-left: 65px;
  265.             font-size: 16px;
  266.             margin-bottom: 2px;
  267.         }
  269.         .blog .blog-comments .comment h5 a {
  270.             font-weight: bold;
  271.             color: #4d4643;
  272.             transition: 0.3s;
  273.         }
  275.         .blog .blog-comments .comment h5 a:hover {
  276.             color: #0084d6;
  277.         }
  279.         .blog .blog-comments .comment h5 .reply {
  280.             padding-left: 10px;
  281.             color: #111;
  282.         }
  284.         .blog .blog-comments .comment time {
  285.             margin-left: 65px;
  286.             display: block;
  287.             font-size: 14px;
  288.             color: #777777;
  289.             margin-bottom: 5px;
  290.         }
  292.         .blog .blog-comments .comment p {
  293.             margin-left: 65px;
  294.         }
  296.         .blog .blog-comments .comment.comment-reply {
  297.             padding-left: 40px;
  298.         }
  300.         .blog .blog-comments .reply-form {
  301.             margin-top: 30px;
  302.             padding: 30px;
  303.             box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  304.         }
  306.         .blog .blog-comments .reply-form h4 {
  307.             font-weight: bold;
  308.             font-size: 22px;
  309.         }
  311.         .blog .blog-comments .reply-form p {
  312.             font-size: 14px;
  313.         }
  315.         .blog .blog-comments .reply-form input {
  316.             border-radius: 0;
  317.             padding: 20px 10px;
  318.             font-size: 14px;
  319.             border-radius: 4px;
  320.         }
  322.         .blog .blog-comments .reply-form input:focus {
  323.             box-shadow: none;
  324.             border-color: #0084d6;
  325.         }
  327.         .blog .blog-comments .reply-form textarea {
  328.             border-radius: 0;
  329.             padding: 10px 10px;
  330.             font-size: 14px;
  331.             border-radius: 4px;
  332.         }
  334.         .blog .blog-comments .reply-form textarea:focus {
  335.             box-shadow: none;
  336.             border-color: #0084d6;
  337.         }
  339.         .blog .blog-comments .reply-form .form-group {
  340.             margin-bottom: 25px;
  341.         }
  343.         .blog .blog-comments .reply-form .btn-primary {
  344.             padding: 8px 20px;
  345.             border: 0;
  346.             border-radius: 4px;
  347.             background-color: #0084d6;
  348.         }
  350.         .blog .blog-comments .reply-form .btn-primary:hover {
  351.             background-color: #0084d6;
  352.         }
  354.         .blog .blog-pagination {
  355.             color: #444444;
  356.         }
  358.         .blog .blog-pagination ul {
  359.             display: flex;
  360.             padding-left: 0;
  361.             list-style: none;
  362.         }
  364.         .blog .blog-pagination li {
  365.             border: 1px solid white;
  366.             margin: 0 5px;
  367.             transition: 0.3s;
  368.         }
  370.         .blog .blog-pagination li.active {
  371.             background: white;
  372.         }
  374.         .blog .blog-pagination li a {
  375.             color: #b4aca8;
  376.             padding: 7px 16px;
  377.             display: inline-block;
  378.         }
  380.         .blog .blog-pagination li.active, .blog .blog-pagination li:hover {
  381.             background: #0084d6;
  382.             border: 1px solid #0084d6;
  383.             border-radius: 4px;
  384.         }
  386.         .blog .blog-pagination li.active a, .blog .blog-pagination li:hover a {
  387.             color: #fff;
  388.         }
  390.         .blog .blog-pagination li.disabled {
  391.             background: #fff;
  392.             border: 1px solid white;
  393.         }
  395.         .blog .blog-pagination li.disabled i {
  396.             color: #f6f5f5;
  397.             padding: 10px 16px;
  398.             display: inline-block;
  399.         }
  401.         .blog .sidebar {
  402.             padding: 30px;
  403.             /*margin: 0 0 60px 20px;*/
  404.             box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  405.         }
  407.         .blog .sidebar .sidebar-title {
  408.             font-size: 20px;
  409.             font-weight: 700;
  410.             padding: 0 0 0 0;
  411.             margin: 0 0 15px 0;
  412.             color: #111;
  413.             position: relative;
  414.         }
  416.         .blog .sidebar .sidebar-item {
  417.             margin-bottom: 30px;
  418.         }
  420.         .blog .sidebar .search-form form {
  421.             background: #fff;
  422.             border: 1px solid #ddd;
  423.             padding: 3px 10px;
  424.             position: relative;
  425.             border-radius: 4px;
  426.         }
  428.         .blog .sidebar .search-form form input[type="text"] {
  429.             border: 0;
  430.             padding: 4px;
  431.             width: calc(100% - 40px);
  432.         }
  434.         .blog .sidebar .search-form form button {
  435.             position: absolute;
  436.             top: 0;
  437.             right: 0;
  438.             bottom: 0;
  439.             border: 0;
  440.             background: none;
  441.             font-size: 16px;
  442.             padding: 0 15px;
  443.             margin: -1px;
  444.             background: #0084d6;
  445.             color: #fff;
  446.             transition: 0.3s;
  447.             border-radius: 0 4px 4px 0;
  448.         }
  450.         .blog .sidebar .search-form form button:hover {
  451.             background: #0084d6;
  452.         }
  454.         .blog .sidebar .categories ul {
  455.             list-style: none;
  456.             padding: 0;
  457.         }
  459.         .blog .sidebar .categories ul li + li {
  460.             padding-top: 10px;
  461.         }
  463.         .blog .sidebar .categories ul a {
  464.             color: #2b2b2b;
  465.             transition: 0.3s;
  466.         }
  468.         .blog .sidebar .categories ul a:hover {
  469.             color: #0084d6;
  470.         }
  472.         .blog .sidebar .categories ul a span {
  473.             padding-left: 5px;
  474.             color: #aaaaaa;
  475.             font-size: 14px;
  476.         }
  478.         .blog .sidebar .recent-posts .post-item + .post-item {
  479.             margin-top: 15px;
  480.         }
  482.         .blog .sidebar .recent-posts img {
  483.             width: 80px;
  484.             float: left;
  485.         }
  487.         .blog .sidebar .recent-posts h4 {
  488.             font-size: 15px;
  489.             margin-left: 95px;
  490.             font-weight: bold;
  491.         }
  493.         .blog .sidebar .recent-posts h4 a {
  494.             color: black;
  495.             transition: 0.3s;
  496.         }
  498.         .blog .sidebar .recent-posts h4 a:hover {
  499.             color: #0084d6;
  500.         }
  502.         .blog .sidebar .recent-posts time {
  503.             display: block;
  504.             margin-left: 95px;
  505.             font-style: italic;
  506.             font-size: 14px;
  507.             color: #777777;
  508.         }
  510.         .blog .sidebar .tags {
  511.             margin-bottom: -10px;
  512.         }
  514.         .blog .sidebar .tags ul {
  515.             list-style: none;
  516.             padding: 0;
  517.         }
  519.         .blog .sidebar .tags ul li {
  520.             display: inline-block;
  521.         }
  523.         .blog .sidebar .tags ul a {
  524.             color: #515151;
  525.             font-size: 14px;
  526.             padding: 6px 14px;
  527.             margin: 0 6px 8px 0;
  528.             border: 1px solid #dddddd;
  529.             display: inline-block;
  530.             transition: 0.3s;
  531.             border-radius: 4px;
  532.         }
  534.         .blog .sidebar .tags ul a:hover {
  535.             color: #fff;
  536.             border: 1px solid #0084d6;
  537.             background: #0084d6;
  538.         }
  540.         .blog .sidebar .tags ul a span {
  541.             padding-left: 5px;
  542.             color: #aaaaaa;
  543.             font-size: 14px;
  544.         }
  546.         .widget {
  547.             position: relative;
  548.             display: block;
  549.             margin-bottom: 30px;
  550.         }
  552.         .widget_title {
  553.             background-color: #fff;
  554.             z-index: 3;
  555.         }
  557.         .widget_title:after {
  558.             position: relative;
  559.             display: inline-block;
  560.             bottom: 35px;
  561.             left: 52%;
  562.             content: " ";
  563.             width: 50%;
  564.             border-top: 2px solid #eee;
  565.             z-index: 1;
  566.         }
  568.         .widget_black h2:after {
  569.             display: table;
  570.             position: relative;
  571.             left: 50%;
  572.             bottom: 10px;
  573.             height: 2px;
  574.             content: " ";
  575.             text-shadow: none;
  576.             width: 15%;
  577.             background-color: #000;
  578.             z-index: 2;
  579.         }
  581.         .widget i:hover {
  582.             color: #f7510f;
  583.             cursor: pointer;
  584.         }
  586.         .widget_adv {
  587.             text-align: center;
  588.             margin: 30px;
  589.         }
  591.         .widget_advertisement {
  592.             text-align: center;
  593.             margin: 30px 0;
  594.         }
  596.         .widget_body img {
  597.             float: left;
  598.             position: relative;
  599.             margin-right: 25px;
  600.         }
  602.         .widget .add_img {
  603.             display: inline-block;
  604.             padding: 12px 12px;
  605.         }
  607.         .widget .media {
  608.             margin-top: 0;
  609.             margin-bottom: 30px;
  610.         }
  612.         .widget .media-heading {
  613.             margin-bottom: 5px;
  614.             font-size: 15px;
  615.             line-height: 18px;
  616.         }
  618.         .widget .media-date {
  619.             color: #b2b0b0;
  620.         }
  622.         .widget_article_social {
  623.             color: #a5a5a5;
  624.             margin-top: 15px;
  625.         }
  627.         .widget_article_social i {
  628.             padding: 5px;
  629.             margin-right: 5px;
  630.             color: #fff;
  631.             font-size: 10px;
  632.             background-color: #a5a5a5;
  633.         }
  635.         .widget_article_social span {
  636.             margin-right: 10px;
  637.         }
  639.         .widget_article_social a {
  640.             font-weight: bold;
  641.         }
  643.         .widget_img {
  644.             text-align: center;
  645.             margin: 0 auto;
  646.         }
  648.         .widget .adv_img {
  649.             display: inline-block;
  650.         }
  652.         .widget_body .btn {
  653.             border-radius: 0;
  654.         }
  656.         .widget hr {
  657.             border-color: #e0e0e0;
  658.         }
  660.         .widget-title hr {
  661.             border-width: 4px;
  662.             margin-bottom: 0;
  663.         }
  665.         .widget-title hr:before {
  666.             width: 80px;
  667.             background-color: #ddd;
  668.             display: block;
  669.             height: 4px;
  670.             position: relative;
  671.             content: "";
  672.             top: -4px;
  673.         }
  674.         .widget_divider {
  675.             display: inline-block;
  676.             vertical-align: baseline;
  677.             zoom: 1;
  678.             width: 98%;
  679.             position: relative;
  680.             text-align: right;
  681.             text-transform: uppercase;
  682.             font-size: 11px;
  683.         }
  685.         .widget_divider::after {
  686.             content: '';
  687.             display: block;
  688.             width: 75%;
  689.             left: 0;
  690.             text-align: right;
  691.             position: absolute;
  692.             top: 12px;
  693.             border-top: 1px solid #f1f1f1;
  694.         }
  695.         .media-body, .media-left, .media-right{
  696.             display: table-cell;
  697.             vertical-align: top;
  698.         }
  699.         .media-left, .media > .pull-left{
  700.             padding-right: 10px;
  701.         }
  702.         .media-body{
  704.         }
  706.         .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){
  707.             border-color: transparent!important;
  708.         }
  709.         .ck.ck-editor__main>.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{
  710.             border: transparent!important;
  711.         }
  713.         .padded {
  714.             padding: 100px 0;
  715.         }
  716.         .wrapper-grey {
  717.             background: #F4F4F4;
  718.         }
  719.         .avatar {
  720.             width: 30px;
  721.             border-radius: 50%;
  722.         }
  723.         .avatar-bordered {
  724.             box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  725.             border: white 1px solid;
  726.         }
  727.         .avatar-large {
  728.             width: 50px;
  729.         }
  730.         /* .banner {
  731.           color: white;
  732.           text-align: center;
  733.           height: 100vh;
  734.           background-size: cover !important;
  735.           display: flex;
  736.           align-items: center;
  737.           justify-content: center;
  738.         }
  739.         .banner h1 {
  740.           font-size: 50px;
  741.           font-weight: bold;
  742.           text-shadow: 0px 1px rgba(0, 0, 0, 0.2);
  743.         }
  744.         .banner p {
  745.           font-size: 25px;
  746.           font-weight: lighter;
  747.           color: rgba(255, 255, 255, 0.8);
  748.           margin-bottom: 50px;
  749.         } */
  751.         .card {
  752.             height: 250px;
  753.             text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  754.             background-size: cover !important;
  755.             color: white;
  756.             position: relative;
  757.             border-radius: 5px;
  758.             margin-bottom: 20px;
  759.         }
  760.         .card-user {
  761.             position: absolute;
  762.             right: 10px;
  763.             top: 10px;
  764.         }
  765.         .card-category {
  766.             position: absolute;
  767.             top: 10px;
  768.             left: 10px;
  769.             font-size: 20px;
  770.         }
  771.         .card-description {
  772.             position: absolute;
  773.             bottom: 10px;
  774.             left: 10px;
  775.         }
  776.         .card-description h2 {
  777.             font-size: 22px;
  778.         }
  779.         .card-description p {
  780.             font-size: 15px;
  781.         }
  782.         .card-link {
  783.             position: absolute;
  784.             top: 0;
  785.             bottom: 0;
  786.             width: 100%;
  787.             z-index:2;
  788.             background: black;
  789.             opacity: 0;
  790.         }
  791.         .card-link:hover{
  792.             opacity: 0.1;
  793.         }
  794.         .features img {
  795.             width: 100px;
  796.         }
  797.         .features h2 {
  798.             font-size: 20px;
  799.             margin-bottom: 10px;
  800.         }
  801.         .features p {
  802.             font-size: 15px;
  803.             font-weight: lighter;
  804.         }
  806.     </style>
  808. {% endblock %}
  810. {% block body %}
  812.     <div class=" d-flex flex-column flex-row-fluid">
  813.         <div class="card-body row pt-10 mt-10">
  814.             <h1 style="font-weight: bolder;font-size: 38px;margin-bottom: 5px" class="bold text-left text-primary">
  815.                <a href="{{ path('blog_page') }}"> {% if blog_name == ''%} {{ 'educati_article_header'|trans}} {% else%} {{ blog_name|raw }} {% endif%} </a>
  816.             </h1>
  818.             <div class="row mt-10">
  819.                 <div class=" col-lg-8 col-md-8 col-sm-12" style="margin-bottom: 100px">
  820.                     <div class="row entries">
  822.                         <article class="entry entry-single richText" data-aos="fade-up">
  824.                             <div class="entry-img">
  825.                                 {% if article.imageCover == null %}
  826.                                     <img style="max-height: 350px; " src="{{ asset('assets/media/avatars/blank_article.png') }}" alt="" class="img-thumbnail img-fluid">
  827.                                 {% else %}
  828.                                     {% if article.imageCover != 'blank_article.png'  %}
  829.                                         <img style="max-height: 350px; " src="{{ asset('uploads/'~article.imageCover) }}" alt="" class="img-thumbnail img-fluid">
  830.                                     {% endif %}
  832.                                 {% endif %}
  833.                             </div>
  835.                             <h1 class="title entry-title article-title " style="font-size: 28px">
  836.                                 {{ article.title }}
  837.                             </h1>
  841.                             <div class="entry-content ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-read-only ck-blurred" lang="en" dir="ltr" role="textbox" aria-label="Rich Text Editor, main" contenteditable="false">
  842.                                     {{ article.content|raw }}
  843.                             </div>
  845.                             <div class="entry-footer clearfix">
  848.                                 <div class="m-8">
  849.                                     <time style="float: right;font-weight: bold" datetime="2020-01-01">{{ article.date|date('Y-m-d') }}</time>
  850.                                 </div>
  851.                                 <div style="" class="float-right share">
  852.                                     <a href="{{ links.facebook }}" title="Share on Facebook"><i class="bi bi-facebook" style="color:#0492e0"></i> </a>
  853.                                     <a href="{{ links.whatsapp }}" title="Share on Whatsapp"><i class="bi bi-whatsapp" style="color: #5b3434"></i> </a>
  854.                                 </div>
  856.                             </div>
  858.                         </article><!-- End blog entry -->
  863.                     </div>
  864.                     <div class="row">
  865.                         <div class="widget reviews m30">
  866.                             <div class="widget_title widget_black">
  867.                                 <h2><a href="#">{{ 'recents_articles'|trans }}</a></h2>
  868.                             </div>
  869.                             {% for r in recents %}
  870.                                 <div class="media">
  871.                                     <div class="media-left">
  872.                                         <a href="{{ path('blog_show_article',{'slug':r.slug}) }}">
  873.                                             {% if r.imageCover == '' %}
  874.                                                 <img style="width: 100px;height: 100px;object-fit: cover" src="{{ asset('assets/media/avatars/blank_article.png') }}" alt="" class=" ">
  875.                                             {% else %}
  876.                                                 <img style="width: 100px;height: 100px;object-fit: cover" src="{{ asset('uploads/'~r.imageCover) }}" alt="" class=" ">
  878.                                             {% endif %}
  879.                                         </a>
  880.                                     </div>
  881.                                     <div class="media-body">
  882.                                         <h5 class="media-heading">
  883.                                             <a class="fs-2" href="{{ path('blog_show_article',{'slug':r.slug}) }}" >{{ r.title|striptags|u.truncate(85, '...')|raw  }}
  884.                                             </a>
  885.                                         </h5>
  886.                                         <div class="media-body">
  887.                                             <a class="text-gray-500" href="{{ path('blog_show_article',{'slug':r.slug}) }}">
  888.                                                 {{ r.content|striptags|u.truncate(200, '...')|raw  }}
  889.                                             </a>
  890.                                         </div>
  892.                                     </div>
  893.                                 </div>
  894.                                 <div class="separator"></div>
  895.                             {% endfor %}
  896.                         </div>
  898.                     </div>
  899.                 </div>
  900.                 <div class="col-lg-4 col-md-4 col-sm-12">
  901.                     {% include 'blog/ads_list.html.twig' %}
  902.                 </div>
  906.             </div>
  913.         </div>
  915.     </div>
  919. {% endblock %}
  921.  {% block js %}
  922.      <script src="{{ asset('assets/plugins/custom/ckeditor/ckeditor-classic.bundle.js') }}"></script>
  923.      <script id="templateAds" type="text/html">
  924.          <div class="col-md-12">
  925.              <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]]');">
  926.                  <div class="card-category" style="text-shadow: 1px 1px 2px #7f3e98, 0 0 1em #7f3e98, 0 0 0.2em #7f3e98;">[[title]]</div>
  927.                  <div class="card-description">
  928.                      <p style="text-shadow: 1px 1px 2px #7f3e98, 0 0 1em #7f3e98, 0 0 0.2em #7f3e98;">[[content]]</p>
  929.                  </div>
  930.                  <a target="_blank" class="card-link" href="[[link]]" ></a>
  931.              </div>
  932.          </div>
  933.      </script>
  935.      <script>
  936.          $.ajax({
  937.              url: "{{ path('list_ads_json',{'limit':10,'offset':0}) }}"+'?lang='+getCookie('lang'),
  938.              type: 'GET',
  939.              dataType: 'json',
  940.              success: function(res){
  941.                  let templateRep = document.getElementById("templateAds");
  942.                  let templateRepHtml = templateRep.innerHTML;
  943.                  let listHtml = "";
  944.                  res.data.forEach(function (e){
  945.                      let link = "{{ path('display_ads',{'slug':'0000'}) }}";
  946.                      link = link.replace('0000',e.slug)
  947.                      listHtml += templateRepHtml
  948.                          .replace("[[image]]",e.image)
  949.                          .replace("[[link]]",link)
  950.                          .replace("[[title]]",e.title)
  951.                          .replace("[[content]]",e.description);
  952.                  });
  954.                  $('#ads_list').html(listHtml);
  956.              },
  957.              error :function (error) {
  958.                  console.log(error);
  959.              }
  960.          });
  962.      </script>
  965.  {% endblock %}