templates/_snippets/thumbnails.html.twig line 1

Open in your IDE?
  1. {# ------------------------------------------------------------------------ #}
  2. {# ----------------------------- PARAMÉTRAGES ----------------------------- #}
  3. {# ------------------------------------------------------------------------ #}
  5. {% set id = 'thumbnails-' ~ random() %}
  10. {% set sectionStyles = {} %}
  11. {% if thumbnails.sectionMinHeight is not none and thumbnails.sectionMinHeight != 0 %}
  12. {% set sectionStyles = sectionStyles|merge({'min-height': thumbnails.sectionMinHeight~thumbnails.sectionMinHeightUnit|default('px')}) %}
  13. {% endif %}
  14. {% if thumbnails.sectionPaddingTop is not none or thumbnails.sectionPaddingRight is not none or thumbnails.sectionPaddingBottom is not none or thumbnails.sectionPaddingLeft is not none %}
  15. {% set sectionStyles = sectionStyles|merge({'padding': thumbnails.sectionPaddingTop|default(0)~thumbnails.sectionPaddingUnit|default('px')~' '~thumbnails.sectionPaddingRight|default(0)~thumbnails.sectionPaddingUnit|default('px')~' '~thumbnails.sectionPaddingBottom|default(0)~thumbnails.sectionPaddingUnit|default('px')~' '~thumbnails.sectionPaddingLeft|default(0)~thumbnails.sectionPaddingUnit|default('px')}) %}
  16. {% endif %}
  17. {% if thumbnails.noBackgroundCheckbox == false %}
  18. {% if thumbnails.backgroundCheckbox == true %}
  19. {% if thumbnails.backgroundGradientCheckbox == true %}
  20. {% set sectionStyles = sectionStyles|merge({'background': 'linear-gradient('~thumbnails.backgroundGradientDirection|default('to right')~', '~thumbnails.backgroundGradientColor1|default('#000')~' '~thumbnails.backgroundGradientColor1Position|default(0)~'%, '~thumbnails.backgroundGradientColor2|default('#fff')~' '~thumbnails.backgroundGradientColor2Position|default(100)~'%)'}) %}
  21. {% else %}
  22. {% if thumbnails.backgroundColor is not none and thumbnails.backgroundColor != '' %}
  23. {% set sectionStyles = sectionStyles|merge({'background-color': thumbnails.backgroundColor}) %}
  24. {% endif %}
  25. {% endif %}
  26. {% else %}
  27. {% if thumbnails.backgroundImage is not none and thumbnails.backgroundImage.url != '' %}
  28. {% set sectionStyles = sectionStyles|merge({'background': 'url('~thumbnails.backgroundImage.url~') no-repeat', 'background-size': 'cover', 'position': 'relative'}) %}
  29. {% endif %}
  30. {% endif %}
  31. {% endif %}
  33. {# Styles pour le filtre d'image de fond (::after) #}
  34. {% set backgroundFilterStyles = {} %}
  35. {% if thumbnails.noBackgroundCheckbox == false and thumbnails.backgroundCheckbox == false %}
  36. {% if thumbnails.backgroundFilter is not none and thumbnails.backgroundFilter != '' %}
  37. {% set backgroundFilterStyles = backgroundFilterStyles|merge({'background-color': thumbnails.backgroundFilter}) %}
  38. {% endif %}
  39. {% if thumbnails.backgroundFilterOpacity is not none %}
  40. {% set backgroundFilterStyles = backgroundFilterStyles|merge({'opacity': thumbnails.backgroundFilterOpacity}) %}
  41. {% endif %}
  42. {% endif %}
  45. {# ------------------------------------------------------------------------ #}
  46. {# ------------------------------- TEMPLATE ------------------------------- #}
  47. {# ------------------------------------------------------------------------ #}
  49. {% if true %}<section id="{{ id }}" class="thumbnails-section">
  51. <div class="thumbnails">
  52. {% for thumbnail in thumbnails.thumbnails %}
  53. {% set linkType =
  54. thumbnail.thumbnailIsLink
  55. ? (thumbnail.thumbnailIsInternalLink
  56. ? 'internal'
  57. : 'external'
  58. )
  59. : 'nolink'
  60. %}
  62. {% if linkType == 'internal' %}
  63. <sulu-link href="{{ thumbnail.thumbnailInternalLink }}" class="element">
  64. {% elseif linkType == 'external' %}
  65. <a target="_blank" class="element" href="{{ thumbnail.thumbnailExternalLink }}">
  66. {% endif %}
  68. <div class="thumbnail animation2">
  69. {% if thumbnails.isIcon %}
  70. <div class="icon">{{ getLucidIcon(thumbnail.thumbnailIcon) }}</div>
  71. {% endif %}
  72. <div class="content">
  73. <div class="title">{{ thumbnail.thumbnailTitle }}</div>
  74. <div class="description">
  75. {% if thumbnail.isImagesThumbnail is defined and thumbnail.isImagesThumbnail == true %}
  76. <div class="images">
  77. {% for image in thumbnail.thumbnailImages %}
  78. <img src="{{ image.url }}" ">
  79. {% endfor %}
  80. </div>
  81. {% else %}
  82. {{ thumbnail.thumbnailContent|raw }}
  83. {% endif %}
  84. </div>
  85. </div>
  86. </div>
  88. {% if linkType == 'internal' %}
  89. </sulu-link>
  90. {% elseif linkType == 'external' %}
  91. </a>
  92. {% endif %}
  93. {% endfor %}
  94. </div>
  96. </section>{% endif %}
  98. {# ------------------------------------------------------------------------ #}
  99. {# ------------------------------ JAVASCRIPT ------------------------------ #}
  100. {# ------------------------------------------------------------------------ #}
  101. {% if true %}<script>
  105. </script>{% endif %}
  107. {# ------------------------------------------------------------------------ #}
  108. {# -------------------------------- STYLES -------------------------------- #}
  109. {# ------------------------------------------------------------------------ #}
  111. {% if true %}<style>
  113. section#{{ id }} {
  116. /* thumbnails */
  118. --row-gap-thumbnails: {{ thumbnails.thumbnailsRowGap|default(0)~thumbnails.thumbnailsRowGapUnit|default('px') }};
  119. --column-gap-thumbnails: {{ thumbnails.thumbnailsColumnGap|default(0)~thumbnails.thumbnailsColumnGapUnit|default('px') }};
  120. --justify-content-thumbnails: {{ thumbnails.thumbnailsAlignment|default('center') }};
  122. /* thumbnail */
  124. --border-radius-thumbnail: {{ thumbnails.thumbnailsBorderRadius|default('0')~thumbnails.thumbnailsBorderRadiusUnit|default('px') }};
  125. --border-thumbnail: {{ thumbnails.thumbnailBordersSize|default('0')~thumbnails.thumbnailBordersSizeUnit|default('px')~' solid '~thumbnails.thumbnailBordersColor|default('inherit') }};
  126. --background-thumbnail: {{ thumbnails.thumbnailsBackgroundColor|default('transparent') }};
  127. --width-thumbnail: {{ thumbnails.thumbnailsWidth|default('100')~ thumbnails.thumbnailsWidthUnit|default('%') }};
  128. --padding-thumbnail: {{ thumbnails.thumbnailsPaddingTopBottom|default(0)~thumbnails.thumbnailsPaddingTopBottomUnit|default('px')~' '~thumbnails.thumbnailsPaddingLeftRight|default(0)~thumbnails.thumbnailsPaddingLeftRightUnit|default('px') }};
  130. /* icon */
  132. --padding-icon-div: {{ thumbnails.thumbnailsIconPadding|default('12px') }};
  133. --border-radius-icon-div: {{ thumbnails.thumbnailsIconBorderRadius|default('0')~thumbnails.thumbnailsIconBorderRadiusUnit|default('px') }};
  134. --background-color-icon-div: {{ thumbnails.thumbnailsIconBackgroundColor|default('inherit') }};
  136. --color-icon: {{ thumbnails.thumbnailsIconColor|default('inherit') }};
  137. --width-icon: {{ thumbnails.thumbnailsIconSize|default('1')~thumbnails.thumbnailsIconSizeUnit|default('rem') }};
  139. --stroke-width-svg-path: {{ thumbnails.thumbnailsIconWeight|default('2') }};
  141. /* thumbnail title */
  143. --color-title: {{ thumbnails.thumbnailsTitleColor|default('inherit') }};
  144. --font-size-title: {{ thumbnails.thumbnailsTitleSize|default('1')~thumbnails.thumbnailsTitleSizeUnit|default('rem') }};
  145. --font-weight-title: {{ thumbnails.thumbnailsTitleWeight|default('normal') }};
  146. --margin-bottom-title: {{ thumbnails.thumbnailsTitleMarginBottom|default(0)~thumbnails.thumbnailsTitleMarginBottomUnit|default('px') }};
  148. /* thumbnail description */
  150. --color-description: {{ thumbnails.thumbnailsTextColor|default('inherit') }};
  151. --font-size-description: {{ thumbnails.thumbnailsTextSize|default('1')~thumbnails.thumbnailsTextSizeUnit|default('rem') }};
  152. --font-weight-description: {{ thumbnails.thumbnailsTextWeight|default('normal') }};
  153. }
  156. section#{{ id }} {
  157. {{ sectionStyles|map((value, key) => key ~ ':' ~ value)|join('; ') }};
  158. }
  160. {% if backgroundFilterStyles is not empty %}
  161. section#{{ id }}::after {
  162. content: "";
  163. position: absolute;
  164. top: 0;
  165. left: 0;
  166. width: 100%;
  167. height: 100%;
  168. z-index: 1;
  169. {{ backgroundFilterStyles|map((value, key) => key ~ ':' ~ value)|join('; ') }};
  170. }
  171. {% endif %}
  173. </style>{% endif %}