templates/Snippets/experience-teaser.html.twig line 1

Open in your IDE?
  1. {# render footer-template #}
  2. {% if editmode %}
  3.     {{ include('Layout/includes/css.html.twig') }}
  4. {% endif %}
  5. {% if app.request.get('counter', false) %}
  6.     <span class="experience-teaser__counter">
  7.     {{ app.request.get('counter') }}
  8. </span>
  9. {% endif %}
  11.     {% if editmode %}
  12.         <div class="editmode-box editmode-box--info mb-5 text-left w-50">
  13.             <div class="editmode-box__header">Settings</div>
  14.             <div>
  15.                 <label>
  16.                     Optional Video
  17.                 </label>
  18.                 {{ pimcore_video('video') }}<br>
  19.                 <label>Image: </label>
  20.                 {{ pimcore_image('image', {
  21.                     thumbnail: 'experience-teaser',
  22.                     imgAttributes: {
  23.                         class: 'js-lazy-img embed-responsive-item teaser-animation__img'
  24.                     },
  25.                     lowQualityPlaceholder: true,
  26.                     height: 300,
  27.                 }) }}<br>
  28.                 <label>Link: </label> {{ pimcore_link('link', {'class': ''}) }}<br>
  29.                 <label>Subtitle: </label> {{ pimcore_input('subtitle') }}<br>
  31.             </div>
  32.         </div>
  33.     {% else %}
  34.         <section class="experience-teaser teaser-animation stretch-link">
  35.             {% if not pimcore_image('image').empty %}
  36.                 {% set description = getImageDescription(pimcore_image('image').image) %}
  37.                 <div class="experience-teaser__embed embed-responsive">
  38.                     {{ pimcore_image('image').image.thumbnail('experience-teaser').html({
  39.                         imgAttributes: {
  40.                             class: 'js-lazy-img embed-responsive-item teaser-animation__img'
  41.                         },
  42.                         lowQualityPlaceholder: true
  43.                     })|raw }}
  45.                     {% do jsConfig().add('lazyImg', true) %}
  46.                 </div>
  47.             {% endif %}
  48.             <div class="{{ editmode ? '' : 'experience-teaser__content' }}">
  49.                 <div>
  50.                     <h3 class="experience-teaser__title h5">
  51.                         {{ pimcore_link('link', {'class': 'stretch-link__link', 'title': description|default('')}) }}
  52.                     </h3>
  53.                     {% if editmode or not pimcore_input('subtitle').empty %}
  54.                         <div class="experience-teaser__sub-title">
  55.                             {{ pimcore_input('subtitle') }}
  56.                         </div>
  57.                     {% endif %}
  59.                     {% if not pimcore_video('video').empty %}
  60.                         <div class="js-lightbox cursor-pointer" data-lightbox-video="true">
  61.                             <div class="lightbox-video js-lightbox__item lg-html5 stretch-link__interactive" data-html="#video-lightbox-{{ document.id }}" aria-label="{{ 'experience-teaser.Video ansehen'|trans }}">
  62.                                 <span class="icon icon-play-round mr-2" aria-hidden="true"></span> {{ 'experience-teaser.Video ansehen'|trans }}
  63.                             </div>
  64.                         </div>
  65.                     {% endif %}
  66.                 </div>
  67.             </div>
  68.         </section>
  69.     {% endif %}
  72. {% if not pimcore_video('video').empty and not editmode %}
  73.     <div id="video-lightbox-{{ document.id }}" style="display: none;">
  74.         {% if pimcore_video('video').type != 'asset' %}
  75.             <div class="embed-responsive embed-responsive-16by9">
  76.         {% endif %}
  77.         {{ pimcore_video('video', {
  78.             'attributes' : {
  79.                 'class' : 'video-js js-video-js embed-responsive-item'
  80.             }
  81.         }) }}
  82.         {% if pimcore_video('video').type != 'asset' %}
  83.             </div>
  84.         {% endif %}
  85.     </div>
  86. {% endif %}