templates/instrument/show.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  4.     {% include 'include/_title.html.twig' with {title: instrument.name} %}
  5.     <section class="container my-5">
  6.         <div class="row">
  7.             <div class="col-3">
  8.                 <div class="position-sticky-top d-flex justify-content-center">
  9.                     <img src="{{ instrument_dir }}/{{ instrument.picture }}"
  10.                          class="img-fluid" alt="">
  11.                 </div>
  12.             </div>
  13.             <div class="col-9 col-lg-6">
  14.                 <h1>{{ instrument.name }}</h1>
  15.                 {{ instrument.description|purify}}
  16.             </div>
  17.             <div class="col-lg-3">
  18.                 <div class="position-sticky-top">
  19.                     <h2 class="fs-4">Écoutez les titres enregistrés avec {{ instrument.name }}</h2>
  20.                     {% include 'sound/_list-group-sounds.html.twig' %}
  21.                 </div>
  22.             </div>
  23.         </div>
  25.     </section>
  26.     <section class="text-bg-light-200 py-5 mb-n5">
  27.         <div class="container">
  28.             <div class="text-center mb-5 position-relative">
  29.                 <h2 class="text-center visually-hidden">{{ ('Les autres instruments de la marque ' ~ instrument.company.name )|trans }}</h2>
  30.                 <img class="img-fluid d-block mx-auto mb-2" src="{{ company_dir }}/{{ instrument.company.logo }}"
  31.                      alt="{{ ('logo de la marque ' ~ instrument.company.name)|trans }}" style="max-width: 200px">
  32.                 <a href="{{ path('app_company_show', {'slug': instrument.company.slug}) }}"
  33.                 class="stretched-link">Voir la page de la marque </a>
  34.             </div>
  36.             <div class="row g-4 justify-content-center">
  37.                 {% for instrumentCompany in instrument.company.instruments|filter(instrumentcompany => instrumentcompany != instrument)|slice(0, 6) %}
  38.                     <div class="col-6 col-lg-3 col-xxl-2">
  39.                         <figure class="d-flex align-items-end shadow p-2 position-relative h-100 rounded-3 bg-white">
  40.                             <img class="img-fluid w-25" src="{{ instrument_dir }}/{{ instrumentCompany.picture }}"
  41.                                  alt="">
  42.                             <figcaption class="d-flex flex-column ms-2 h-100 flex-grow-1">
  43.                                 <h3 class="fs-5">{{ instrumentCompany.name }}</h3>
  44.                                 <p class="small">
  45.                                     {{ instrumentCompany.summary }}
  46.                                 </p>
  47.                                 <a class="btn btn-sm btn-outline-primary mt-auto stretched-link"
  48.                                    href="{{ path('app_instrument_show', {slug: instrumentCompany.slug}) }}">{{ 'Afficher'|trans }}</a>
  49.                             </figcaption>
  50.                         </figure>
  51.                     </div>
  52.                 {% endfor %}
  53.             </div>
  54.         </div>
  55.     </section>
  56. {% endblock %}