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

Open in your IDE?
  1. {% set aspectRatio = pimcore_select('aspectRatio').getData() %}
  2. {% set isNarrow = pimcore_checkbox('narrow').checked %}
  4. <section class="media-area content-block {{ isNarrow ? 'container-small' : 'container' }} {{ not pimcore_input('anchorTitle').isEmpty() ? 'js-anchor-nav__item' }}"
  5.     {% if not pimcore_input('anchorTitle').isEmpty() %} data-anchor-nav-title="{{ pimcore_input('anchorTitle').getData() }}" {% endif %}
  6. >
  7.     {% if editmode %}
  8.         <div class="ms-auto">
  9.             {% embed 'includes/editmode-settings.html.twig' %}
  10.                 {% block additionalSettings %}
  11.                     {{ pimcore_select('aspectRatio', {
  12.                         "store": [
  13.                             ["4x3", "4x3"],
  14.                             ["16x9", "16x9"],
  15.                         ],
  16.                         "defaultValue": "16x9",
  17.                     }) }} <br>
  18.                     {{ pimcore_select('mediaType', {
  19.                         "store": [
  20.                             ["image", "Image"],
  21.                             ["video", "Video"],
  22.                         ],
  23.                         "defaultValue": "image",
  24.                         "reload": true,
  25.                     }) }} <br>
  26.                     {{ pimcore_checkbox('narrow', {
  27.                         label: 'Small container'
  28.                     }) }}
  29.                 {% endblock %}
  30.             {% endembed %}
  31.         </div>
  32.     {% endif %}
  34.     {{ include('includes/title-blocks/title-block.html.twig', {
  35.         className: 'center-headline',
  36.         hideIntro: true
  37.     }) }}
  38.     {% if editmode or not pimcore_wysiwyg('content').isEmpty() %}
  39.         <div class="wysiwyg">
  40.             {{ pimcore_wysiwyg('content') }}
  41.         </div>
  42.     {% endif %}
  43.     <div class="media-area__embed">
  44.         {% if pimcore_select('mediaType').getData() == 'image' %}
  45.             <div class="js-lightbox">
  46.                 {{ include('includes/lightbox-image.html.twig', {
  47.                     aspectRatio: aspectRatio,
  48.                     thumbnail: 'media-area-' ~ (isNarrow ? 'narrow' : aspectRatio),
  49.                 }) }}
  50.             </div>
  51.         {% elseif pimcore_select('mediaType').getData() == 'video' %}
  52.             {{ include('includes/media/video.html.twig', {
  53.                 aspectRatio: aspectRatio,
  54.                 imageThumbnail: 'media-area',
  55.                 isLightbox: true,
  56.                 attributes: {
  57.                     'playsinline': true,
  58.                 },
  59.                 removeAttribute: ['controls']
  60.             }) }}
  61.         {% endif %}
  62.     </div>
  63. </section>