templates/Includes/wysiwyg-area.html.twig line 1

Open in your IDE?
  1. <section class="wysiwyg-area {{ styleModifier|default('') }} {{ anchorNavItem | default(null) ? 'js-anchor-nav__item' : '' }}"
  2.     {% if anchorNavItem | default(null) and anchorNavTitle | default(null) %}
  3.         data-anchor-nav-title="{{ anchorNavTitle }}"
  4.     {% endif %}>
  5.     <div class="container container-sm">
  6.         {{ include('Includes/title-block.html.twig', {
  7.             icon: icon|default(null),
  8.             title: title|default(''),
  9.             subtitle: subtitle|default(''),
  10.             isCentered: isTitleCentered|default(false),
  11.             content: ''
  12.         }) }}
  14.         <div class="wysiwyg-area__content wysiwyg">
  15.             {{ content|default('') | raw }}
  16.         </div>
  18.         {% if buttons|default([]) %}
  19.             <ul class="list-unstyled list-inline wysiwyg-area__buttons vertical-gutter--default">
  20.                 {% for button in buttons  %}
  21.                     <li class="list-inline-item vertical-gutter__item">
  22.                         <a href="{{ button.href }}" class="btn btn-{{ button.color }}">{{ button.text }}</a>
  23.                     </li>
  24.                 {% endfor %}
  25.             </ul>
  26.         {% endif %}
  28.         {% if hasPressButtons|default(null) %}
  29.             <div class="row mt-3 vertical-gutter--2">
  30.                 {% if wishlistid|default(null) %}
  31.                     <div class="col-md-4 vertical-gutter__item">
  32.                         <button type="button" class="wishlist-btn--big btn btn-primary-light px-3 btn-block js-wishlist-{{ wishlistName|default('press-articles') }}__btn {{ wishlistActive|default(false) ? 'is-active' }}" data-wishlist-id="{{ wishlistid }}" aria-label="{{ 'press.Auf die Merkliste'|trans }}" title="{{ 'press.Auf die Merkliste'|trans }}" data-event-tracking-category="Multimedia Archiv - Merkliste Detailseite" data-event-tracking-action="{{ downloadLink|default(null) ? 'Dossier' : 'Pressetext' }}{{ wishlistActive|default(false) ? (' ' ~ 'press.entfernen'|trans) : '' }}" data-event-tracking-action-toggle=" {{ 'press.entfernen'|trans }}" data-event-tracking-label="{{ wishlistTitle|default('') }} {{ wishlistid|default('') }}">
  33.                             <span class="icon icon-heart-outline btn-icon" aria-hidden="true"></span>
  34.                             <span class="wishlist-btn__text-default">{{ 'press.Zur Merkliste hinzufügen'|trans }}</span>
  35.                             <span class="wishlist-btn__text-active">{{ 'press.Von Merkliste entfernen'|trans }}</span>
  36.                         </button>
  37.                     </div>
  38.                 {% endif %}
  40.                 {% if downloadLink|default(null) %}
  41.                     <div class="col-md-4 vertical-gutter__item">
  42.                         <a href="{{ downloadLink }}" download class="btn btn-primary-light btn-block" data-event-tracking-category="Multimedia Archiv - Download" data-event-tracking-action="Dossier" data-event-tracking-label="{{ wishlistTitle|default('') }} {{ wishlistid|default('') }}">
  43.                             <span class="icon icon-download btn-icon" aria-hidden="true"></span>
  44.                             {{ 'press.Download'|trans }}
  45.                         </a>
  46.                     </div>
  47.                 {% endif %}
  48.             </div>
  49.         {% endif %}
  51.         {% if hasContactForm|default(false) %}
  52.             <button type="button" class="btn btn-primary mt-3" data-toggle="modal" data-target="#contactModal">
  53.                 {{ 'contact.Zur Anfrage'|trans }}
  54.             </button>
  55.         {% endif %}
  57.         {% if direktBooking|default('') %}
  58.             <a href="{{ direktBooking }}" class="btn btn-primary mt-3">
  59.                 {{ 'contact.Direkt Buchen'|trans }}
  60.             </a>
  61.         {% endif %}
  62.     </div>
  64.     {% if images|default([])|length == 1 %}
  65.         {% set thumb = 'wysiwyg-area' %}
  66.         {% set embed = 'embed-responsive-9by5' %}
  68.         <div class="container container-sm">
  69.             {% for img in images %}
  70.                 {{ _self.media(img.imgId, thumb, embed, img.imgDescription) }}
  71.             {% endfor %}
  72.         </div>
  74.     {% elseif images|default([])|length == 2 %}
  75.         {% set thumb = 'wysiwyg-area--two-images' %}
  76.         {% set embed = 'embed-responsive-4by3' %}
  78.         <div class="container container-md">
  79.             <div class="row">
  80.                 {% for img in images %}
  81.                     <div class="col-6">
  82.                         {{ _self.media(img.imgId, thumb, embed, img.imgDescription) }}
  83.                     </div>
  84.                 {% endfor %}
  85.             </div>
  86.         </div>
  88.     {% elseif images|default([])|length == 3 %}
  89.         {% set thumb = 'wysiwyg-area--three-images' %}
  90.         {% set embed = 'embed-responsive-1by1' %}
  92.         <div class="container container-md">
  93.             <div class="row">
  94.                 {% for img in images %}
  95.                     <div class="col-4">
  96.                         {{ _self.media(img, thumb, embed, img.imgDescription) }}
  97.                     </div>
  98.                 {% endfor %}
  99.             </div>
  100.         </div>
  101.     {% endif %}
  103.     {% if hasContactForm|default(false) %}
  104.         {{ include('Includes/Partials/contact-modal.html.twig', {
  105.             topicSelect: topicSelect|default([]),
  106.             regionSelect: regionSelect|default([]),
  107.             adultsSelect: adultsSelect|default([]),
  108.             childrenSelect: childrenSelect|default([]),
  109.             package: package
  110.         }) }}
  111.     {% endif %}
  112. </section>
  114. {% macro media(img, thumb, embed, description) %}
  115.     <figure class="wysiwyg-area__image">
  116.         <div class="embed-responsive wysiwyg-area__image {{ embed }}">
  117.             {{ img.getThumbnail(thumb).getHTML({
  118.                 imgAttributes: {
  119.                     class : 'js-lazy-img embed-responsive-item js-fade-in'
  120.                 },
  121.                 lowQualityPlaceholder: true,
  122.             })|raw }}
  123.             {% do jsConfig().add('lazyImg', true) %}
  124.         </div>
  126.         {% if description %}
  127.             <figcaption>
  128.                 {{ description }}
  129.             </figcaption>
  130.         {% endif %}
  131.     </figure>
  132. {% endmacro %}