templates/home/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  4.     {{ parent() }}
  5.     {{ encore_entry_link_tags('home') }}
  6. {% endblock %}
  8. {% block javascripts %}
  9.     <script>
  10.         {% set lastVideo = videos|last %}
  11.         var nextId = {{ lastVideo.id + 1 }};
  12.         const videoSearchOptions = [
  13.             {% for video in videos|filter(v => v.videoGroup) %}
  14.                 {
  15.                     id: "{{ video.id }}",
  16.                     title: "{{ video.title }}",
  17.                     aos: {
  18.                         {% for authorOrganization in video.videoAuthorOrganizations %}
  19.                             {{ loop.index0 }}: {
  20.                                 author: "{{ authorOrganization.author ? authorOrganization.author.title ~ ' ' ~ authorOrganization.author.name ~ ' ' ~ authorOrganization.author.lastname }}",
  21.                                 organization: "{{ authorOrganization.organization ? authorOrganization.organization.title }}"
  22.                             },
  23.                         {% endfor %}
  24.                     },
  25.                     authorOrganizations: [
  26.                         {% for authorOrganization in video.videoAuthorOrganizations %}
  27.                             {
  28.                                 author: "{{ authorOrganization.author ? authorOrganization.author.title ~ ' ' ~ authorOrganization.author.name ~ ' ' ~ authorOrganization.author.lastname }}",
  29.                                 organization: "{{ authorOrganization.organization ? authorOrganization.organization.title }}"
  30.                             },
  31.                         {% endfor %}
  32.                     ],
  33.                     edition: {
  34.                         title: "{{ video.videoGroup.pageSection.edition.title }}",
  35.                         year: "{{ video.videoGroup.pageSection.edition.year }}",
  36.                     },
  37.                 },
  38.             {% endfor %}
  39.         ]
  40.     </script>
  41.     {{ parent() }}
  42.     {{ encore_entry_script_tags('home') }}
  43. {% endblock %}
  45. {% block body %}
  46. <!-- INICIO MENÚ DE NAVEGACIÓN -->
  47. <header class="main-header cursor-light">
  48.         <nav class="navbar navbar-top-default navbar-expand-lg static-nav black nav-scale box-nav transparent-bg">
  49.             <div class="container container-logos radius-small flex-wrap">
  50.                 <div class="container radius-small flex-nowrap">
  51.                     <a class="logo link" href="{{ path('app_home') }}">
  52.                         <img src="{{ asset('images/logos/logo-highlights-trasplantes.svg') }}" alt="highlights en trasplantes" title="highlights en trasplantes" class="logo-default mr-2" width="250px">
  53.                         <img src="{{ asset('images/logos/logo-highlights-trasplantes.svg') }}" alt="highlights en trasplantes" title="highlights en trasplantes" class="logo-scrolled mr-2" width="150px">
  54.                     </a>
  55.                     <a class="logo link" href="https://www.chiesi.es/" target="_blank">
  56.                         <img src="{{ asset('images/logos/logo-chiesi.png') }}" alt="Chiesi" title="Chiesi" class="logo-default mr-2" width="200px">
  57.                         <img src="{{ asset('images/logos/logo-chiesi.png') }}" alt="Chiesi" title="Chiesi" class="logo-scrolled mr-2" width="150px">
  58.                     </a>
  59.                 </div>
  60.                 {# <a class="logo link" href="javascript:void(0)">
  61.                     <img src="images/logo-blue.png" alt="logo" title="Logo" class="logo-default">
  62.                     <img src="images/logo-blue.png" alt="logo" title="Logo" class="logo-scrolled">
  63.                 </a> #}
  64.                 <div class="collapse navbar-collapse d-none d-lg-block">
  65.                     <ul class="nav navbar-nav">
  66.                         <li class="nav-item"> <a href="#section-news" class="scroll nav-link link active">NUEVO</a>
  67.                         </li>
  68.                         <li class="nav-item"> <a href="#section-proyectos" class="scroll nav-link link">PROYECTOS</a>
  69.                         </li>
  70.                         <li class="nav-item"> <a href="#section-videos-destacados" class="scroll nav-link link">VIDEOS DESTACADOS</a>
  71.                         </li>
  72.                         <li class="nav-item"> <a href="#section-twitter" class="scroll nav-link link">TWITTER</a>
  73.                         </li>
  74.                     </ul>
  75.                     <!-- Barra de búsqueda -->
  76.                     <div class="col" data-controller="video-search">
  77.                         <div class="control-group mt-1">
  78.                             <select id="video-search" placeholder="Buscar video ..."  data-videoSearch-target="videoSelect">
  79.                             </select>
  80.                         </div>
  81.                     </div>
  82.                 </div>
  83.                 {% if app.user %}
  84.                     <a href="{{ path('app_manual_logout') }}" class="nav-link link log-out d-none d-lg-block">Cerrar <i class="fa fa-sign-out" aria-hidden="true"></i></a>
  85.                 {% else %}
  86.                     <a href="{{ path('app_login') }}" class="nav-link link log-in d-none d-lg-block">Entrar <i class="fa fa-sign-in" aria-hidden="true"></i></a>
  87.                 {% endif %}
  88.                 
  89.                 <!-- side menu open button -->
  90.                 <a class="menu_bars d-inline-block menu-bars-setting animated-wrap menu-inner" id="sidemenu_toggle">
  91.                     <div class="menu-lines animated-element">
  92.                         <span></span>
  93.                         <span></span>
  94.                         <span></span>
  95.                     </div>
  96.                 </a>
  97.             </div>
  98.         </nav>
  100.         <!-- Side Menu -->
  101.         <div class="side-menu">
  102.             <div class="inner-wrapper nav-icon">
  103.                 <span class="btn-close link" id="btn_sideNavClose"></span>
  104.                 <nav class="side-nav w-100">
  105.                     <div class="navbar-nav">
  106.                         <a class="nav-link link scroll active" href="#section-news">NUEVO</a>
  107.                         <a class="nav-link link scroll" href="#section-proyectos">PROYECTOS</a>
  108.                         <a class="nav-link link scroll" href="#section-videos-destacados">VIDEOS DESTACADOS</a>
  109.                         <a class="nav-link link scroll" href="#section-twitter">TWITTER</a>
  110.                         {% if app.user %}
  111.                             <a href="{{ path('app_logout') }}" class="nav-link link log-out"><i class="fa fa-sign-out" aria-hidden="true"></i></a>
  112.                         {% else %}
  113.                             <a href="{{ path('app_login') }}" class="nav-link link log-in"><i class="fa fa-sign-in" aria-hidden="true"></i></a>
  114.                         {% endif %}
  115.                         <span class="menu-line"><i class="ti ti-angle-right" aria-hidden="true"></i></span>
  116.                     </div>
  117.                 </nav>
  118.             </div>
  119.         </div>
  120.         <a id="close_side_menu" href="javascript:void(0);"></a>
  121.         <!--Side Menu-->
  122.     </header>
  123. <!-- FIN MENÚ DE NAVEGACIÓN -->
  125. <!-- INICIO SECCIÓN DE NUEVOS -->
  126. <section id="section-news"  class="section-news">
  127.     <div class="section-container">
  128.         <div class="row">
  129.             <div class="col-md-12">
  130.                 <h2><img class="title-icon mr-md-3" src="{{ asset('images/poligono-white.png') }}" alt="polígono" width="100px"> NUEVO</h2>
  131.                 <div class="row">
  132.                     <div class="col-md-12">
  133.                         <div id="text-fading" class="owl-carousel text-center">
  134.                             {% for edition in editions|filter(e => e.isNew) %}
  135.                                 <!-- INICIO VIDEO -->
  136.                                 <div class="item mb-3">
  137.                                     <div class="container-project-img">
  138.                                         {% if edition.externalLink %}
  139.                                             <a class="image split-blog-scale" href="{{ edition.externalLink }}">
  140.                                                 <img src="{% include 'elements/src-edition-image.html.twig' %}" alt="{{edition.title}}">
  141.                                             </a>
  142.                                         {% else %}
  143.                                             <a class="image split-blog-scale" href="{{ path('app_edition', {name: edition.project.name, year: edition.year.name}) }}">
  144.                                                 <img src="{% include 'elements/src-edition-image.html.twig' %}" alt="{{edition.title}}">
  145.                                             </a>
  146.                                         {% endif %}
  147.                                     </div>
  149.                                     <div class="container-project-info d-flex justify-content-center align-items-center">
  150.                                         <p>{{ edition.description|raw }}</p>
  151.                                     </div>
  152.                                 </div>
  153.                             <!-- FIN VIDEO -->
  154.                             {% endfor %}
  155.                         </div>
  156.                     </div>
  157.                 </div>
  158.             </div>                
  159.         </div>
  160.     </div>
  161. </section>
  162. <!-- FIN SECCIÓN DE NUEVOS -->
  164. <!-- INICIO SECCCIÓN DE PROYECTOS -->
  165. <section id="section-proyectos" class="border-white border-width-1 border-solid min-h-500">
  167.     <div class="section-container py-5 container-data">
  168.         <div>
  169.             <div class="row">
  170.                 <div class="col-md-12">
  171.                     <h2><img class="title-icon mr-md-3" src="{{ asset('images/poligono.png') }}" alt="polígono" width="100px"> PROYECTOS</h2>
  172.                     <div class="row mt-5">
  173.                         <div class="col-md-12">
  174.                             {# <div class="slider_wrapper">
  175.                                 <diV class="owl-carousel news-slider">
  176.                                     {% for edition in editions|filter(e => e.showOnHome) %}
  177.                                         <!-- INICIO PROYECTO -->
  178.                                         <div class="item mb-30px">
  179.                                             <div class="news_wrap">
  180.                                                 {% if edition.externalLink %}
  181.                                                     <a class="image split-blog-scale" href="{{ edition.externalLink }}">
  182.                                                         <img src="{% include 'elements/src-edition-image.html.twig' %}" alt="{{edition.title}}">
  183.                                                     </a>
  184.                                                 {% else %}
  185.                                                     <a class="image split-blog-scale" href="{{ path('app_edition', {name: edition.project.name, year: edition.year.name}) }}">
  186.                                                         <img src="{% include 'elements/src-edition-image.html.twig' %}" alt="{{edition.title}}">
  187.                                                     </a>
  188.                                                 {% endif %}
  189.                                                 <div class="news-box">
  190.                                                     <h4>
  191.                                                         {% if edition.externalLink %}
  192.                                                             <a href="{{ edition.externalLink }}" class="color-black font-weight-bold line-height-heading">{{ edition.title|raw }}</a>
  193.                                                         {% else %}
  194.                                                             <a href="{{ path('app_edition', {name: edition.project.name, year: edition.year.name}) }}" class="color-black font-weight-bold line-height-heading">{{ edition.title|raw }}</a>
  195.                                                         {% endif %}
  196.                                                     </h4>
  197.                                                     <p>{{ edition.description|raw }}</p>
  198.                                                     {% if edition.externalLink %}
  199.                                                         <a href="{{ edition.externalLink }}"
  200.                                                         class="btn-setting btn-hvr-setting-main btn-summer-sky btn-hvr text-white mr-2 mt-3">VER MÁS
  201.                                                             <span class="btn-hvr-setting btn-hvr-black">
  202.                                                                 <span class="btn-hvr-setting-inner">
  203.                                                                     <span class="btn-hvr-effect"></span>
  204.                                                                     <span class="btn-hvr-effect"></span>
  205.                                                                     <span class="btn-hvr-effect"></span>
  206.                                                                     <span class="btn-hvr-effect"></span>
  207.                                                                 </span>
  208.                                                             </span>
  209.                                                         </a>
  210.                                                     {% else %}
  211.                                                     <a href="{{ path('app_edition', {name: edition.project.name, year: edition.year.name}) }}"
  212.                                                     class="btn-setting btn-hvr-setting-main btn-summer-sky btn-hvr text-white mr-2 mt-3">VER MÁS
  213.                                                         <span class="btn-hvr-setting btn-hvr-black">
  214.                                                             <span class="btn-hvr-setting-inner">
  215.                                                                 <span class="btn-hvr-effect"></span>
  216.                                                                 <span class="btn-hvr-effect"></span>
  217.                                                                 <span class="btn-hvr-effect"></span>
  218.                                                                 <span class="btn-hvr-effect"></span>
  219.                                                             </span>
  220.                                                         </span>
  221.                                                     </a>
  222.                                                     {% endif %}
  223.                                                 </div>
  224.                                             </div>
  225.                                         </div>
  226.                                         <!-- FIN PROYECTO -->
  227.                                     {% endfor %}
  228.                                 </div>
  229.                             </div> #}
  230.                             <div class="clover-gallery ptb-20 my-4">
  231.                                 {% for edition in editions|filter(e => e.showOnHome)|sort((a, b) => b.number <=> a.number) %}
  232.                                     <!-- INICIO PROYECTO -->
  233.                                     <div class="item mb-30px">
  234.                                         <div class="news_wrap">
  235.                                             {% if edition.externalLink %}
  236.                                                 <a class="image split-blog-scale" href="{{ edition.externalLink }}">
  237.                                                     <img src="{% include 'elements/src-edition-image.html.twig' %}" alt="{{edition.title}}">
  238.                                                 </a>
  239.                                             {% else %}
  240.                                                 <a class="image split-blog-scale" href="{{ path('app_edition', {name: edition.project.name, year: edition.year.name}) }}">
  241.                                                     <img src="{% include 'elements/src-edition-image.html.twig' %}" alt="{{edition.title}}">
  242.                                                 </a>
  243.                                             {% endif %}
  244.                                             <div class="news-box">
  245.                                                 <h4>
  246.                                                     {% if edition.externalLink %}
  247.                                                         <a href="{{ edition.externalLink }}" class="color-black font-weight-bold line-height-heading">{{ edition.title|raw }}</a>
  248.                                                     {% else %}
  249.                                                         <a href="{{ path('app_edition', {name: edition.project.name, year: edition.year.name}) }}" class="color-black font-weight-bold line-height-heading">{{ edition.title|raw }}</a>
  250.                                                     {% endif %}
  251.                                                 </h4>
  252.                                                 <p>{{ edition.description|raw }}</p>
  253.                                                 {% if edition.externalLink %}
  254.                                                     <a href="{{ edition.externalLink }}"
  255.                                                     class="btn-setting btn-hvr-setting-main btn-summer-sky btn-hvr text-white mr-2 mt-3">VER MÁS
  256.                                                         <span class="btn-hvr-setting btn-hvr-black">
  257.                                                             <span class="btn-hvr-setting-inner">
  258.                                                                 <span class="btn-hvr-effect"></span>
  259.                                                                 <span class="btn-hvr-effect"></span>
  260.                                                                 <span class="btn-hvr-effect"></span>
  261.                                                                 <span class="btn-hvr-effect"></span>
  262.                                                             </span>
  263.                                                         </span>
  264.                                                     </a>
  265.                                                 {% else %}
  266.                                                 <a href="{{ path('app_edition', {name: edition.project.name, year: edition.year.name}) }}"
  267.                                                 class="btn-setting btn-hvr-setting-main btn-summer-sky btn-hvr text-white mr-2 mt-3">VER MÁS
  268.                                                     <span class="btn-hvr-setting btn-hvr-black">
  269.                                                         <span class="btn-hvr-setting-inner">
  270.                                                             <span class="btn-hvr-effect"></span>
  271.                                                             <span class="btn-hvr-effect"></span>
  272.                                                             <span class="btn-hvr-effect"></span>
  273.                                                             <span class="btn-hvr-effect"></span>
  274.                                                         </span>
  275.                                                     </span>
  276.                                                 </a>
  277.                                                 {% endif %}
  278.                                             </div>
  279.                                         </div>
  280.                                     </div>
  281.                                     <!-- FIN PROYECTO -->
  282.                                 {% endfor %}
  283.                             </div>
  284.                         </div>
  285.                     </div>
  286.                     
  287.                 </div>
  288.             </div>
  289.         </div>
  290.     </div>
  291. </section>
  292. <!-- FIN SECCIÓN DE PROYECTOS -->
  294. <!-- INICIO SECCIÓN DE VIDEOS DESTACADOS -->
  295. <section id="section-videos-destacados"  class="bg-light">
  296.     <div class="section-container py-5">
  297.         <div class="row">
  298.             <div class="col-md-12">
  299.                 <h2><img class="title-icon mr-md-3" src="{{ asset('images/poligono.png') }}" alt="polígono" width="100px"> VIDEOS DESTACADOS</h2>
  300.                 <div class="row mt-5">
  301.                     <div class="col-md-12">
  302.                         <div class="slider_wrapper">
  303.                             <diV class="owl-carousel news-slider">
  304.                                 {% for video in videos|filter(v => v.isMarked) %}
  305.                                     <!-- INICIO VIDEO -->
  306.                                     <div class="item mb-30px">
  307.                                         <div class="news_wrap">
  308.                                             {% include 'elements/video-item.html.twig' %}
  309.                                         </div>
  310.                                     </div>
  311.                                 <!-- FIN VIDEO -->
  312.                                 {% endfor %}
  313.                             </div>
  314.                         </div>
  315.                     </div>
  316.                 </div>
  317.             </div>                
  318.         </div>
  319.     </div>
  320. </section>
  321. <!-- FIN SECCIÓN DE VIDEOS DESTACADOS -->
  323. <!-- INICIO SECCIÓN DE TWITTER -->
  324. <section id="section-twitter">
  325.     <div class="px-2 px-lg-5 section-container py-5">
  326.         <div class="row">
  327.             <div class="col-md-12">
  328.                 <h2><img class="title-icon mr-md-3" src="{{ asset('images/poligono.png') }}" alt="polígono" width="100px"> TWITTER</h2>
  329.                 <h3 class="pl-4 my-4">¡Síguenos en @ChiesiTx para estar al día de todas las novedades!</h3>
  330.                 <script src="https://apps.elfsight.com/p/platform.js" defer></script>
  331.                 <div class="elfsight-app-1fcb0d40-09b0-4f10-9378-697397f536bb"></div>
  332.             </div>                
  333.         </div>
  334.     </div>
  335. </section>
  336. <!-- FIN SECCIÓN DE TWITTER -->
  338. <!-- INICIO BANNER -->
  339. <section id="section-banner"></section>
  340. <!-- FIN BANNER -->
  342. {% endblock %}