templates/areas/content-wysiwyg-media/view.html.twig line 1

Open in your IDE?
  1. <section class="wysiwyg-with-medium container content-block {{ not pimcore_input('anchorTitle').isEmpty() ? 'js-anchor-nav__item' }}"
  2.     {% if not pimcore_input('anchorTitle').isEmpty() %} data-anchor-nav-title="{{ pimcore_input('anchorTitle').getData() }}" {% endif %}
  3. >
  4.     {% if editmode %}
  5.         <div class="ms-auto">
  6.             {% embed 'includes/editmode-settings.html.twig' %}
  7.                 {% block additionalSettings %}
  8.                     {{ 'Text Position: ' }}
  9.                     {{ pimcore_select('mediaPosition', {
  10.                         "label": "Text position",
  11.                         "store": [
  12.                             ["left", "Left"],
  13.                             ["right", "Right"]
  14.                         ],
  15.                         "defaultValue": "left"
  16.                     }) }}
  17.                     {{ 'Media Type: ' }}
  18.                     {{ pimcore_select('mediaType', {
  19.                         "store": [
  20.                             ["image", "Image"],
  21.                             ["video", "Video"]
  22.                         ],
  23.                         "defaultValue": "image",
  24.                         "reload": true,
  25.                     }) }}
  26.                     <div>
  27.                         {{ 'Button: ' }}
  28.                         {{ pimcore_link('link') }}
  29.                     </div>
  30.                 {% endblock %}
  31.             {% endembed %}
  32.         </div>
  33.     {% endif %}
  35.     {% set isWysiwygLeft = pimcore_select("mediaPosition").getData() == 'left' ? true : false %}
  36.     {% set mediaType = pimcore_select("mediaType").getData() %}
  38.     {{ include('includes/title-blocks/title-block.html.twig', {
  39.         hideIntro: true,
  40.     }) }}
  42.     <div class="row gy-3">
  43.         {% if isWysiwygLeft %}
  44.             {{ _self.wysiwyg(isWysiwygLeft) }}
  45.         {% endif %}
  47.         {{ _self.media(mediaType, isWysiwygLeft) }}
  49.         {% if not isWysiwygLeft %}
  50.             {{ _self.wysiwyg(isWysiwygLeft) }}
  51.         {% endif %}
  52.     </div>
  54. </section>
  56. {% macro wysiwyg(isWysiwygLeft) %}
  57.     <div class="col-md-4 offset-md-1 {{ isWysiwygLeft ? 'order-1 order-md-0' : '' }}">
  58.         <div class="content-teaser__content">
  59.             {% if editmode or not pimcore_input('headline').isEmpty() %}
  60.                 <h3 class="h4 mb-4">{{ pimcore_input('headline') }}</h3>
  61.             {% endif %}
  62.             {% if editmode or not pimcore_wysiwyg('content').isEmpty() %}
  63.                 <div class="wysiwyg mb-md-5 mb-1">{{ pimcore_wysiwyg('content')|raw }}</div>
  64.             {% endif %}
  65.             {% if not pimcore_link('link').isEmpty() %}
  66.                 <a href="{{ pimcore_link('link').href }}" class="btn btn-primary" target="{{ pimcore_link('link').target }}">
  67.                     {{ pimcore_link('link').text }}
  68.                 </a>
  69.             {% endif %}
  70.         </div>
  71.     </div>
  72. {% endmacro %}
  74. {% macro media(mediaType, isWysiwygLeft) %}
  75.     <div class="col-md-6 {{ isWysiwygLeft ? 'offset-md-1 order-0 order-md-1' : '' }}">
  76.         <div class="{{ isWysiwygLeft ? 'container__break-right-half-md' : 'container__break-left-half-md' }}">
  77.             {% if mediaType == 'image' %}
  78.                 <div class="wysiwyg-with-medium__media position-relative js-lightbox">
  79.                     {{ include('includes/lightbox-image.html.twig', {
  80.                         aspectRatio: '5x3',
  81.                         thumbnail: 'wysiwyg-with-media',
  82.                         imageClassName: 'wysiwyg-with-media__img',
  83.                         button: true
  84.                     }) }}
  85.                 </div>
  86.             {% elseif mediaType == 'video' %}
  87.                 <div class="wysiwyg-with-medium__media">
  88.                     {{ include('includes/media/video.html.twig', {
  89.                         aspectRatio: '5x3',
  90.                         isLightbox: true,
  91.                         imageThumbnail: 'wysiwyg-with-media',
  92.                         attributes: {
  93.                             'playsinline': false,
  94.                         },
  95.                         removeAttribute: ['controls']
  96.                     }) }}
  97.                 </div>
  98.             {% endif %}
  99.         </div>
  100.     </div>
  101. {% endmacro %}