templates/_snippets/companies_slide.html.twig line 1

Open in your IDE?
  1. {# Valeurs de base #}
  2. {% set effectiveSectionSettings = showSectionSettings|default(true) ? sectionSettings|default({}) : {} %}
  3. {% set content = effectiveSectionSettings|merge(companiesSlide) %}
  4. {% set companies = partners_snippet_companies() %}
  5. {% set datas = {} %}
  7. {% if content is defined and content is not none and content is not empty %}
  9. {% set datas = datas|merge({'section': section(content)}) %}
  10. {% set datas = datas|merge({'title': title(content)}) %}
  11. {% set companiesSlideId = datas.section.id|default('companies-slide-' ~ random()) %}
  12. {% set isBlackAndWhite = content.isBlackAndWhite|default(false) %}
  14. <section id="{{ companiesSlideId }}" class="companies-slide-section">
  15. {% if showSectionSettings|default(true) and attribute(content, 'titleTextSection')|default('') is not empty %}
  16. {{ ('<'~attribute(content, 'typeTitleSection')|default('h2')~' class="companies-slide-title">')|raw }}
  17. {% if attribute(content, 'pictogramTitleSection')|default('') is not empty %}
  18. <span class="icon">{{ getLucidIcon(attribute(content, 'pictogramTitleSection')) }}</span>
  19. {% endif %}
  20. {{ attribute(content, 'titleTextSection')|raw }}
  21. {{ ('</'~attribute(content, 'typeTitleSection')|default('h2')~'>')|raw }}
  22. {% elseif datas.title.text is defined and datas.title.text is not empty %}
  23. {{ ('<'~datas.title.level|default('h2')~' class="companies-slide-title">')|raw }}
  24. {{ datas.title.text|raw }}
  25. {{ ('</'~datas.title.level|default('h2')~'>')|raw }}
  26. {% endif %}
  28. {% if companies is defined and companies is not empty %}
  29. <div
  30. class="companies-slide"
  31. data-companies-slide
  32. style="margin-bottom: {{ content.slideLinesMarginBottom|default(22) }}{{ content.slideLinesMarginBottomUnit|default('px') }};"
  33. >
  34. <button
  35. type="button"
  36. class="companies-slide__arrow companies-slide__arrow--prev"
  37. aria-label="{{ 'common.previous'|trans }}"
  38. aria-hidden="true"
  39. tabindex="-1"
  40. >
  41. {{ getLucidIcon('chevron-left') }}
  42. </button>
  44. <div
  45. class="companies-slide__viewport"
  46. tabindex="0"
  47. role="region"
  48. aria-label="{{ 'common.companies'|trans|default('Compagnies') }}"
  49. >
  50. <div class="companies-slide__track">
  51. {% for company in companies %}
  52. {% set media = crea_media_get_media(['logo'], company) %}
  53. {% if media is defined and media is not null %}
  54. {% set logoUrl = media.cdnUrl|default('/img/placeholder-company.svg') %}
  55. <div class="company-logo">
  56. {% if company.id is defined and company.id is not null and company.id is not empty %}
  57. <a href="/croisieres?companies[]={{ company.id }}">
  58. <img src="{{ logoUrl }}" alt="{{ company.name|default('Logo compagnie') }}" loading="lazy">
  59. </a>
  60. {% else %}
  61. <img src="{{ logoUrl }}" alt="{{ company.name|default('Logo compagnie') }}" loading="lazy">
  62. {% endif %}
  63. </div>
  64. {% endif %}
  65. {% endfor %}
  66. </div>
  67. </div>
  69. <button
  70. type="button"
  71. class="companies-slide__arrow companies-slide__arrow--next"
  72. aria-label="{{ 'common.next'|trans }}"
  73. aria-hidden="true"
  74. tabindex="-1"
  75. >
  76. {{ getLucidIcon('chevron-right') }}
  77. </button>
  78. </div>
  79. {% endif %}
  80. </section>
  82. {% endif %}
  84. <style>
  85. {% include '_snippets/components/_section.html.twig' %}
  86. {% include '_snippets/components/_title.html.twig' %}
  88. section#{{ companiesSlideId }} {
  89. --companies-slide-gap: {{ content.slideGap|default(40) }}{{ content.slideGapUnit|default('px') }};
  90. --companies-slide-logo-height: {{ content.slideHeight|default(90) }}{{ content.slideHeightUnit|default('px') }};
  91. --companies-slide-logo-filter: {{ isBlackAndWhite ? 'grayscale(100%)' : 'grayscale(0%)' }};
  92. --companies-slide-logo-filter-hover: {{ isBlackAndWhite ? 'grayscale(0%)' : 'unset' }};
  93. }
  94. </style>