templates/_snippets/partners_companies.html.twig line 1

Open in your IDE?
  1. {#
  2. SNIPPET CANONIQUE
  3. - Type Sulu: partners_companies
  4. #}
  5. {# Valeurs de base #}
  6. {% set effectiveSectionSettings = showSectionSettings|default(true) ? sectionSettings|default({}) : {} %}
  7. {% set content = effectiveSectionSettings|merge(partnersCompanies) %}
  8. {% set companies = partners_snippet_companies() %}
  9. {% set datas = {} %}
  11. {% if content is defined and content is not none and content is not empty %}
  13. {# Propriétés de la section #}
  14. {% set datas = datas|merge({'section': section(content)}) %}
  16. {# Propriétés du titre #}
  17. {% set datas = datas|merge({'title': title(content)}) %}
  19. {# Mise à jour du CSS lié à la section #}
  20. <style>
  21. {% include '_snippets/components/_section.html.twig' %}{% include '_snippets/components/_title.html.twig' %}/* ========================================
  22. PARTNERS COMPANIES MARQUEE STYLES
  23. ======================================== */
  24. .partners-companies {
  25. width: 100%;
  26. overflow: hidden;
  27. position: relative;
  28. }
  30. .partners-companies .marquee {
  31. display: flex;
  32. white-space: nowrap;
  33. position: relative;
  34. width: fit-content;
  35. will-change: transform;
  36. align-items: center;
  37. gap: {{content.marqueeGap|default(40)}}
  38. {{content.marqueeGapUnit|default('px')}};
  39. }
  41. .partners-companies .marquee .company-logo {
  42. display: inline-flex;
  43. align-items: center;
  44. justify-content: center;
  45. flex-shrink: 0;
  46. position: relative;
  47. height: {{content.marqueeHeight|default(90)}}
  48. {{content.marqueeHeightUnit|default('px')}};
  49. min-width: 120px;
  50. max-width: 200px;
  51. overflow: visible;
  52. }
  54. .partners-companies .marquee .company-logo img {
  55. height: {{content.marqueeHeight|default(90) ~ content.marqueeHeightUnit|default('px')}};
  56. width: auto;
  57. max-width: 100%;
  58. object-fit: contain;
  59. transition: 0.3s ease-in-out;
  60. display: block;
  61. filter:{{content.isBlackAndWhite|default(false) ? 'grayscale(100%)' : 'grayscale(0%)'}}
  62. ;
  63. }
  65. .partners-companies .marquee .company-logo a {
  66. display: flex;
  67. align-items: center;
  68. justify-content: center;
  69. height: 100%;
  70. width: 100%;
  71. overflow: visible;
  72. }
  74. .partners-companies .marquee .company-logo img {
  75. transform: scale(0.95);
  76. }
  78. .partners-companies .marquee .company-logo:hover img {
  79. transform: scale(1);
  80. filter:{{content.isBlackAndWhite|default(false) ? 'grayscale(0%)' : 'unset'}}
  81. ;
  82. }
  84. /* Responsive */
  85. @media(max-width: 768px) {
  86. .partners-companies .marquee .company-logo {
  87. height: {{(content.marqueeHeight|default(90) * 0.8)|round}}
  88. {{content.marqueeHeightUnit|default('px')}};
  89. min-width: 100px;
  90. max-width: 150px;
  91. margin-right: {{(content.marqueeGap|default(40) * 0.75)|round}}
  92. {{content.marqueeGapUnit|default('px')}};
  93. overflow: visible;
  94. }
  96. .partners-companies .marquee .company-logo img {
  97. height: {{(content.marqueeHeight|default(90) * 0.8)|round}}
  98. {{content.marqueeHeightUnit|default('px')}};
  99. }
  101. .partners-companies .marquee .company-logo a {
  102. overflow: visible;
  103. }
  104. }
  106. @media(max-width: 480px) {
  107. .partners-companies .marquee .company-logo {
  108. height: {{(content.marqueeHeight|default(90) * 0.6)|round}}
  109. {{content.marqueeHeightUnit|default('px')}};
  110. min-width: 80px;
  111. max-width: 120px;
  112. margin-right: {{(content.marqueeGap|default(40) * 0.5)|round}}
  113. {{content.marqueeGapUnit|default('px')}};
  114. overflow: visible;
  115. }
  117. .partners-companies .marquee .company-logo img {
  118. height: {{(content.marqueeHeight|default(90) * 0.6)|round}}
  119. {{content.marqueeHeightUnit|default('px')}};
  120. }
  122. .partners-companies .marquee .company-logo a {
  123. overflow: visible;
  124. }
  125. }
  126. </style>
  128. {# Affichage des éléments #}
  130. <section id="{{ datas.section.id|default('') }}" class="partners-companies-section">
  131. {% if showSectionSettings|default(true) and attribute(content, 'titleTextSection')|default('') is not empty %}
  132. {{ ('<'~attribute(content, 'typeTitleSection')|default('h2')~' class="partners-companies-title">')|raw }}
  133. {% if attribute(content, 'pictogramTitleSection')|default('') is not empty %}
  134. <span class="icon">{{ getLucidIcon(attribute(content, 'pictogramTitleSection')|default('')) }}</span>
  135. {% endif %}
  136. {{ attribute(content, 'titleTextSection')|raw }}
  137. {{ ('</'~attribute(content, 'typeTitleSection')|default('h2')~'>')|raw }}
  138. {% elseif datas.title.text is defined and datas.title.text is not empty %}
  139. {{ ('<'~datas.title.level|default('h2')~' class="partners-companies-title">')|raw }}
  140. {{ datas.title.text|raw }}
  141. {{ ('</'~datas.title.level|default('h2')~'>')|raw }}
  142. {% endif %}
  144. {% if companies is defined and companies is not empty %}
  145. <div class="partners-companies" data-direction="{{ content.marqueeDirection|default('leftToRight') }}" data-speed="{{ content.marqueeSpeed|default(1) }}" data-gap="{{ content.marqueeGap|default(40) }}">
  146. <div class="marquee">
  147. {% for company in companies %}
  148. {% set media = crea_media_get_media(['logo'], company) %}
  149. {% if media is defined and media is not null %}
  150. {% set logoUrl = media.cdnUrl|default('/img/placeholder-company.svg') %}
  151. <div class="company-logo">
  152. {% if company.id is defined and company.id is not null and company.id is not empty %}
  153. <a href="/croisieres?companies[]={{ company.id }}">
  154. <img src="{{ logoUrl }}" alt="{{ company.name|default('Logo compagnie') }}" loading="lazy">
  155. </a>
  156. {% else %}
  157. <img src="{{ logoUrl }}" alt="{{ company.name|default('Logo compagnie') }}" loading="lazy">
  158. {% endif %}
  159. </div>
  160. {% endif %}
  161. {% endfor %}
  163. </div>
  164. </div>
  165. {% endif %}
  166. </section>
  168. {# Le JavaScript du carousel partners companies est maintenant géré par assets/website/js/snippets/partners-companies.js #}
  170. {% endif %}