templates/areas/gallery-with-text/view.html.twig line 1

Open in your IDE?
  1. <div class="container product-container">
  2.     <div class="row justify-content-center" style="padding-top: 0!important;">
  3.         <div class="col-lg-12 transparent-bg boutique-gallery">
  4.             <div class="text-center">
  5.                 {% if editmode %}
  6.                     {{ pimcore_input("title", {
  7.                         "placeholder": 'Cím',
  8.                         "class": "boutique-edit-title"
  9.                     }) }}
  10.                     {{ pimcore_wysiwyg("content", {
  11.                         "height": 200,
  12.                         "placeholder": "Szöveg",
  13.                         "class": "boutique-edit-box"
  14.                     }) }}
  15.                 {% else %}
  16.                     {% set title = pimcore_input("title") %}
  17.                     {% set content = pimcore_wysiwyg("content") %}
  18.                     {% if title and title.getText() %}
  19.                         <h4>{{ title.render() | raw }}</h4>
  20.                     {% endif %}
  21.                     {% if content and not content.isEmpty() %}
  22.                         {{ content.render() | raw }}
  23.                     {% endif %}
  24.                 {% endif %}
  25.             </div>
  26.         </div>
  27.     </div>
  28.     {% set randomId = 'boutique' %}
  29.     <div class="container magazin-slider">
  30.         {% if editmode %}
  31.             <div style="background: #777; padding: 5px;">
  32.                 {% for i in pimcore_block('boutique-images-block').iterator %}
  33.                     <div style="background: #fff; padding: 10px;">
  34.                         <p>Kép:{{ pimcore_image('image') }}</p>
  35.                     </div>
  36.                 {% endfor %}
  37.             </div>
  38.         {% else %}
  39.             <div class="swiper {{ randomId }}">
  40.                 <div class="swiper-wrapper">
  41.                     {% for i in pimcore_block('boutique-images-block').iterator %}
  42.                         <div class="swiper-slide">
  43.                             {% if not pimcore_image('image').isEmpty() %}
  44.                                 <div class="image-content">
  45.                                     <a href="{{ pimcore_image('image').getSrc() }}" data-fancybox="boutique"
  46.                                        title="{{ pimcore_image('image').getAlt() }}">
  47.                                         {{ pimcore_image('image', {
  48.                                             'thumbnail': 'seiko_boutiqueGallery',
  49.                                             'disableWidthHeightAttributes': true
  50.                                         }) }}
  51.                                     </a>
  52.                                 </div>
  53.                             {% endif %}
  54.                         </div>
  55.                     {% endfor %}
  56.                 </div>
  57.                 <div class="swiper-pagination"></div>
  58.                 <div class="swiper-button-prev"></div>
  59.                 <div class="swiper-button-next"></div>
  60.             </div>
  61.         {% endif %}
  62.     </div>
  63. </div>
  64. {% do pimcore_head_link().prependStylesheet('https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css') %}
  65. {% do pimcore_head_script().appendFile('https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js') %}
  66. {% do pimcore_head_script().captureStart('APPEND') %}
  67. const windowwidth = window.innerWidth;
  69. let __slides = 4;
  70. if (windowwidth <= 600) {
  71. __slides = 1;
  72. }
  73. if (windowwidth < 800 && windowwidth > 600) {
  74. __slides = 2;
  75. }
  76. if (windowwidth < 1200 && windowwidth > 600) {
  77. __slides = 3;
  78. }
  80. const swiper_{{ randomId }} = new Swiper('.{{ randomId }}', {
  81. direction: 'horizontal',
  82. slidesPerGroup: __slides,
  83. loop: true,
  84. pagination: {
  85. el: '.{{ randomId }} .swiper-pagination',
  86. },
  87. navigation: {
  88. nextEl: '.{{ randomId }} .swiper-button-next',
  89. prevEl: '.{{ randomId }} .swiper-button-prev',
  90. },
  91. breakpoints: {
  92. "@0.00": {
  93. slidesPerView: 1,
  94. },
  95. "@0.75": {
  96. slidesPerView: 2,
  97. },
  98. "@1.00": {
  99. slidesPerView: __slides,
  100. },
  101. "@1.50": {
  102. slidesPerView: __slides,
  103. },
  104. }});
  105. {% do pimcore_head_script().captureEnd() %}
  106. {% block css %}
  107.     {% do pimcore_head_link().appendStylesheet('https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css') %}
  108. {% endblock %}
  110. {% block scripts %}
  111.     {% do pimcore_head_script().appendFile(asset('themes/frontend/vendors/bootstrap/js/bootstrap.min.js')) %}
  112.     {% do pimcore_head_script().appendFile('https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js') %}
  113.     {% do pimcore_head_script().appendFile(asset('themes/frontend/vendors/lightbox/js/lightbox.js')) %}
  114. {% endblock %}
  116. {% block head_stylesheets %}
  117.     {% do pimcore_head_link().appendStylesheet(asset('themes/frontend/vendors/lightbox/css/lightbox.css')) %}
  118.     {% do pimcore_head_link().appendStylesheet('https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css') %}
  119. {% endblock %}