src/Notaris/FrontendBundle/Resources/views/news/detail.html.twig line 1

Open in your IDE?
  1. {% extends '@NotarisFrontend/layout2017.html.twig' %}
  4. {% block title %}
  5.     {% if notaryId is defined %}
  6.         <title>{{ info.header1  | replace({"<BR />":" "}) }} - {{ subsite.pageTitle }}</title>
  7.     {% else %}
  8.         <title>{{ newsitem.title }} | {{ 'alg_basetitle_nondash' | trans }} - {{ 'mn_nieuws' | trans }}</title>
  9.     {% endif %}
  10. {% endblock %}
  12. {% set canonicalLink = url_scheme ~ '://www.' ~ _context['url_' ~ locale] ~ path('notaris_frontend_news_detail', {slug: newsitem.slug}) %}
  13. {% block extralinks %}
  14.     <link rel="canonical" href="{{ canonicalLink }}"  />
  15. {% endblock %}
  17. {% set linked_url_nl = url_nl ~ path('notaris_frontend_news.nl') %}
  18. {% set linked_url_fr = url_fr ~ path('notaris_frontend_news.fr') %}
  20. {% block extrameta %}
  21.     <meta name="keywords" content="{{ subsite.meta.metaKeywords }}"/>
  22.     <meta name="description" lang="{{ locale }}" content="{{ subsite.meta.metaDescription }}"/>
  24.     <meta property="og:title" content="{{ newsitem.meta.ogTitle }}"/>
  25.     <meta property="og:type" content="article"/>
  26.     <meta property="og:url" content="{{ canonicalLink }}"/>
  28.     <meta property="og:description" content="{{ newsitem.meta.ogDescription }}"/>
  30.     {% if shareImage %}
  31.         <meta property="og:image" content="{{ shareImage }}" />
  32.         <meta property="og:image:width" content="1200" />
  33.         <meta property="og:image:height" content="630" />
  34.     {% else %}
  35.         {{ parent() }}
  36.     {% endif %}
  37. {% endblock %}
  39. {% block body %}
  41.     <section class="content u-padding-top-large">
  42.         {{ include('@NotarisFrontend/module/sidenav.html.twig', {'subsite': subsite }) }}
  43.         {#{ include('@NotarisFrontend/News/_news_sidenav.html.twig', {'subsite': subsite }) }#}
  45.         <div id="content-center" class="content-center-large {{ subsite.stylesheet }}">
  46.             <div id="content-center-header">
  47.                 <div class="prevnext-pages border-bottom prevnext-pages-color">
  48.                     {% if subsiteslug != '' %}
  49.                         <a href="{{ path('notaris_frontend_subsite_news', {'subsiteslug':subsiteslug}) }}"
  50.                            title="{{ 'nw_volledigenieuwslijst' | trans }}">{{ 'nw_volledigenieuwslijst' | trans }}</a>
  51.                     {% else %}
  52.                         <a href="{{ path('notaris_frontend_news') }}"
  53.                            title="{{ 'nw_volledigenieuwslijst' | trans }}">{{ 'nw_volledigenieuwslijst' | trans }}</a>
  54.                     {% endif %}
  55.                 </div>
  56.             </div>
  58.             <section id="info">
  59.                 <div id="info-content" class="niveau1 u-wysiwyg">
  60.                     {# <h3 class="u-h2 u-margin-bottom-tiny u-text-lineheight-normal u-margin-top-small u-wysiwyg__title">  @TODO IONEL: SEO h1
  61.                         {% if newsitem.isPers %}
  62.                             <div class="c-tooltip c-tooltip--top c-tooltip--5-up u-text-inline">
  63.                                 <span
  64.                                     class="{% if lastPart == subsite.slug %}u-bg-{{ subsite.stylesheet }} {% else %}u-bg-primary {% endif %}u-color-white o-tabpannel__label">{{ 'nw_pm' | trans }}</span>
  65.                                 <p class="c-tooltip__news">{{ 'nw_pm_meaning' | trans }}</p>
  66.                             </div>
  67.                         {% endif %}
  68.                         {{ newsitem.title }}
  69.                     </h3> #}
  70.                     {% if newsitem.isPers %}
  71.                             <div class="c-tooltip c-tooltip--top c-tooltip--5-up u-text-inline s-ctsm-settpm u-display--inline">
  72.                                 <span
  73.                                     class="{% if lastPart == subsite.slug %}u-bg-{{ subsite.stylesheet }} {% else %}u-bg-primary {% endif %}u-color-white o-tabpannel__label">{{ 'nw_pm' | trans }}</span>
  74.                                 <p class="c-tooltip__news">{{ 'nw_pm_meaning' | trans }}</p>
  75.                             </div>
  76.                     {% endif %}
  77.                     <h1 class="u-h2 u-text-lineheight-normal u-display--inline">{{ newsitem.title }}</h1>
  78.                     <p class="o-tabpannel__content__title__date u-padding-top-tiny u-margin-top-none">{{ newsitem.publicationDate | localdate }}</p>
  79.                     {% if newsitem.introduction != '' %}
  80.                         <p>{{ newsitem.introduction }}</p>
  81.                     {% endif %}
  82.                     {% if newsitem.subtitle != '' %}
  83.                         <h2>{{ newsitem.subtitle }}</h2>
  84.                     {% endif %}
  86.                     {#1 afbeelding met tekst#}
  87.                     {% if newsitem.asset is not null %}
  88.                         {% if newsitem.asset.assetImages is not null %}
  89.                             {% if newsitem.asset.assetImages | length == 1 and newsitem.text != '' %}
  90.                                 {% set image = newsitem.asset.assetImages[0] %}
  91.                                 {% set image_path = 'uploads/'~ image.image.locale ~ image.image.filename %}
  92.                                 <a href="/{{ image_path }}"
  93.                                    {% if image.image.caption is not null %}title="{{ image.image.caption }}"
  94.                                    {% endif %}rel="js-fancybox-{{ newsitem.id }}"
  95.                                    class="o-tabpannel__content__imagelink js-fancybox">
  96.                                     {{ image_path | responsive_image_source([301,238], {'filterset': 'responsive_article_image', 'sizes': '(min-width: 960px) 301px, (min-width: 768px and max-width: 960px) 238px', 'alt': image.image.alt}) }}
  97.                                 </a>
  98.                             {% endif %}
  99.                         {% endif %}
  100.                     {% endif %}
  101.                     {% if newsitem.firstParagraphAsset is not null %}
  102.                         {% if newsitem.firstParagraphAsset.assetImages is not null %}
  103.                             {% if newsitem.firstParagraphAsset.assetImages | length == 1 %}
  104.                                 {% set image = newsitem.firstParagraphAsset.assetImages[0] %}
  105.                                 {% set image_path = 'uploads/'~ image.image.locale ~ image.image.filename %}
  106.                                 <a href="/{{ image_path }}"
  107.                                    {% if image.image.caption is not null %}title="{{ image.image.caption }}"
  108.                                    {% endif %}rel="js-fancybox-{{ newsitem.id }}"
  109.                                    class="o-tabpannel__content__imagelink js-fancybox">
  110.                                     {{ image_path | responsive_image_source([301,238], {'filterset': 'responsive_article_image', 'sizes': '(min-width: 960px) 301px, (min-width: 768px and max-width: 960px) 238px', 'alt': image.image.alt}) }}
  111.                                 </a>
  112.                             {% endif %}
  113.                         {% endif %}
  114.                     {% endif %}
  116.                     {{ newsitem.text | raw }}
  118.                     <div style="clear: both"></div>
  120.                     {% for paragraph in newsitem.paragraphs|sort((a, b) => a.number <=> b.number) %}
  121.                         {% if paragraph.subtitle != '' %}
  122.                             <h2>{{ paragraph.subtitle }}</h2>
  123.                         {% endif %}
  124.                         {% if paragraph.asset is not null %}
  125.                             {% if paragraph.asset.assetImages is not null %}
  126.                                 {% if paragraph.asset.assetImages | length == 1 %}
  127.                                     {% set image = paragraph.asset.assetImages[0] %}
  128.                                     {% set image_path = 'uploads/'~ image.image.locale ~ image.image.filename %}
  129.                                     <a href="/{{ image_path }}"
  130.                                        {% if image.image.caption is not null %}title="{{ image.image.caption }}"
  131.                                        {% endif %}rel="js-fancybox-{{ paragraph.id }}"
  132.                                        class="o-tabpannel__content__imagelink js-fancybox{% if paragraph.text == '' or paragraph.text == null %} img-full-width{% endif %}">
  133.                                         {% if paragraph.text == '' or paragraph.text == null %}
  134.                                             <img src="/{{ image_path }}" alt="{{ image.image.alt }}">
  135.                                         {% else %}
  136.                                             {{ image_path | responsive_image_source([301,238], {'filterset': 'responsive_article_image', 'sizes': '(min-width: 960px) 301px, (min-width: 768px and max-width: 960px) 238px', 'alt': image.image.alt}) }}
  137.                                         {% endif %}
  138.                                     </a>
  139.                                 {% endif %}
  140.                             {% endif %}
  141.                         {% endif %}
  142.                         {{ paragraph.text | raw }}
  143.                         <div style="clear: both"></div>
  144.                     {% endfor %}
  146.                     {#reeks afbeeldingen#}
  147.                     {% if newsitem.asset is not null %}
  148.                         {% if newsitem.asset.assetImages is not null %}
  149.                             {% if not(newsitem.asset.assetImages | length == 1 and newsitem.text != '') %}
  150.                                 {% for image in newsitem.asset.assetImages %}
  151.                                     {% set image_path = 'uploads/'~ image.image.locale  ~ image.image.filename %}
  152.                                     <a href="/{{ image_path }}"
  153.                                        {% if image.image.caption is not null %}title="{{ image.image.caption }}"
  154.                                        {% endif %}rel="js-fancybox-{{ newsitem.id }}"
  155.                                        class="js-fancybox u-display--inlineblock u-margin-bottom-small">
  156.                                         {{ image_path | responsive_image_source([710,477], {'filterset': 'responsive_article_image', 'sizes': '(min-width: 960px) 710px, (min-width: 768px and max-width: 960px) 477px', 'alt': image.image.alt}) }}
  157.                                         {% if image.image.caption is not null %}
  158.                                             <p class="u-margin-top-tiny">{{ image.image.caption }}</p>
  159.                                         {% endif %}
  160.                                     </a>
  161.                                 {% endfor %}
  162.                             {% endif %}
  163.                         {% endif %}
  165.                         {% if newsitem.asset.assetVideoPaths | length > 0 %}
  166.                             <div>
  167.                                 {% for video in newsitem.asset.assetVideoPaths %}
  168.                                     {% if video.videoPath.youtube is not null and video.videoPath.youtube != '' %}
  169.                                         <iframe
  170.                                             class="o-tabpannel__content__youtube js-tabpannel-youtube u-margin-bottom-small"
  171.                                             frameborder="0" allowfullscreen="1" title="YouTube video player" width="490"
  172.                                             height="280"
  173.                                             src="//www.youtube-nocookie.com/embed/{{ video.videoPath.youtube }}?enablejsapi=1&widgetid=1"
  174.                                             kwframeid="2"></iframe>
  175.                                     {% endif %}
  176.                                     {% if video.videoPath.path is not null and video.videoPath.path != '' %}
  177.                                         <video
  178.                                             class="o-tabpannel__content__video js-tabpannel-video u-margin-bottom-small"
  179.                                             controls>
  180.                                             <source src="/video/{{ locale }}/{{ video.videoPath.path }}">
  181.                                         </video>
  182.                                     {% endif %}
  183.                                 {% endfor %}
  184.                             </div>
  185.                         {% endif %}
  186.                     {% endif %}
  188.                     {% if newsitem.asset and (newsitem.asset.assetLinks | length > 0 or newsitem.asset.assetAttachments | length > 0) %}
  189.                         <ul class="u-margin-top-small">
  190.                             {% for link in newsitem.asset.assetLinks %}
  191.                                 <li><a href="{{ link.link.url }}" title="{{ link.link.title }}"
  192.                                        {% if link.link.newWindow %}target="_blank"{% endif %}>{{ link.link.title }}</a>
  193.                                 </li>
  194.                             {% endfor %}
  195.                             {% for attachment in newsitem.asset.assetAttachments %}
  196.                                 {% set fileType = attachment.attachment.filename | split('.') %}
  197.                                 {% set fileType = fileType | last | upper %}
  198.                                 {% set title = attachment.attachment.title %}
  199.                                 {% if title == '' %}
  200.                                     {% set title = attachment.attachment.originalFilename %}
  201.                                 {% endif %}
  202.                                 {% set foo = attachment.attachment.filename|split('/', 2) %}
  203.                                 {% if foo | length >= 1 %}{% set filename = foo[1] %}{% endif %}
  204.                                 {%  if filename is defined %}
  205.                                 <li>
  206.                                     <a href="/download/{{ filename | url_encode }}"
  207.                                        title="{{ title }}">{{ title }}
  208.                                         ({{ fileType }} {{ attachment.attachment.byte | bfos_format_bytes | replace({'.':','}) }}
  209.                                         )</a></li>
  210.                                 {% endif %}
  211.                             {% endfor %}
  212.                         </ul>
  213.                     {% endif %}
  215.                     {% if newsitem.tags | length > 0 %}
  216.                         <div class="c-tags u-margin-bottom-small js-tags">
  217.                             {% for tag in newsitem.tags %}
  218.                                 <a data-slug="{{ tag.slug }}"
  219.                                    data-tag-clicked="{{ path('notaris_frontend_tag_clicked') }}"
  220.                                    href="{{ path('notaris_frontend_tag', {'tagSlug': tag.slug}) }}"
  221.                                    title="{{ tag.name }}" class="c-tags__item"><small>{{ tag.name }}</small></a>
  222.                             {% endfor %}
  223.                         </div>
  224.                     {% endif %}
  226.                     {% if newsitem.source != '' %}
  227.                         <p class="u-margin-top-tiny">{{ 'nw_bron' | trans }}: {{ newsitem.source }}</p>
  228.                     {% endif %}
  229.                     {% if newsitem.author != '' %}
  230.                         <p class="u-margin-top-tiny">Auteur: {{ newsitem.author }}</p>
  231.                     {% endif %}
  233.                     <article class="socialmedia border-bottom">
  235.                         <!-- linkedin -->
  236.                         <a href="http://www.linkedin.com/shareArticle?url={{ app.request.uri }}&title={{ newsitem.meta.ogTitle }}&summary={{ newsitem.meta.ogDescription }}"
  237.                            target="_blank" class="share-btn linkedin">
  238.                             <img style="width:60px!important;height:20px;" src="/images/linkedin.png"/>
  239.                         </a>
  241.                         <div class="spacer">&nbsp;</div>
  243.                         {#<!-- facebook share -->#}
  244.                         {#<a name="fb_share" type="button"></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>#}
  246.                         {#<div class="spacer">&nbsp;</div>#}
  248.                         {#<!-- google plus -->#}
  249.                         {#<div class="g-plusone" data-size="small"></div>#}
  250.                         {#<script type="text/javascript">#}
  251.                         {#window.___gcfg = {lang: 'nl'};#}
  253.                         {#(function() {#}
  254.                         {#var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;#}
  255.                         {#po.src = 'https://apis.google.com/js/platform.js';#}
  256.                         {#var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);#}
  257.                         {#})();#}
  258.                         {#</script>#}
  260.                         <div class="fb-share-button"
  261.                              data-href="{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}"
  262.                              data-layout="button"></div>
  265.                         <div class="spacer">&nbsp;</div>
  267.                         <!-- twitter share -->
  268.                         <a class="twitter-share-button" target="_blank"
  269.                            href="https://twitter.com/intent/tweet?url={{ app.request.uri }}">
  270.                             <div class="u-display--inlineblock">
  271.                                 <div class="o-media__img u-margin-right-tiny">
  272.                                     <img src="{{ asset('/assets/images/icons/social/x-share-button-icon-not.svg') }}" alt="X Share" title="X Share" height="25" width="64" class="c-social--color"/>
  273.                                 </div>
  274.                             </div>
  275.                         </a>
  277.                         <div class="spacer">&nbsp;</div>
  278.                         <!-- google plus -->
  281.                         <!-- Plaats deze tag waar je de +1 knop wilt weergeven. -->
  282.                         <div class="g-plusone" data-annotation="inline" data-width="120"></div>
  284.                         <div class="cleaner">&nbsp;</div>
  287.                     </article>
  290.                     <article class="no-border">
  291.                         <div class="prevnext-pages">
  292.                             {% if subsiteslug != '' %}
  293.                                 <a href="{{ path('notaris_frontend_subsite_news', {'subsiteslug':subsiteslug}) }}"
  294.                                    title="{{ 'nw_terugnaarlijst' | trans }}">{{ 'nw_terugnaarlijst' | trans }}</a>
  295.                             {% else %}
  296.                                 <a href="{{ path('notaris_frontend_news') }}"
  297.                                    title="{{ 'nw_terugnaarlijst' | trans }}">{{ 'nw_terugnaarlijst' | trans }}</a>
  298.                             {% endif %}
  299.                         </div>
  302.                         <!--<p><img src="/imgs/ic_pm.gif" alt="offici&euml;le Persmededeling" class="ic-pm" /> = Persmededeling</p>-->
  303.                     </article>
  305.                     <div class="cleaner">&nbsp;</div>
  306.                 </div>
  307.             </section>
  309.             {# dynamische cms modules #}
  310.             {#{{ include('@NotarisFrontend/Module/mod_cms.html.twig', {'rightmodules': rightmodules }) }}#}
  312.         </div>
  313.         <!-- #### CONTENT #### -->
  314.         {#
  315.         <aside id="content-right">
  316.            {% if notaryId is defined %}
  317.                {{ include('@NotarisFrontend/Sven/_sven_address.html.twig') }}
  318.            {% else %}
  319.                {{ include('@NotarisFrontend/Module/notsearch_module.html.twig') }}
  320.            {% endif %}
  322.            <p id="persmededeling"><span class="pm-label">{{ 'nw_pm' | trans }}</span> {{ 'nw_persmed' | trans }}</p>
  324.            <div class="cleaner">&nbsp;</div>
  327.         </aside>
  329.         #}
  330.         {% include '@NotarisFrontend/navigation/mobilesubnav.html.twig' with {'websiteSlug': 'slg_nieuws' | trans, 'isSven':false, 'isHome':false, 'subsite': subsite} %}
  333.     </section>
  336. {% endblock %}
  338. {% block extrajs %}
  339.     <script>
  340.         // $.cookie('cookie-settings-statistics') === 'true' && applyAnalyticsJs();
  341.         // $.cookie('cookie-settings-social') === 'true' && applySocialJs();
  342.     </script>
  343.     <script type="application/ld+json">
  344.         {
  345.             "@context": "https://schema.org",
  346.             "@type": "NewsArticle",
  347.             "headline": "{{- newsitem.title -}}",
  348.             {% if newsitem.asset is not null -%}
  349.                 {%- if newsitem.asset.assetImages is not null -%}
  350.                     {%- if newsitem.asset.assetImages | length == 1 and newsitem.text != '' -%}
  351.                         {%- set image = newsitem.asset.assetImages[0] -%}
  352.                         {%- set image_path = app.request.schemeAndHttpHost ~ '/uploads/'~ image.image.locale ~ image.image.filename -%}
  353.             "image": [
  354.                 "{{- image_path  -}}"
  355.             ],
  356.             {% endif -%}
  357.         {%- endif -%}
  358.     {%- endif -%}
  359.             "datePublished": "{{- newsitem.publicationDate | date('Y-m-d') -}}",
  360.             "dateModified": "{{ newsitem.publicationDate | date('Y-m-d') }}"
  361.             {% if newsitem.source != '' -%}
  362.             ,"author": {
  363.                 "@type": "Organization",
  364.                 "name": "{{- newsitem.source -}}"
  365.             }
  366.         {% endif -%}
  367.         }
  368.     </script>
  369. {% endblock %}
  371. {% block extracss %}
  372.     <style>
  373.         .img-full-width, .img-full-width img {
  374.             width: 100%;
  375.         }
  376.     </style>
  377. {% endblock %}