templates/Front/Channel/show.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ channel.name }} - {{ parent() }}{% endblock %}
  5. {% block content %}
  6. <div class="background-image-channel channel-page font-poppins">
  7. <div class="container py-3 px-0">
  8. <div class="col-12" style="margin-top: 5rem;margin-bottom: 5rem;">
  9. <div class="row">
  10. <div class="col-12 col-md-8">
  11. <div class="d-flex flex-row">
  13. {% include 'Front/Channel/Image/_image_main_avatar.html.twig' with {'channel': channel, 'custom_class_channel': 'channel-avatar-presentation'} %}
  15. {% if channel.name or channel.slogan %}
  16. <div class="ml-3 d-flex flex-column justify-content-center">
  17. {% if channel.name %}
  18. <p class="v2-title-small full-black mb-0">{{ channel.name }}</p>
  19. {% endif %}
  20. {% if channel.slogan %}
  21. <div>
  22. <p class="full-black mb-0">{{ channel.slogan }}</p>
  23. </div>
  24. {% endif %}
  25. </div>
  26. {% endif %}
  27. </div>
  28. </div>
  29. <div class="col-12 col-md-4 social-top">
  30. {% include 'Front/Channel/social-links.twig' with {'channel': channel, 'icon_color': 'black'} %}
  31. </div>
  32. <div class="col-12 mt-4">
  33. <div class="row">
  34. {% if channel.presentationTitle %}
  35. <div class="col-12">
  36. <p class="v2-title-big full-black mt-3 text-center">{{ channel.presentationTitle }}</p>
  37. </div>
  38. {% endif %}
  39. {% if channel.presentationText %}
  40. <div class="col-12">
  41. <p class="mt-3 text-center white-space-pre-wrap">{{ channel.presentationText }}</p>
  42. </div>
  43. {% endif %}
  44. <div class="col-12 mt-4 text-center text-md-left d-flex buttons">
  45. <a href="#our-trainings" class="mt-2 btn-nellapp-v2 btn-nellap-v2-responsive-small">{{ 'front.channel.show.our_trainings.label'|trans }}</a>
  46. {% if channel.institutions|length > 0 or channel.contactPhone or channel.contactEmail or channel.links|length > 0 %}
  47. <a href="#contact-us" class="mt-2 btn-nellapp-v2-secondary btn-nellap-v2-responsive-small">{{ 'front.home.welcome.button.contact'|trans }}</a>
  48. {% endif %}
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  57. {{ parent() }}
  58. {% endblock content %}
  60. {% block inner_content %}
  61. {# Trainings #}
  62. <div class="row" id="our-trainings">
  63. <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
  64. <div class="section-title-type-formation">
  65. <h2 class="ml-0">
  66. {{ 'front.channel.show.tabs.home.subtitles.trainings.label'|trans({'%count%': count_trainings}) }}
  67. </h2>
  68. </div>
  69. </div>
  70. </div>
  72. <div class="row flex-nowrap flex-sm-nowrap flex-md-nowrap flex-lg-nowrap flex-xl-wrap v3-cards">
  73. <div class="scrollable-bar-hidden" style="--_grid-columns: 4">
  74. {% for training in last_four_trainings %}
  75. <twig:TrainingCard :training="training"/>
  76. {% endfor %}
  77. </div>
  79. </div>
  81. {% if count_trainings > 4 %}
  82. <div class="col-12 mt-2 pb-5">
  83. <div class="all-trainings">
  84. <a href="{{ path('front_channel_trainings', {'id': channel.id}) }}" class="text-decoration-none">
  85. {{ 'front.channel.show.actions.see_more.label'|trans({'%count_displayed_item%': last_four_trainings|length, '%count_all_items%': count_trainings}) }}
  86. </a>
  87. </div>
  88. </div>
  89. {% endif %}
  91. {# Gallery #}
  92. {% if channel.galleryImages|length >= 5 %}
  93. <div class="row gallery mt-4 justify-content-center text-center">
  94. {% for galleryImage in channel.galleryImages %}
  95. {% if loop.index0 % 2 == 1 %}
  96. {% set imageTopColumn = true %}
  97. {% endif %}
  99. {% if loop.index0 % 2 == 0 %}
  100. {% set imageTopColumn = false %}
  101. {% endif %}
  103. {% if loop.index0 == 0 %}
  104. <div class="col-12 col-md-6">
  105. <div data-size="{{ galleryImage.image|image_size }}" class="gallery-big-one gallery-image"
  106. style="background-image: url({{ asset('uploads/channel_images/' ~ galleryImage.image.name ~ '.' ~ galleryImage.image.extension) }});">
  107. </div>
  108. </div>
  109. {% endif %}
  111. {% if loop.index0 > 0 and loop.index0 < 5 %}
  112. {% if imageTopColumn %}
  113. <div class="col-3 d-none d-md-block">
  114. <div data-size="{{ galleryImage.image|image_size }}" class="gallery-small-top gallery-image"
  115. style="background-image: url({{ asset('uploads/channel_images/' ~ galleryImage.image.name ~ '.' ~ galleryImage.image.extension) }});">
  116. </div>
  117. {% else %}
  118. <div>
  119. {% if loop.index0 == 4 and channel.galleryImages|length > 5 %}
  120. {% set countMoreContent = channel.galleryImages|length - 5 %}
  121. <div class="more-content font-poppins font-weight-bold d-flex justify-content-center flex-column">
  122. <div class="counter">+{{ countMoreContent }}</div>
  123. </div>
  124. {% endif %}
  126. <div data-size="{{ galleryImage.image|image_size }}" class="gallery-bottom-top gallery-image"
  127. style="background-image: url({{ asset('uploads/channel_images/' ~ galleryImage.image.name ~ '.' ~ galleryImage.image.extension) }});">
  128. </div>
  129. </div>
  130. </div>
  131. {% endif %}
  132. {% endif %}
  133. {% if loop.index0 >= 5 %}
  134. <div data-size="{{ galleryImage.image|image_size }}" class="gallery-image d-none"
  135. style="background-image: url({{ asset('uploads/channel_images/' ~ galleryImage.image.name ~ '.' ~ galleryImage.image.extension) }});">
  136. </div>
  137. {% endif %}
  138. {% endfor %}
  139. </div>
  141. <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  142. <div class="pswp__bg"></div>
  143. <div class="pswp__scroll-wrap">
  144. <div class="pswp__container">
  145. <div class="pswp__item"></div>
  146. <div class="pswp__item"></div>
  147. <div class="pswp__item"></div>
  148. </div>
  150. <div class="pswp__ui pswp__ui--hidden">
  151. <div class="pswp__top-bar">
  152. <div class="pswp__counter"></div>
  153. <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
  154. <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
  155. <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
  156. <div class="pswp__preloader">
  157. <div class="pswp__preloader__icn">
  158. <div class="pswp__preloader__cut">
  159. <div class="pswp__preloader__donut"></div>
  160. </div>
  161. </div>
  162. </div>
  163. </div>
  164. <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
  165. </button>
  166. <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
  167. </button>
  168. <div class="pswp__caption">
  169. <div class="pswp__caption__center"></div>
  170. </div>
  171. </div>
  172. </div>
  173. </div>
  174. {% endif %}
  176. {# Partners #}
  177. {% if channel.partners|length > 0 %}
  178. <div class="row mt-5">
  179. <div class="col-12">
  180. <h2 class="v2-title-small mt-5 mb-2">{{ 'front.channel.show.partners.label'|trans }} ({{ channel.partners|length }})</h2>
  181. </div>
  182. <div class="col-lg-12 col-md-12">
  183. <div class="row">
  184. <div class="col-12">
  185. <div class="slider-container">
  186. <ul class="slider-controls" id="customize-controls-partner" aria-label="Carousel Navigation" tabindex="0">
  187. <li class="prev" data-controls="prev" aria-controls="customize" tabindex="-1">
  188. <img src="{{ asset('build/common/background-white-left.svg', 'common') }}" alt="Go to left"/>
  189. </li>
  190. <li class="next" data-controls="next" aria-controls="customize" tabindex="-1">
  191. <img src="{{ asset('build/common/background-white-right.svg', 'common') }}" alt="Go to right"/>
  192. </li>
  193. </ul>
  194. <div class="my-slider partner-slider">
  195. {% for partner in channel.partners %}
  196. <div class="slider-item">
  197. <div class="slider-card">
  198. <img class="slider-img" src="{{ asset('uploads/channel_images/' ~ partner.image.name ~ '.' ~ partner.image.extension) }}" alt="{{ partner.name }}"/>
  199. </div>
  200. </div>
  201. {% endfor %}
  202. </div>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. </div>
  208. {% endif %}
  210. {# Key informations #}
  211. {% if channel.channelDescriptions|length > 0 %}
  212. <div class="row channel-key-informations">
  213. <div class="col-12">
  214. <h2 class="v2-title-small mt-5 mb-2">{{ 'front.channel.show.some_key_information.label'|trans }}</h2>
  215. </div>
  216. <div class="col-lg-12 col-md-12 font-poppins">
  217. <div class="row">
  218. {% for channelDescription in channel.channelDescriptions %}
  219. <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 mt-4">
  220. {% include 'Front/Channel/channel-description.html.twig' with {'channelDescription' : channelDescription} %}
  221. </div>
  222. {% endfor %}
  223. </div>
  224. </div>
  225. </div>
  226. {% endif %}
  228. {# Teachers #}
  229. {% if teachers|length > 0 %}
  230. <div class="row mt-3 channel-teachers">
  231. <div class="col-12">
  232. <h2 class="v2-title-small mt-5 mb-2">{{ 'front.scholar.training.show.sub_title.teacher.label'|trans }}
  233. ({{ teachers|length }})</h2>
  234. </div>
  236. {% for teacher in teachers %}
  237. {% if loop.index0 < 5 %}
  238. <div class="col-12">
  239. <div class="mt-3">
  240. {% include 'Front/Scholar/Card/teacher-channel.html.twig' with {'teacher' : teacher} %}
  241. </div>
  242. </div>
  243. {% endif %}
  244. {% endfor %}
  246. {% if teachers|length > 5 %}
  247. <div class="col-12 div-more-teacher">
  248. <div class="row">
  249. {% for teacher in teachers %}
  250. {% if loop.index0 >= 5 %}
  251. <div class="col-12">
  252. <div class="mt-3">
  253. {% include 'Front/Scholar/Card/teacher-channel.html.twig' with {'teacher' : teacher} %}
  254. </div>
  255. </div>
  256. {% endif %}
  257. {% endfor %}
  258. </div>
  259. </div>
  260. {% endif %}
  261. </div>
  263. {% if teachers|length > 5 %}
  264. <div class="row pb-2 mb-5">
  265. <div class="col-12">
  266. <div class="all-trainings">
  267. <button class="see-more-btn text-decoration-none" id="teacher-see-more">
  268. {{ 'front.channel.show.actions.see_more.label'|trans({'%count_displayed_item%': 5, '%count_all_items%': teachers|length}) }}
  269. </button>
  270. </div>
  271. </div>
  272. </div>
  273. {% endif %}
  274. {% endif %}
  276. {# Comments #}
  277. {% if advices|length > 0 %}
  278. <div class="row mt-3 {{ advices|length <= 5 ? 'mb-5 pb-2' : '' }}">
  279. <div class="col-12">
  280. <div class="row">
  281. <div class="col-12">
  282. <div class="div-title-between mt-5 mb-2">
  283. <h2 class="v2-title-small">{{ 'front.scholar.training.show.sub_title.advice.label'|trans }}
  284. ({{ advices|length }})</h2>
  285. <p class=""><i class="far fa-star"></i> {{ channel|advice_avg_by_channel }}</p>
  286. </div>
  287. </div>
  288. <div class="col-12">
  289. <div class="mt-3">
  290. {% for advice in advices|slice(0, 5) %}
  291. {% include 'Front/Scholar/Card/advice.html.twig' with {'advice' : advice} %}
  292. {% endfor %}
  294. <div class="div-more-advice">
  295. {% for advice in advices|slice(5) %}
  296. {% include 'Front/Scholar/Card/advice.html.twig' with {'advice' : advice} %}
  297. {% endfor %}
  298. </div>
  299. </div>
  300. </div>
  301. </div>
  302. </div>
  303. </div>
  304. {% endif %}
  306. {% if advices|length > 5 %}
  307. <div class="row pb-2 mb-5">
  308. <div class="col-12">
  309. <div class="all-trainings">
  310. <button class="see-more-btn text-decoration-none" id="training-advice-see-more">
  311. {{ 'front.channel.show.actions.see_more.label'|trans({'%count_displayed_item%': 5, '%count_all_items%': advices|length}) }}
  312. </button>
  313. </div>
  314. </div>
  315. </div>
  316. {% endif %}
  318. {% include 'Front/Channel/find-us-contact-us.html.twig' with {'channel' : channel} %}
  319. {% endblock inner_content %}