templates/user/start/blog_ansehen.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block metaTitle %}{{ blog.titel }} - {{ parent() }}{% endblock %}
  5. {% block body %}
  7.     {% include('/user/firma/_firmenfarben.html.twig') %}
  9.     <script src="{{ asset('/vendor/slick/slick.min.js') }}"></script>
  10.     <link rel="stylesheet" href="{{ asset('/vendor/slick/slick.css') }}"/>
  11.     <link rel="stylesheet" href="{{ asset('/vendor/slick/slick-theme.css') }}"/>
  13.     <div class="page-title-overlap pt-4 hintergrundfarbe schriftfarbe">
  14.         <div class="container d-lg-flex justify-content-between py-2 py-lg-3">
  15.             <div class="order-lg-2 mb-3 mb-lg-0 pt-lg-2">
  16.                 <div class="small d-flex text-center text-lg-end flex-lg-nowrap justify-content-center justify-content-lg-start schriftfarbe">
  17.                     <a class="me-2" href="{{ path('user_start') }}"><span class="schriftfarbe">Home</span></a> >
  18.                     <span class="mx-2">Blog</span>
  19.                 </div>
  20.             </div>
  21.             <div class="order-lg-1 pe-lg-4 text-center text-lg-start">
  22.                 <h3 class="schriftfarbe mb-0">{{ blog.titel }}</h3>
  23.                 <a href="javascript:history.back()"><h5 class="schriftfarbe mb-0 mt-3"><i class="mdi mdi-arrow-left-bold me-2">Zurück</i></h5></a>
  24.             </div>
  25.         </div>
  26.     </div>
  28.     <!-- Page Title-->
  30.     <section class="container mb-3 pb-3">
  31.         <div class="bg-light shadow-lg rounded-3 overflow-hidden">
  33.             {% if blog.aktiv == 0 %}
  34.                 <div class="d-flex flex-wrap align-items-center bg-danger justify-content-center pt-3">
  35.                     <h3 class="text-white">Blog noch nicht aktiviert</h3>
  36.                 </div>
  37.             {% endif %}
  39.             <div class="col-12" id="user-dateien-geöffnet">
  40.                 <div class="card border-0">
  41.                     <div class="card-body">
  45.                         <div class="row justify-content-center mt-md-2 mx-lg-3">
  46.                             <div class="col-lg-12 mt-0">
  47.                                 <div class="text-center mb-1">
  48.                                     <h1>{{ blog.titel }}</h1>
  49.                                 </div>
  51.                                 {% if blog.anhang is defined and blog.anhang|length != 1 %}
  52.                                     <div class="text-center d-none d-sm-block">
  53.                                         <img class="rounded" id="bild-gross" src="{{ asset('/uploads/blogs/' ~ blog.firma.id ~ '/titelbild/' ~ blog.id ~ '/' ~ blog.titelbild) }}"
  54.                                              style="max-height: 500px">
  55.                                     </div>
  56.                                 {% else %}
  57.                                     {% for anhang in blog.anhang %}
  58.                                         <div class="text-center d-none d-sm-block">
  59.                                             <img class="rounded" id="bild-gross"
  60.                                                  src="{{ path ('oeffentliche_dateien_anzeigen',{firmaId:blog.firma.id, dateiname:anhang.datei.speichername}) }}"
  61.                                                  style="max-height: 500px">
  62.                                         </div>
  63.                                     {% endfor %}
  64.                                 {% endif %}
  66.                                 {% if blog.anhang is defined and blog.anhang|length > 1 %}
  67.                                     <div class="slick-slider mt-3 ms-sm-3 me-sm-3">
  68.                                         {% for anhang in blog.anhang %}
  69.                                             <div class="mx-2">
  70.                                                 <img class="kleines-bild" style="cursor: pointer;"
  71.                                                      src="{{ path ('oeffentliche_dateien_anzeigen',{firmaId:blog.firma.id, dateiname:anhang.datei.speichername}) }}">
  72.                                             </div>
  73.                                         {% endfor %}
  74.                                     </div>
  75.                                 {% endif %}
  78.                                 <div class="js-editor mx-n2 mt-5">
  79.                                     {{ blog.text|replace({"<a href": "<a target=_blank href"})|raw }}
  80.                                 </div>
  82.                                 {% if blog.quote|length > 0 %}
  83.                                     <blockquote class="testimonial pt-4 pb-4">
  84.                                         <div class="card border-0 shadow-sm">
  85.                                             <span class="testimonial-mark"></span>
  86.                                             <div class="card-body fs-md">
  87.                                                 <i>
  88.                                                     {{ blog.quote| nl2br }}
  89.                                                 </i>
  90.                                             </div>
  91.                                         </div>
  92.                                     </blockquote>
  93.                                 {% endif %}
  95.                                 <div class="js-editor mx-n2">
  96.                                     {{ blog.text2|replace({"<a href": "<a target=_blank href"})|raw }}
  97.                                 </div>
  99.                                 <footer class="d-flex align-items-center text-left pt-4">
  100.                                     {% if blog.firma.logo|length > 0 %}
  101.                                         <img class="rounded" src="{{ asset('uploads/firmen/logo/' ~ blog.firma.id ~ '/'~ blog.firma.logo ) }}" width="70">
  102.                                     {% endif %}
  103.                                     <div class="ps-3">
  104.                                         <p class="fs-lg mb-n1">{{ blog.firma.firmenname }}</p>
  105.                                     </div>
  106.                                 </footer>
  108.                                 <!-- Post tags + sharing-->
  109.                                 <div class="d-flex flex-wrap justify-content-between pt-4">
  110.                                     <div class="mt-3">
  111.                                         {% if blog.firma.webseite is not null %}
  112.                                             <a class="btn-social bs-facebook me-2 mb-2" href="{{ blog.firma.webseite }}" target="_blank">
  113.                                                 <i class="ci-globe"></i>
  114.                                             </a>
  115.                                         {% endif %}
  116.                                         {% if blog.firma.facebook is not null %}
  117.                                             <a class="btn-social bs-facebook me-2 mb-2" href="{{ blog.firma.facebook }}" target="_blank">
  118.                                                 <i class="ci-facebook"></i>
  119.                                             </a>
  120.                                         {% endif %}
  121.                                         {% if blog.firma.instagram is not null %}
  122.                                         <a class="btn-social bs-instagram me-2 mb-2" href="{{ blog.firma.instagram }}" target="_blank">
  123.                                             <i class="ci-instagram"></i>
  124.                                         </a>
  125.                                         {% endif %}
  126.                                         {% if blog.firma.youtube is not null %}
  127.                                         <a class="btn-social bs-youtube me-2 mb-2" href="{{ blog.firma.youtube }}" target="_blank">
  128.                                             <i class="ci-youtube"></i>
  129.                                         </a>
  130.                                         {% endif %}
  131.                                     </div>
  132.                                 </div>
  135.                             </div>
  136.                         </div>
  139.                     </div>
  140.                 </div>
  141.             </div>
  142.         </div>
  143.     </section>
  147.     <script>
  148.         jQuery(function ($) {
  149.             $('.slick-slider').slick({
  150.                 infinite: false,
  151.                 dots: false,
  152.                 draggable: false,
  153.                 arrows: true,
  154.                 slidesToShow: 8,
  155.                 slidesToScroll: 6,
  156.                 responsive: [
  157.                     {
  158.                         breakpoint: 1024,
  159.                         settings: {
  160.                             slidesToShow: 8,
  161.                             slidesToScroll: 6
  162.                         }
  163.                     },
  164.                     {
  165.                         breakpoint: 900,
  166.                         settings: {
  167.                             slidesToShow: 6,
  168.                             slidesToScroll: 4
  169.                         }
  170.                     },
  171.                     {
  172.                         breakpoint: 780,
  173.                         settings: {
  174.                             slidesToShow: 4,
  175.                             slidesToScroll: 2
  176.                         }
  177.                     },
  178.                     {
  179.                         breakpoint: 600,
  180.                         settings: {
  181.                             slidesToShow: 2,
  182.                             slidesToScroll: 1
  183.                         }
  184.                     },
  185.                     {
  186.                         breakpoint: 480,
  187.                         settings: {
  188.                             slidesToShow: 1,
  189.                             slidesToScroll: 1
  190.                         }
  191.                     }
  192.                 ]
  193.             });
  195.             $('.kleines-bild').on('click', function (event) {
  196.                 $('#bild-gross').attr('src', $(this).attr('src'));
  197.             });
  198.         });
  199.     </script>
  203. {% endblock %}