templates/Snippets/info-overlay.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  2.     {{ include('Layout/includes/css.html.twig') }}
  3.     {{ include('Layout/includes/encore.html.twig', {
  4.         'staticDebugMode': staticDebugMode,
  5.         'file': 'js/content'
  6.     }) }}
  7.     {% embed 'Includes/editmode-settings.html.twig' %}
  8.         {% block additionalInfo %}
  9.             <div>
  10.                 <div style="border-style: solid;">
  11.                     <div class="m-2">
  12.                         Icon:
  13.                         {{ pimcore_select('info-overlay-icon', {
  14.                             store: selectableIcons(),
  15.                             defaultValue: "corona"
  16.                         }) }}
  17.                     </div>
  18.                     <div class="m-2">
  19.                         <strong>White Icon Badge:</strong>
  20.                         {{ pimcore_checkbox('info-overlay-white') }}
  21.                     </div>
  22.                     <div class="m-2">
  23.                         <strong>Title:</strong>
  24.                         {{ pimcore_input('info-overlay-title') }}
  25.                     </div>
  26.                     <div class="m-2">
  27.                         <strong>Text:</strong>
  28.                         {{ pimcore_wysiwyg('info-overlay-text') }}
  29.                     </div>
  30.                     <div class="m-2 w-25">
  31.                         <strong>Button:</strong>
  32.                         {{ pimcore_link('info-overlay-link', {
  33.                             class: 'btn btn-outline-white w-100 vertical-gutter__item'
  34.                         }) }}
  35.                     </div>
  36.                     <div class="m-2 w-50">
  37.                         {{ pimcore_image('info-overlay-image', {
  38.                             thumbnail: 'info-overlay-image',
  39.                             class: 'js-lazy-img embed-responsive-item',
  40.                             lowQualityPlaceholder: true,
  41.                         })|raw }}
  42.                     </div>
  43.                 </div>
  45.                 <br>
  48.                 <div class="mt-2" style="border-style: solid">
  49.                     <div class="m-2">
  50.                         <strong>Show map:</strong> {{ pimcore_checkbox('info-overlay-show-map') }}
  51.                     </div>
  52.                     <div class="m-2 w-25">
  53.                         <strong>Map link:</strong> {{ pimcore_link('info-overlay-show-link', {class: 'Info Link'}) }}
  54.                     </div>
  55.                 </div>
  57.             </div>
  58.         {% endblock %}
  59.     {% endembed %}
  60. {% else %}
  61.     <section class="info-overlay{{ pimcore_checkbox('info-overlay-show-map').checked ? '' : ' js-info-overlay'  }}">
  62.         {% if pimcore_checkbox('info-overlay-show-map').checked %}
  63.             <a href="{{ pimcore_link('info-overlay-show-link').href }}" class="info-overlay__toggle {{ pimcore_checkbox('info-overlay-white').checked ? 'info-overlay__toggle--white' : '' }}">
  64.                 <span class="icon icon-{{ pimcore_select('info-overlay-icon').data }} info-overlay__icon" aria-label="Corona Info"></span>
  65.             </a>
  67.             <section class="info-overlay__map">
  68.                 <div class="embed-responsive embed-responsive-10by7">
  69.                     <img src="/static/img/maps/info-overlay-map.svg" alt="Steiermark" aria-hidden="true" class="embed-responsive-item">
  70.                     <div class="embed-responsive-item">
  71.                         <div class="info-overlay__map-text wyswiyg">
  72.                             <a href="{{ pimcore_link('info-overlay-show-link').href }}" aria-label="Info Link">{{ pimcore_link('info-overlay-show-link').text }}</a>
  73.                         </div>
  74.                     </div>
  75.                 </div>
  76.             </section>
  77.         {% else %}
  78.             <button class="info-overlay__toggle js-info-overlay__toggle {{ pimcore_checkbox('info-overlay-white').checked ? 'info-overlay__toggle--white' : '' }}">
  79.                 <span class="icon icon-{{ pimcore_select('info-overlay-icon').data }} info-overlay__icon" aria-label="Corona Info"></span>
  80.             </button>
  82.             <section class="info-overlay__content js-info-overlay__content">
  83.                 <div class="vertical-gutter--4">
  84.                     <h3 class="font-decorative vertical-gutter__item">{{ pimcore_input('info-overlay-title') }}</h3>
  85.                     <div class="embed-responsive embed-responsive-16by9 vertical-gutter__item">
  86.                         {{ pimcore_image('info-overlay-image', {
  87.                             thumbnail: "info-overlay-image",
  88.                             imgAttributes: {
  89.                                 class: 'js-lazy-img embed-responsive-item'
  90.                             },
  91.                             lowQualityPlaceholder: true,
  92.                         }) }}
  93.                     </div>
  94.                     <div class="wysiwyg vertical-gutter__item">
  95.                         {{ pimcore_wysiwyg('info-overlay-text') }}
  96.                     </div>
  97.                     {% if not pimcore_link('info-overlay-link').empty %}
  98.                         {{ pimcore_link('info-overlay-link', {
  99.                             class: 'btn btn-outline-white w-100 vertical-gutter__item'
  100.                         }) }}
  101.                     {% endif %}
  102.                 </div>
  103.             </section>
  104.         {% endif %}
  105.     </section>
  106. {% endif %}