templates/_snippets/blog.html.twig line 1

Open in your IDE?
  1. {# Paramètres de la section #}
  3. {% set blogId = 'blog-' ~ random() %}
  5. {% set backgroundCheckbox = blog.backgroundCheckbox == false ? 0 : 1 %} {# 0 = on veut une image ; 1 = une veut une couleur #}
  6. {% set noBackgroundCheckbox = blog.noBackgroundCheckbox == false ? 0 : 1 %} {# 0 = on ne veut pas de fond ; 1 = on veut un fond #}
  8. {% set backgroundGradientCheckbox = blog.backgroundGradientCheckbox == false ? 0 : 1 %} {# 0 = on ne veut pas de gradient ; 1 = on veut un gradient #}
  9. {% set backgroundGradientDirection = blog.backgroundGradientDirection|default('to right') %}
  10. {% set backgroundGradientColor1 = blog.backgroundGradientColor1|default('#000') %}
  11. {% set backgroundGradientColor2 = blog.backgroundGradientColor2|default('#fff') %}
  12. {% set backgroundGradientAngle = blog.backgroundGradientAngle|default(0) %}
  13. {% set backgroundGradientAngleUnit = blog.backgroundGradientAngleUnit|default('deg') %}
  14. {% set backgroundGradientColor1Position = blog.backgroundGradientColor1Position|default(0) %}
  15. {% set backgroundGradientColor2Position = blog.backgroundGradientColor2Position|default(100) %}
  17. {% set sectionMinHeight = blog.sectionMinHeight|default(0) %}
  18. {% set sectionMinHeightUnit = blog.sectionMinHeightUnit|default('px') %}
  19. {% set backgroundColor = blog.backgroundColor|default('transparent') %}
  20. {% set backgroundImage = blog.backgroundImage|default('') %}
  21. {% set backgroundFilter = blog.backgroundFilter|default('rgba(0,0,0)') %}
  22. {% set backgroundFilterOpacity = blog.backgroundFilterOpacity|default(0) %}
  24. {% set blogLogo = blog.blogLogo|default(null) %}
  28. {# Paramètres du bouton des articles #}
  30. {% set textButton = blog.textButton|default('DÉCOUVRIR') %}
  31. {% set inverseColorButton = blog.inverseColorButtonCheckbox == true ? 1 : 0 %}
  34. <section class="blog" id="{{ blogId }}">
  35. <div class="blog-head">
  36. {% if blogLogo is not null %}
  37. {% set logoUrl = sulu_media_url(blogLogo, '400x') %}
  38. <img src="{{ logoUrl }}" alt="Croisiland Le Blog" class="mb-5" loading="lazy">
  39. {% endif %}
  40. <a href="{{ blog.blogLink|default('') }}" class="blog-link" target="_blank">{{ blog.blogButtonText|default('DÉCOUVRIR') }}</a>
  41. </div>
  42. <div class="slider">
  43. <div class="cards">
  44. {% for article in blog.articles %}
  45. <div class="article animation1">
  46. <div class="image-container">
  47. {% if article.isInternalImage == true %}
  48. {% set articleImageUrl = sulu_media_url(article.internalImage, '800x') %}
  49. <img src="{{ articleImageUrl }}" alt="{{ (article.alt)|default('') }}" loading="lazy">
  50. {% else %}
  51. <img src="{{ (article.externalImage)|default('') }}" alt="{{ (article.alt)|default('') }}" loading="lazy">
  52. {% endif %}
  53. {% if article.tags is defined and article.tags is not empty %}
  54. <div class="tags-overlay">
  55. {% for tag in article.tags %}
  56. <span class="tag br2">{{ tag.tag }}</span>
  57. {% endfor %}
  58. </div>
  59. {% endif %}
  61. <!-- Date en bas à gauche -->
  62. {% if article.publicationDate is defined and article.publicationDate is not null and article.publicationDate is not empty %}
  63. <div class="date-overlay br2">
  64. {{ getLucidIcon('calendar', {width: '12', height: '12'}) }}
  65. <span class="date-text">{{ article.publicationDate ? article.publicationDate|date('d M Y') : '' }}</span>
  66. </div>
  67. {% endif %}
  69. <!-- Temps de lecture en bas à droite -->
  70. {% if article.readingTime is defined and article.readingTime is not null %}
  71. <div class="reading-time-overlay br2">
  72. {{ getLucidIcon('clock', {width: '12', height: '12'}) }}
  73. <span class="reading-time-text">{{ article.readingTime ~ ' min de lecture'|default('7min de lecture') }}</span>
  74. </div>
  75. {% endif %}
  76. </div>
  77. <div class="title">{{ article.title|default('') }}</div>
  78. <div class="content">{{ article.description|raw }}</div>
  79. <a href="{{ article.link|default('') }}" class="bouton" target="_blank">{{ textButton }}</a>
  80. </div>
  81. {% endfor %}
  82. </div>
  83. <div class="chevrons"></div>
  84. </div>
  85. </section>
  88. <style>
  89. /* ========================================
  90. SECTION BLOG - CONTENEUR PRINCIPAL
  91. ======================================== */
  93. #{{ blogId}} {
  95. /* Section */
  96. --section-padding: {{ blog.sectionPaddingTop|default(0) ~ blog.sectionPaddingUnit|default('px') ~ ' ' ~ blog.sectionPaddingRight|default(0) ~ blog.sectionPaddingUnit|default('px') ~ ' ' ~ blog.sectionPaddingBottom|default(0) ~ blog.sectionPaddingUnit|default('px') ~ ' ' ~ blog.sectionPaddingLeft|default(0) ~ blog.sectionPaddingUnit|default('px') }};
  97. --section-min-height : {{ blog.sectionMinHeight|default(0) ~ blog.sectionMinHeightUnit|default('px') }};
  98. --section-border-radius : {{ blog.sectionBorderRadius|default(0) ~ blog.sectionBorderRadiusUnit|default('px') }};
  100. /* Slider */
  101. --slider-padding-left : {{ blog.sectionPaddingLeft|default(0) ~ blog.sectionPaddingUnit|default('px') }};
  103. /* Articles */
  104. --articles-gap : {{ blog.articlesGap|default(2) ~ blog.articlesGapUnit|default('rem') }};
  106. /* Image Article */
  107. --articles-height-image : {{ blog.articleImageHeight|default(200) ~ blog.articleImageHeightUnit|default('px') }};
  108. --articles-margin-image : {{ blog.articlesMarginTopImage|default(0) ~ blog.articlesMarginUnitImage|default('px') ~ ' ' ~ blog.articlesMarginRightImage|default(0) ~ blog.articlesMarginUnitImage|default('px') ~ ' ' ~ blog.articlesMarginBottomImage|default(0) ~ blog.articlesMarginUnitImage|default('px') ~ ' ' ~ blog.articlesMarginLeftImage|default(0) ~ blog.articlesMarginUnitImage|default('px') }};
  110. /* Image Titres */
  111. --articles-color-title : {{ blog.titlesColor|default('inherit') }} ;
  112. --articles-size-title : {{ blog.titlesSize|default(20) ~ blog.titlesSizeUnit|default('px') }};
  113. --articles-line-height-title : {{ blog.titlesSize|default(20) * 1.2 ~ blog.titlesSizeUnit|default('') }};
  114. --articles-margin-title : {{ blog.articlesMarginTopTitle|default(0) ~ blog.articlesMarginUnitTitle|default('px') ~ ' ' ~ blog.articlesMarginRightTitle|default(0) ~ blog.articlesMarginUnitTitle|default('px') ~ ' ' ~ blog.articlesMarginBottomTitle|default(0) ~ blog.articlesMarginUnitTitle|default('px') ~ ' ' ~ blog.articlesMarginLeftTitle|default(0) ~ blog.articlesMarginUnitTitle|default('px') }};
  116. /* Bouton Article */
  117. --articles-color-button : {{ blog.colorButton|default('inherit') }} ;
  118. --articles-color-button-secondary : {{ blog.colorButtonSecondary|default('inherit') }} ;
  119. --articles-weight-button : {{ blog.weightButton|default(400) }} ;
  120. --articles-radius-button : {{ blog.radiusButton|default(0) ~ blog.radiusButtonUnit|default('px') }};
  121. --articles-padding-button : {{ blog.buttonPaddingTop|default(0) ~ blog.buttonPaddingUnit|default('px') ~ ' ' ~ blog.buttonPaddingRight|default(0) ~ blog.buttonPaddingUnit|default('px') ~ ' ' ~ blog.buttonPaddingBottom|default(0) ~ blog.buttonPaddingUnit|default('px') ~ ' ' ~ blog.buttonPaddingLeft|default(0) ~ blog.buttonPaddingUnit|default('px') }};
  122. --articles-margin-button : {{ blog.buttonMarginTop|default(0) ~ blog.buttonMarginUnit|default('px') ~ ' ' ~ blog.buttonMarginRight|default(0) ~ blog.buttonMarginUnit|default('px') ~ ' ' ~ blog.buttonMarginBottom|default(0) ~ blog.buttonMarginUnit|default('px') ~ ' ' ~ blog.buttonMarginLeft|default(0) ~ blog.buttonMarginUnit|default('px') }};
  124. /* Texte Article */
  125. --articles-color-text : {{ blog.textsColor|default('inherit') }} ;
  126. --articles-size-text : {{ blog.textsSize|default(14) ~ blog.textsSizeUnit|default('px') }};
  127. --articles-line-height-text : {{ blog.textsSize|default(14) * 1.2 ~ blog.textsSizeUnit|default('') }};
  128. --articles-margin-text : {{ blog.articlesMarginTopContent|default(0) ~ blog.articlesMarginUnitContent|default('px') ~ ' ' ~ blog.articlesMarginRightContent|default(0) ~ blog.articlesMarginUnitContent|default('px') ~ ' ' ~ blog.articlesMarginBottomContent|default(0) ~ blog.articlesMarginUnitContent|default('px') ~ ' ' ~ blog.articlesMarginLeftContent|default(0) ~ blog.articlesMarginUnitContent|default('px') }};
  130. }
  133. .blog {
  134. {% if noBackgroundCheckbox == 0 %}
  135. {% if backgroundCheckbox == 1 %}
  136. {% if backgroundGradientCheckbox == 1 %}
  137. background: linear-gradient({{ backgroundGradientDirection }}, {{ backgroundGradientColor1 ~ ' ' ~ backgroundGradientColor1Position ~ '%' }}, {{ backgroundGradientColor2 ~ ' ' ~ backgroundGradientColor2Position ~ '%' }});
  138. {% else %}
  139. background-color: {{ backgroundColor }};
  140. {% endif %}
  141. {% else %}
  142. background-image: url('{{ backgroundImage }}');
  143. background-size: cover;
  144. background-position: center;
  145. {% endif %}
  146. {% endif %}
  147. }
  150. /* ========================================
  151. ARTICLES - STRUCTURE ET LAYOUT
  152. ======================================== */
  154. .blog .blog-head .blog-link:hover {
  155. {% if backgroundCheckbox == 1 %}
  156. {% if backgroundGradientCheckbox == 1 %}
  157. background: linear-gradient({{ backgroundGradientDirection }}, {{ backgroundGradientColor1 ~ ' ' ~ backgroundGradientColor1Position ~ '%' }}, {{ backgroundGradientColor2 ~ ' ' ~ backgroundGradientColor2Position ~ '%' }});
  158. {% else %}
  159. background-color: {{ backgroundColor }};
  160. {% endif %}
  161. {% endif %}
  162. }
  163. </style>