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 %}