templates/Snippets/magazin-social-teaser.html.twig line 1

Open in your IDE?
  1. {# render footer-template #}
  2. {% if editmode %}
  3.     {% do pimcore_placeholder('magazine').set('true') %}
  4.     {{ include('Layout/includes/css.html.twig') }}
  5. {% endif %}
  7. {% if editmode %}
  8.     <div class="editmode-box editmode-box--info">
  9.         <div class="editmode-box__header">Settings</div>
  10.         <div>
  11.             <label>
  12.                 Social Icon
  13.             </label>
  14.             <br>
  15.             {{ pimcore_select('socialMedia', {'store': getSocialIcons(), 'reload': true}) }}
  16.         </div>
  17.         <div>
  18.             <label>
  19.                 Image (optional)
  20.             </label>
  21.             {{ pimcore_relation('image', {'types': ['asset'], 'subtypes': ['image'], 'reload': true}) }}
  22.         </div>
  23.     </div> {# end editmode box #}
  24. {% endif %}
  26. {% if editmode %}
  27. <div class="vertical-gutter__item col-md-4 js-fade-in" style="height: 530px;">
  28.     {% endif %}
  30.     <section class="social-media-teaser {{ styleModifier | default(null) }} {{ not pimcore_link('button').isEmpty() ? 'stretch-link isCursor' : '' }}">
  31.         {% if not editmode %}
  32.             {% do jsConfig().add('goToLink', true) %}
  33.             {% do jsConfig().add('lazyImg', true) %}
  34.         {% endif %}
  36.         <div class="embed-responsive embed-responsive-cover social-media-teaser__embed">
  37.             {% if not pimcore_relation('image').empty %}
  38.                 {{ pimcore_relation('image').element.thumbnail('social-media-teaser').html({
  39.                     imgAttributes: {
  40.                         class: 'embed-responsive-item js-lazy-img social-media-teaser__img'
  41.                     },
  42.                     lowQualityPlaceholder: true,
  43.                 }) | raw }}
  44.             {% endif %}
  45.         </div>
  47.         <div class="social-media-teaser__body">
  48.             {# available Social-Media-Icons instagram, facebook, pinterest, youtube  #}
  49.             <span class="social-media-teaser__icon icon icon-{{ pimcore_select('socialMedia').getData() }}" aria-label="{{ pimcore_select('socialMedia').getData() }}" title="{{ pimcore_select('socialMedia').getData() }}"></span>
  51.             <h3 class="social-media-teaser__title">
  52.                 {{ pimcore_link('button', {'class': 'stretch-link__link'}) }}
  53.             </h3>
  54.         </div>
  55.     </section>
  57.     {% if editmode %}
  58. </div>
  59. {% endif %}