templates/snippets/hero-slide.html.twig line 1

Open in your IDE?
  1. {% set theme = pimcore_checkbox('theme').checked ? 'dark' : 'light' %}
  2. {% set block = pimcore_block('hero-block') %}
  4. {% if editmode %}
  5.     {{ include('layout/includes/css.html.twig') }}
  7.     <div class="ms-auto">
  8.         {% embed 'includes/editmode-settings.html.twig' %}
  9.             {% block settings %}
  10.                 <div class="row">
  11.                     <div class="col">
  12.                         {{ pimcore_checkbox('textRight', {
  13.                             label: 'Text right',
  14.                             reload: true,
  15.                         }) }} <br>
  16.                         {{ pimcore_checkbox('theme', {
  17.                             label: 'Dark theme',
  18.                         }) }} <br>
  19.                         {{ pimcore_image('hero-image', {
  20.                             width: 200,
  21.                         }) }}
  22.                     </div>
  23.                     <div class="col">
  24.                         {% for i in block.iterator %}
  25.                             {{ pimcore_select('icon', {
  26.                                 'store': [
  27.                                     ['people', '<span class="icon icon-people"></span>'],
  28.                                     ['network', '<span class="icon icon-network"></span>'],
  29.                                     ['country', '<span class="icon icon-country"></span>'],
  30.                                     ['clock', '<span class="icon icon-clock"></span>'],
  31.                                 ]
  32.                             }) }}<br>
  33.                             <strong>{{ pimcore_input('hero-bold', {placeholder: 'Bold Text'}) }}</strong>
  34.                             {{ pimcore_input('hero-text', {placeholder: 'Text'}) }}
  35.                         {% endfor %}
  36.                     </div>
  37.                 </div>
  38.             {% endblock %}
  39.         {% endembed %}
  40.     </div>
  41. {% endif %}
  43. <div class="hero-portal__slide content-gradient">
  44.     <ul class="hero-portal__info-container list-unstyled list-inline">
  45.         {% if not editmode %}
  46.             {% for i in block.iterator %}
  47.                 <li class="hero-portal__info list-inline-item">
  48.                     {% if pimcore_select('icon').getData() %}
  49.                         <span class="icon icon-{{ pimcore_select('icon').getData() }}" aria-hidden="true"></span>
  50.                     {% endif %}
  51.                     <span><strong>{{ pimcore_input('hero-bold').getData() }}</strong> {{ pimcore_input('hero-text').getData() }}</span>
  52.                 </li>
  53.             {% endfor %}
  54.         {% endif %}
  55.     </ul>
  57.     <figure class="hero-portal__figure">
  58.         {% if not pimcore_image('hero-image').isEmpty() %}
  59.             {{ pimcore_image('hero-image').thumbnail('hero').getHtml({
  60.                 imgAttributes: {
  61.                     class: 'hero-portal__img',
  62.                     loading: 'eager'
  63.                 }
  64.             })|raw }}
  65.         {% endif %}
  67.         <div class="hero-portal__slide-content {{ pimcore_checkbox('textRight').checked ? 'is-right' }}">
  68.             <div class="hero-portal__text-container">
  69.                 <div class="hero-portal__text-block {{ pimcore_checkbox('theme').checked ? 'hero-portal__text-block--dark' : 'hero-portal__text-block--light' }}">
  70.                     {{ include('includes/title-blocks/title-block.html.twig', {
  71.                         className: 'title-block__title--hero',
  72.                         titleTag: 'h1',
  73.                         hideIntro: true,
  74.                         noSubtitleGradient: true,
  75.                     }) }}
  77.                     {{ pimcore_link('hero-link', {
  78.                         class: "img-teaser__btn btn btn-#{theme}",
  79.                     }) }}
  80.                 </div>
  81.             </div>
  82.         </div>
  83.     </figure>
  84. </div>