templates/front/default/about.html.twig line 1

Open in your IDE?
  1. {% extends "front/_common/_base.html.twig" %}
  2. {% block linkcanonical %}
  3.     <link rel="canonical" href="{{ absolute_url(path('about')) }}">
  4. {% endblock %}
  5. {% block cssadicional %}
  6. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
  7. {% endblock %}
  8. {% block classbody %}{% endblock %}
  9. {% block content %}
  10. {% if home.mainShow %}
  11. <section class="b6">
  12.     <article class="b6__ctn wancho">
  13.         <div class="general_breadcrumbs">
  14.             <ul>
  15.                 <li><a href="{{ path('home') }}">INICIO</a></li>
  16.                 <li><a href="{{ path('about') }}" aria-selected="true">LA EMPRESA</a></li>
  17.             </ul>
  18.         </div>
  19.         <div class="flex jcsb aife b6__title">
  20.             <div class="main_title_layout">
  21.                 {% if home.mainPrefix %}
  22.                 <h2>{{ home.mainPrefix}}</h2>
  23.                 {% endif %}
  24.                 {% if home.mainTitle or home.mainSubtitle %}
  25.                 <h1 class="general_title">
  26.                     {{ home.mainTitle}}
  27.                     {% if home.mainSubtitle %}
  28.                     <span>{{ home.mainSubtitle}}.</span>
  29.                     {% endif %}
  30.                 </h1>
  31.                 {% endif %}
  32.             </div>
  33.             <ul class="b6__imgList">
  34.                 {% if home.mainImg1|image_path %}
  35.                 <li><img src="{{ asset(home.mainImg1|image_path) }}" alt="{{ home.mainImg1|image_alt }}" /></li>
  36.                 {% endif %}
  37.                 {% if home.mainImg2|image_path %}
  38.                 <li><img src="{{ asset(home.mainImg2|image_path) }}" alt="{{ home.mainImg2|image_alt }}" /></li>
  39.                 {% endif %}
  40.             </ul>
  41.         </div>
  42.     </article>
  43. </section>
  44. {% endif %}
  45. {% if home.aboutTitle %}
  46. <section class="b7">
  47.     <article class="b7__ctn flex jcsb aic wancho">
  48.         <div class="b7__text">
  49.             <h3>{{  home.aboutTitle|block_tag('span')|raw }}</h3>
  50.             <div class="gParrafo">
  51.                 {{ home.aboutText|raw }}
  52.             </div>
  53.         </div>
  54.         {% if home.aboutItemsActive %}
  55.         <div class="swiper b7__swiper">
  56.             <div class="swiper-wrapper">
  57.                 {% for item in home.aboutItemsActive %}
  58.                 <div class="swiper-slide"><img src="{{ asset(item.img|image_path) }}" alt="{{ item.img|image_alt }}" /></div>
  59.                 {% endfor %}
  60.                 <!-- BACKEND: DEJAR ESTE ULTIMO ELEMENTO FUERA DEL BUCLE -->
  61.                 <div class="swiper-slide"></div>
  62.             </div>
  63.             <div class="nav-buttons">
  64.                 <div class="button-prev"></div>
  65.                 <div class="button-next"></div>
  66.             </div>
  67.             <div class="swiper-scrollbar"></div>
  68.         </div>
  69.         {% endif %}
  70.     </article>
  71. </section>
  72. {% endif %}
  73. {% if home.selfShow or home.valuesShow %}
  74. <section class="b8">
  75.     <article class="b8__ctn wancho">
  76.         {% if home.selfShow %}
  77.         <div class="b8__top flex jcsb aife">
  78.             <h4>
  79.                 {{ home.selfTextLeft|block_tag('span')|raw }}
  80.             </h4>
  81.             <div class="gParrafo">
  82.                 {{ home.selfTextRight|raw }}
  83.             </div>
  84.         </div>
  85.         <picture>
  86.             <source media="(max-width:480px)" srcset="{{ asset(home.selfImg|image_path) }}" />
  87.             <source media="(max-width:768px)" srcset="{{ asset(home.selfImg|image_path) }}" />
  88.             <img src="{{ asset(home.selfImg|image_path) }}" />
  89.         </picture>
  90.         {% endif %}
  91.         {% if home.valuesShow %}
  92.         <div class="b8__bottom flex jcsb">
  93.             <div class="b8__info">
  94.                 <h4>
  95.                     {{home.valuesTitle}}
  96.                 </h4>
  97.                 <div class="gParrafo">
  98.                     {{ home.valuesText|raw }}
  99.                 </div>
  100.             </div>
  101.             <ul class="b8__cifras">
  102.                 {% for item in home.valuesItemsActive %}
  103.                 <li>
  104.                     <span>{{ item.num }}</span>
  105.                     <p>{{ item.title }}</p>
  106.                 </li>
  107.                 {% endfor %}
  108.             </ul>
  109.         </div>
  110.         {% endif %}
  111.     </article>
  112. </section>
  113. {% endif %}
  114. {% if home.historyShow and home.historyItemsActive %}
  115. <section class="b9">
  116.     <article class="b9__ctn wancho">
  117.         {% if home.historyTitle %}
  118.         <h4>{{ home.historyTitle }}</h4>
  119.         {% endif %}
  120.         <div class="b9__years"></div>
  121.         <div class="swiper b9__events">
  122.             <ul class="swiper-wrapper">
  123.                 {% for item in home.historyItemsActive %}
  124.                 <li class="swiper-slide" data-year="{{ item.year }}">
  125.                     <img src="{{ asset(item.img|image_path) }}" alt="{{ item.img|image_alt }}" />
  126.                     <div class="b9__info">
  127.                         <h5><span>{{ item.prefix }}</span>{{item.title}}</h5>
  128.                         <p>{{ item.texto }}</p>
  129.                     </div>
  130.                 </li>
  131.                 {% endfor %}
  132.             </ul>
  133.         </div>
  134.         <div class="nav-buttons">
  135.             <div class="button-prev"></div>
  136.             <div class="button-next"></div>
  137.         </div>
  138.     </article>
  139. </section>
  140. {% endif %}
  141. {% if home.medalsShow %}
  142. <section class="b10">
  143.     <article class="b10__ctn wancho">
  144.         {% if home.medalsTitle %}
  145.         <h5>{{ home.medalsTitle }}</h5>
  146.         {% endif %}
  147.         <ul class="b10__list">
  148.             {% for item in home.medalsItemsActive %}
  149.             <li>
  150.                 <img src="{{ asset(item.img|image_path) }}" alt="{{ item.img|image_alt }}" />
  151.                 <p>
  152.                     {{ item.title }}
  153.                 </p>
  154.             </li>
  155.             {% endfor %}
  156.         </ul>
  157.     </article>
  158. </section>
  159. {% endif %}
  160. {% if home.promiseShow %}
  161. <section class="b47 sostenibilidad">
  162.     {% if home.promiseBg|image_path %}
  163.     <img class="b47__main-img" src="{{ asset(home.promiseBg|image_path) }}" alt="{{ home.promiseBg|image_alt }}" />
  164.     {% endif %}
  165.     {% if home.promiseImg %}
  166.     <img class="b47__sec-img" src="{{ asset(home.promiseImg|image_path) }}" alt="{{ home.promiseImg|image_alt }}" />
  167.     {% endif %}
  168.     <article class="wancho">
  169.         <div class="b47__info">
  170.             {% if home.promiseLogo|image_path %}
  171.             <img src="{{ asset(home.promiseLogo|image_path) }}" alt="{{ home.promiseLogo|image_alt }}" />
  172.             {% endif %}
  173.             {% if home.promisePrefix %}
  174.             <small>{{ home.promisePrefix}}</small>
  175.             {% endif %}
  176.             {% if home.promiseTitle %}
  177.             <h5>{{ home.promiseTitle}}</h5>
  178.             {% endif %}
  179.             {% if home.promiseText %}
  180.             <div class="gParrafo">
  181.                 {{ home.promiseText }}
  182.             </div>
  183.             {% endif %}
  184.             <a href="{{ path('trucks') }}" class="general_button whiteFull">{{ home.promiseBtnText|default('Ver Camiones')}}</a>
  185.         </div>
  186.     </article>
  187. </section>
  188. {% endif %}
  189. {% endblock %}
  190. {% block jsfinal %}
  191. <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
  192. <script type="text/javascript">
  193.     const yearSwiper = new Swiper('.b9__events', {
  194.         // Optional parameters
  195.         slidesPerView: '1',
  196.         speed: 500,
  197.         spaceBetween: 0,
  198.         slideToClickedSlide: false,
  199.         simulateTouch: true,
  200.         // If we need pagination
  201.         // Navigation arrows
  202.         navigation: {
  203.             nextEl: '.b9 .button-next',
  204.             prevEl: '.b9 .button-prev',
  205.         },
  206.         pagination: {
  207.             el: '.b9__years',
  208.             clickable: true,
  209.             dynamicBullets: true,
  210.             dynamicMainBullets: 8,
  211.         },
  212.         breakpoints: {
  213.             0: {
  214.                 pagination: {
  215.                     dynamicBullets: false,
  216.                     dynamicMainBullets: 4,
  217.                 },
  218.             },
  219.             769: {
  220.                 pagination: {
  221.                     dynamicBullets: true,
  222.                     dynamicMainBullets: 8,
  223.                 },
  224.             },
  225.         },
  226.     });
  227.     const years = [];
  228.     document.querySelectorAll('.b9__events .swiper-slide').forEach(item => {
  229.         years.push(item.dataset.year);
  230.     });
  231.     years.forEach((year, index) => {
  232.         document.querySelectorAll('.swiper-pagination-bullet')[index].innerHTML = year;
  233.     });
  234.     const swiper = new Swiper('.b7__swiper', {
  235.         // Optional parameters
  236.         slidesPerView: 'auto',
  237.         speed: 500,
  238.         spaceBetween: 24,
  239.         // If we need pagination
  240.         // Navigation arrows
  241.         navigation: {
  242.             nextEl: '.b7 .button-next',
  243.             prevEl: '.b7 .button-prev',
  244.         },
  245.         // And if we need scrollbar
  246.         scrollbar: {
  247.             el: '.swiper-scrollbar',
  248.         },
  249.         breakpoints: {
  250.             0: {
  251.                 slidesPerView: '1',
  252.             },
  253.             1025: {
  254.                 slidesPerView: 'auto',
  255.             },
  256.         },
  257.     });
  258. </script>
  259. {% endblock %}