templates/views/themaDetail.html.twig line 37

Open in your IDE?
  1. {% extends 'layouts/layout.html.twig' %}
  2. {% set categories = [] %}
  3. {% set mainCategory = null %}
  4. {% if dataObject is not null %}
  5.     {% set categories = dataObject.bereiche %}
  6.     {% do pimcore_head_title(dataObject.title ~ ' / Themen / Radio Oberland') %}
  7.     {% do pimcore_head_meta().setProperty('og:title', dataObject.title | replace({ '"': "'"}) ~ ' / Themen / Radio Oberland') %}
  8.     {% do pimcore_head_meta().setProperty('og:description', dataObject.excerpt | replace({ '"': "'" }) ~ ' / Themen / Radio Oberland') %}
  9.     {% do pimcore_head_meta().setProperty('og:type', 'article') %}
  10. {% endif %}
  11. {% if categories | length > 0 %}
  12.     {% set mainCategory = categories[0] %}
  13. {% endif %}
  14. {% block content %}
  15.     {% if dataObject is not null %}
  16.         {% set hasImage = dataObject.image and dataObject.image is not null %}
  17.         {% set hasHeaderImage = dataObject.imageHeader and dataObject.imageHeader is not null %}
  18.         {% set ogImage = '' %}
  19.         {% if hasImage %}
  20.             {% set thumbnail = dataObject.image.getThumbnail('standardThumbnail') %}
  21.             {% set ogImage = 'https://radio-oberland.de' ~ thumbnail.path %}
  22.         {% endif %}
  23.         <div class="pimcore_area_content">
  24.             <div>
  25.                 {% set bereich = null %}
  26.                 {% if dataObject.bereiche | length %}
  27.                     {% set bereich = dataObject.bereiche[0] %}
  28.                 {% endif %}
  29.                 <div class="py-5 overflow-hidden relative"
  30.                      {% if bereich %}style="background-color: {{ bereich.color ? 'rgb(' ~ bereich.color.r ~ ',' ~ bereich.color.g ~ ',' ~ bereich.color.b ~ ')' : '#ffffff' }}; color: {{ bereich.colorText ? 'rgb(' ~ bereich.colorText.r ~ ',' ~ bereich.colorText.g ~ ',' ~ bereich.colorText.b ~ ')' : '#000000' }}">{% endif %}
  31.                     <div class="absolute left-0 top-0 bottom-0 right-0 pointer-events-none mix-blend-multiply"><img src="{{ asset('static/images/waves.webp') }}" alt="" class="w-full h-full object-cover"></div>
  32.                     {#            <div class="absolute left-0 top-0 bottom-0" style="background: rgba(0, 0, 0, 0.05); transform: skewX(5deg); transform-origin: bottom left; width: 60%;"></div>#}
  33.                     {#            <div class="absolute left-0 top-0 bottom-0" style="background: rgba(0, 0, 0, 0.05); transform: skewX(5deg); transform-origin: bottom left; width: 40%;"></div>#}
  34.                     {#            <div class="absolute left-0 top-0 bottom-0" style="background: rgba(0, 0, 0, 0.05); transform: skewX(5deg); transform-origin: bottom left; width: 35%;"></div>#}
  35.                     <div class="container relative px-5 text-xs">
  36.                         <a href="/themen">Themen</a> &raquo;
  37.                         {% if bereich and bereich.parent and bereich.parent.type == 'object' %}
  38.                             <a href="/themen/{{ bereich.parent.key }}" class="whitespace-nowrap">{{ bereich.parent.title }} &raquo;</a>
  39.                         {% endif %}
  40.                         {% if bereich %}
  41.                             <a href="/themen/{{ bereich.key }}" class="whitespace-nowrap">{{ bereich.title }}</a>
  42.                         {% endif %}
  43.                     </div>
  44.                 </div>
  45.             </div>
  46.             {% if hasHeaderImage == false and hasImage == false %}
  47.                 {# none, wir hatten hier mal ein filler-bild #}
  48.             {% else %}
  49.                 {% if hasHeaderImage %}
  50.                     {% set image = dataObject.imageHeader %}
  51.                 {% else %}
  52.                     {% set image = dataObject.image %}
  53.                 {% endif %}
  54.                 <div class="relative">
  55.                     <div class="container" style="padding: 0">
  56.                         <div class="relative overflow-hidden" style="max-height: 70vh">
  57.                             {% if image and image is not null %}
  58.                                 {% set thumbnail = image.getThumbnail('standardThumbnail') %}
  59.                                 {% set ogImage = 'https://radio-oberland.de' ~ thumbnail.path %}
  60.                                 {{ thumbnail.html | replace({ '<img': '<img data-parallax="-0.5" class="w-full h-full object-cover" style="object-position: center 10%"' }) | raw }}
  61.                             {% endif %}
  62.                         </div>
  63.                     </div>
  64.                 </div>
  65.             {% endif %}
  66.             <div class="container news-detail-container md:px-5 2xl:px-0">
  67.                 <div class="grid grid-cols-12 gap-5 border-b-[5px] border-blue-light mb-5 group">
  68.                     <div class="col-span-12 md:col-span-7 p-5 xl:p-0">
  69.                         {% if hasHeaderImage %}
  70.                             {% set image = dataObject.imageHeader %}
  71.                         {% else %}
  72.                             {% set image = dataObject.image %}
  73.                         {% endif %}
  74.                         {% if image and image.getMetadata('copyright') %}
  75.                             {% set unsplash = image.getMetadata('unsplash') %}
  76.                             <div class="text-xs md:pt-5">Bild &copy;
  77.                                 {% if unsplash %}
  78.                                     <a href="https://unsplash.com/photos/{{ unsplash }}?utm_source=radio_oberland&utm_medium=referral" class="text-blue" target="_blank">{{ image.getMetadata('copyright') }}</a>
  79.                                 {% else %}
  80.                                     {{ image.getMetadata('copyright') }}
  81.                                 {% endif %}
  82.                             </div>
  83.                         {% endif %}
  84.                         {% if dataObject.sponsor %}
  85.                             <div class="md:hidden shadow-card p-5 mt-5">
  86.                                 {% set linkWeb = dataObject.sponsor.linkWeb and dataObject.sponsor.linkWeb.href ? dataObject.sponsor.linkWeb.href : '' %}
  87.                                 <span class="text-dark-blue font-bold uppercase text-xs">Dieser Artikel wird präsentiert von</span>
  88.                                 <div class="mt-5">
  89.                                     {% if dataObject.sponsor.logo and dataObject.sponsor.logo is not null %}
  90.                                         <div>
  91.                                             {% if linkWeb %}
  92.                                             <a href="{{ linkWeb }}" target="_blank">
  93.                                                 {% endif %}
  94.                                                 {{ dataObject.sponsor.logo.getThumbnail('standardThumbnail').html | replace({ '<img': '<img class="max-w-full inline-block"' }) | raw }}
  95.                                                 {% if linkWeb %}
  96.                                             </a>
  97.                                             {% endif %}
  98.                                         </div>
  99.                                     {% else %}
  100.                                         {% if linkWeb %}
  101.                                             <a href="{{ linkWeb }}" target="_blank">
  102.                                         {% endif %}
  103.                                         {{ dataObject.sponsor.title }}
  104.                                         {% if linkWeb %}
  105.                                             </a>
  106.                                         {% endif %}
  107.                                     {% endif %}
  108.                                 </div>
  109.                             </div>
  110.                             <div class="hidden md:block text-xs mt-5 text-right">Werbefinanziert</div>
  111.                         {% endif %}
  112.                         <h1 class="fade-in mt-10">
  113.                             {{ dataObject.title }}
  114.                         </h1>
  115.                         <h3 class="fade-in delay-100 mb-10">
  116.                             {{ dataObject.subTitle }}
  117.                         </h3>
  118.                         <div class="mt-10 mb-10 text-xs flex gap-5">
  119.                             <div class="text-gray-500">
  120.                                 {% set wordCount = dataObject.content | split(' ') | length %}
  121.                                 {% set duration = wordCount / 150 %}
  122.                                 <i class="icon-uhr-filled text-orange"></i> Lesedauer {% if duration < 1 %}< 1 Minute{% else %}{{ duration | round(0) }} Minute{% if duration | round(0) != 1 %}n{% endif %}{% endif %}
  123.                                 {% if dataObject.source | trim != '' %}
  124.                                     <br/>
  125.                                     <i class="icon-pen text-orange"></i> Quelle: {{ dataObject.source }}
  126.                                 {% endif %}
  127.                             </div>
  128.                             <div class="flex-1 text-right text-gray-500">
  129.                                 <i class="icon-uhr text-orange"></i> {{ dataObject.articleDate | date('d.m.Y', "Europe/Berlin") }}
  130.                             </div>
  131.                         </div>
  132.                         <div class="mt-10 mb-5 textcontent">
  133.                             {% if dataObject.content %}
  134.                                 {{ dataObject.content | pimcoreObject | raw }}
  135.                             {% endif %}
  136.                         </div>
  137.                         {% if dataObject.imageGallery and dataObject.imageGallery.items|length > 0 %}
  138.                             <div class="mt-5 mb-10">
  139.                                 <div class="swiper grid-columns-slider custom-swiper">
  140.                                     <div class="swiper-wrapper">
  141.                                         {% for col in dataObject.imageGallery.items %}
  142.                                             <div class="swiper-slide">
  143.                                                 <div class="grid-columns__slide relative">
  144.                                                     {% set thumbnail = col.image.thumbnail('website') %}
  145.                                                     {% if ogImage == '' %}
  146.                                                         {% set ogImage = 'https://radio-oberland.de' ~ thumbnail %}
  147.                                                     {% endif %}
  148.                                                     {% set alt = '' %}
  149.                                                     {% set copyright = '' %}
  150.                                                     {% set unsplash = '' %}
  151.                                                     {% if col.image.hasMetadata %}
  152.                                                         {% for meta in col.image.metadata %}
  153.                                                             {% if meta.name == 'copyright' %}
  154.                                                                 {% set copyright = meta.data %}
  155.                                                             {% endif %}
  156.                                                             {% if meta.name == 'unsplash' %}
  157.                                                                 {% set unsplash = meta.data %}
  158.                                                             {% endif %}
  159.                                                             {% if meta.name == 'title' %}
  160.                                                                 {% set alt = meta.data %}
  161.                                                             {% endif %}
  162.                                                         {% endfor %}
  163.                                                     {% endif %}
  164.                                                     {#                                                {{ dump(col.image) }}#}
  165.                                                     <img src="{{ thumbnail }}" alt="{{ alt }}" width="100%" />
  166.                                                     {% if copyright %}
  167.                                                         <div class="pt-3">
  168.                                                             {% if unsplash %}
  169.                                                                 <div class="text-xs">
  170.                                                                     Bild &copy;
  171.                                                                     <a href="https://unsplash.com/photos/{{ unsplash }}?utm_source=radio_oberland&utm_medium=referral" class="text-blue" target="_blank">{{ copyright }}}</a>
  172.                                                                 </div>
  173.                                                             {% else %}
  174.                                                                 {% if alt %}
  175.                                                                     <div class="font-sm mb-2 text-gray-500">{{ alt }}</div>
  176.                                                                 {% endif %}
  177.                                                                 <div class="text-xs">Bild &copy; {{ copyright }}</div>
  178.                                                             {% endif %}
  179.                                                         </div>
  180.                                                     {% endif %}
  181.                                                 </div>
  182.                                             </div>
  183.                                         {% endfor %}
  184.                                     </div>
  185.                                 </div>
  186.                             </div>
  187.                         {% endif %}
  188.                         {% if ogImage %}
  189.                             {% do pimcore_head_meta().setProperty('og:image', ogImage) %}
  190.                         {% endif %}
  191.                     </div>
  192.                     <div class="col-span-12 md:col-span-4 md:col-start-9 fade-in delay-300">
  193.                         <div class="{% if hasImage %}md:-translate-y-20{% else %}mt-10 mb-10{% endif %} text-sm p-5 md:p-0">
  194.                             <div class="shadow-card bg-white">
  195.                                 <div class="p-5">
  196.                                     {% if categories | length %}
  197.                                         <div class="mb-5">
  198.                                             <div class="text-dark-blue font-bold uppercase mb-5">Themen</div>
  199.                                             {% for category in categories %}
  200.                                                 {% set parent = category.parent %}
  201.                                                 <div class="text-black text-xs uppercase text-no-wrap mr-5">
  202.                                                     {% if parent and parent.type == 'object' %}
  203.                                                         <a href="/themen/{{ category.parent.key }}" class="text-blue-light hover:text-black">{{ category.parent.title }}</a> &raquo;
  204.                                                     {% endif %}
  205.                                                     <a href="/themen/{{ category.key }}" class="text-blue-light hover:text-black font-bold">{{ category.title }}</a>
  206.                                                 </div>
  207.                                             {% endfor %}
  208.                                         </div>
  209.                                     {% endif %}
  210.                                     <div>
  211.                                         <span class="text-dark-blue font-bold uppercase">Teilen</span>
  212.                                         <a href="javascript:window.copy2clipboard(document.location.href)" class="link inline-block ml-2" title="Link kopieren"><i class="icon-link"></i></a>
  213.                                         <a href="mailto:?subject=Interessante Meldung auf Radio Oberland&amp;body=schau mal hier https://www.radio-oberland.de{{ document.path }}{{ document.key }}/{{ dataObject.key }}" class="link inline-block ml-2" title="Per Mail teilen"><i class="icon-mail"></i></a>
  214.                                     </div>
  215.                                     {% if dataObject.sponsor %}
  216.                                         {% set linkWeb = dataObject.sponsor.linkWeb and dataObject.sponsor.linkWeb.href ? dataObject.sponsor.linkWeb.href : '' %}
  217.                                         <div class="mt-5">
  218.                                             <span class="text-dark-blue font-bold uppercase">Dieser Artikel wird präsentiert von</span>
  219.                                             <div class="mt-5">
  220.                                                 {% if dataObject.sponsor.logo and dataObject.sponsor.logo is not null %}
  221.                                                     <div>
  222.                                                         {% if linkWeb %}
  223.                                                             <a href="{{ linkWeb }}" target="_blank">
  224.                                                         {% endif %}
  225.                                                         {{ dataObject.sponsor.logo.getThumbnail('standardThumbnail').html | replace({ '<img': '<img class="max-w-full inline-block"' }) | raw }}
  226.                                                         {% if linkWeb %}
  227.                                                             </a>
  228.                                                         {% endif %}
  229.                                                     </div>
  230.                                                 {% else %}
  231.                                                     {% if linkWeb %}
  232.                                                         <a href="{{ linkWeb }}" target="_blank">
  233.                                                     {% endif %}
  234.                                                     {{ dataObject.sponsor.title }}
  235.                                                     {% if linkWeb %}
  236.                                                         </a>
  237.                                                     {% endif %}
  238.                                                 {% endif %}
  239.                                             </div>
  240.                                         </div>
  241.                                     {% endif %}
  242.                                 </div>
  243.                             </div>
  244.                         </div>
  245.                     </div>
  246.                     {% if dataObject.snippets and dataObject.snippets | length > 0 %}
  247.                         <div class="col-span-12 px-5 md:px-0">
  248.                             <div class="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mb-5">
  249.                                 {% for entry in dataObject.snippets %}
  250.                                     <div>
  251. {#                                        {{ dump(entry) }}#}
  252.                                         {{ render(entry) }}
  253.                                     </div>
  254.                                 {% endfor %}
  255.                             </div>
  256.                         </div>
  257.                     {% endif %}
  258.                 </div>
  259.                 <div class="mb-10 p-5 md:p-0">
  260.     {#                <a href="/radio/news" class="font-bold uppercase text-sm"><i class="icon-arrow-left"></i> Zur Übersicht</a>#}
  261.                 </div>
  262.     {#            <div class="mt-20 mb-20">#}
  263.     {#                <div class="h2 font-mont-heavy mt-0 mb-5 fade-in uppercase p-5 xl:p-0">Weitere Artikel</div>#}
  264.     {#                <div class="vue-app">#}
  265.     {#                    {% set topics = dataObject.topic|join(',')|url_encode %}#}
  266.     {#                    {% set category = dataObject.category|url_encode %}#}
  267.     {#                    {% set query = 'notId=' ~ dataObject.id ~ '&limit=8&topic=' ~ topics ~ '&category=' ~ dataObject.category %}#}
  268.     {#                    <articles-related query="{{ query }}"></articles-related>#}
  269.     {#                </div>#}
  270.     {#            </div>#}
  271.                 {#            {{ dump(document) }}#}
  272.                 {#            {{ dump(dataObject) }}#}
  273.             </div>
  274.             <script type="application/ld+json">
  275.                 {
  276.                     "@context": "https://schema.org",
  277.                     "@type": "Article",
  278.                     "mainEntityOfPage": {
  279.                         "@type": "WebPage",
  280.                         "@id": "https://radio-oberland.de{{ document.path }}{{ document.key }}/{{ dataObject.key }}"
  281.                     },
  282.                     "headline": "{{ dataObject.title | replace({ '"': "'" }) }}",
  283.                     "image": [],
  284.                     "datePublished": "{{ dataObject.articleDate | date("c", "Europe/Berlin") }}",
  285.                     "dateModified": "{{ dataObject.modificationDate | date("c", "Europe/Berlin") }}",
  286.                     "author": {
  287.                         "@type": "Person",
  288.                         "name": "{{ dataObject.source }}"
  289.                     },
  290.                     "publisher": {
  291.                         "@type": "Organization",
  292.                         "name": "Radio Oberland",
  293.                         "logo": {
  294.                             "@type": "ImageObject",
  295.                             "url": "https://radio-oberland.de/favicon.png"
  296.                         }
  297.                     },
  298.                     "description": "{{ dataObject.excerpt }}"
  299.                 }
  300.             </script>
  302.             <div class="container mt-10">
  303.                 <h3 class="text-3xl lg:mb-10 px-5 lg:px-0 ">WEITERE ARTIKEL</h3>
  304.                 <div class="swiper customer-slider swiper-initialized swiper-horizontal swiper-pointer-events" data-breakpoints='{ "320": { "slidesPerView": "auto" }, "980": { "slidesPerView": 3 } }'>
  305.                     <div class="swiper-wrapper">
  306.                         {% for index, article in others %}
  307.                             {% set forcedBereich = article.bereiche[0] %}
  308.                             {% set fullHeight = true %}
  309.                             <div class="swiper-slide themen-slide h-full py-10">
  310.                                 {% include 'includes/themenPreview.html.twig' %}
  311.                             </div>
  312.                         {% endfor %}
  313.                     </div>
  314.                 </div>
  315.             </div>
  316.         </div>
  317.     {% else %}
  318.         <div class="pimcore_area_content">
  319.             <div class="py-10 mb-20 overflow-hidden relative">
  320.                 <div class="absolute left-0 top-0 bottom-0 right-0 pointer-events-none mix-blend-multiply"><img src="{{ asset('static/images/waves.webp') }}" alt="" class="w-full h-full object-cover"></div>
  321.                 {#            <div class="absolute left-0 top-0 bottom-0" style="background: rgba(0, 0, 0, 0.05); transform: skewX(5deg); transform-origin: bottom left; width: 60%;"></div>#}
  322.                 {#            <div class="absolute left-0 top-0 bottom-0" style="background: rgba(0, 0, 0, 0.05); transform: skewX(5deg); transform-origin: bottom left; width: 40%;"></div>#}
  323.                 {#            <div class="absolute left-0 top-0 bottom-0" style="background: rgba(0, 0, 0, 0.05); transform: skewX(5deg); transform-origin: bottom left; width: 35%;"></div>#}
  324.                 <div class="container relative">
  325.                     <div class="grid grid-cols-1 md:grid-cols-3">
  326.                         <div class="md:col-span-2">
  327.                             <div class="text-sm px-5 2xl:px-0">
  328.                                 <h1 class="mt-5 md:mt-10 mb-10 text-4xl md:text-6xl">Wissenswertes</h1>
  329.                             </div>
  330.                         </div>
  331.                     </div>
  332.                 </div>
  333.             </div>
  334.             <div class="container mt-20 mb-20">
  335.                 Leider konnten wir den gewünschten Artikel nicht finden. <a href="/themen" class="text-blue-light">Hier geht es zurück zur Übersicht</a>.
  336.             </div>
  337.         </div>
  338.     {% endif %}
  339. {% endblock %}