templates/album_view/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}ManiGalerie | Album
  4. {% endblock %}
  6. {% block content %}
  8.     <div class="container mt-4">
  9.         {% if albums|length <= 0 %}
  10.             <div class="row bordrline">
  11.                 <div class="col-md-8 p-5">
  12.                     <h2 class="title-noalbum">Aucun album pour l'instant..</h2>
  13.                     <p>La catégorie n'a pour l'instant aucun album à son actif</p>
  14.                     <p>Nous avons besoin de vous :</p>
  15.                     <p>Si vous possédez des photos, n’hésitez pas à les envoyer à 
  16.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 l’adresse suivante : photo@asmanissieux.fr</p>
  17.                     <a class="btn-block returnback" onclick="history.back()">Revenir en arrière</a>
  18.                 </div>
  19.                 <div class="col-md-4">
  20.                     <img src="{{ asset('assets/img/cloud-data1.svg') }}" alt="image erreur pas d'album" class="imgright">
  22.                 </div>
  24.             </div>
  26.         {% else %}
  27.             <div class="row">
  28.                 <div class="col-6">
  29.                     <h2 class="mb-3">
  30.                         Catégorie
  31.                         {{ category.name }}
  32.                     </h2>
  34.                 </div>
  35.                 <div class="col-6 text-right">
  36.                     <a class="btn btn-primary mb-3 mr-1 prev" href="#back" role="button" data-slide="prev">
  37.                         <i class="fa fa-arrow-left"></i>
  38.                     </a>
  39.                     <a class="btn btn-primary mb-3 next" href="#next" role="button" data-slide="next">
  40.                         <i class="fa fa-arrow-right"></i>
  41.                     </a>
  42.                 </div>
  43.             </div>
  44.             <div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
  46.                 <div class="carousel-inner">
  47.                     <div class="carousel-item active">
  48.                         <div class="row {% if albums|length > 3 %}responsive{% endif %}">
  49.                             {% for album in albums %}
  50.                                 <div class="col-md-4">
  51.                                     <div class="card">
  52.                                         <img class="img-fluid definedsize" alt="image de couverture" src="{{asset('pictures/cover/')}}{{ album.coverpicture }}">
  53.                                         {% if is_granted('ROLE_ADMIN') %}
  54.                                             <div class="dlt">
  55.                                                 <a class="text-white" href="{{ path('albumview_delete', {"id": album.id}) }}">X</a>
  56.                                             </div>
  57.                                         {% endif %}
  58.                                         <div class="card-body text-center">
  59.                                             <h5 class="card-title font-weight-bolder">{{ album.name }}</h5>
  60.                                             <hr class="under-black">
  61.                                             <p class="card-text ftweight">
  62.                                                 {{ album.description }}
  63.                                             </p>
  64.                                             <p class="card-text mb-2 d-flex justify-content-center align-items-center font-weight-bolder"><img src="{{ asset('assets/img/calendrier.svg') }}" alt="calendrier icon" class="calendaricon">
  65.                                                 {{ album.dateevent|date('d/m/y') }}
  66.                                             </p>
  67.                                             <a href="{{ path('pictures_album', {"id": album.id}) }}" class="btn btn-mani btn-sm w-100">Voir</a>
  68.                                         </div>
  69.                                     </div>
  70.                                 </div>
  72.                             {% endfor %}
  73.                         </div>
  74.                     </div>
  75.                 </div>
  76.             </div>
  77.         {% endif %}
  78.     </div>
  80. {% endblock %}
  82. {% block script %}
  84.     <script type="text/javascript">
  86.         $('.multiple-items').slick({infinite: true, slidesToShow: 3, slidesToScroll: 3});
  88. $('.responsive').slick({
  89. dots: false,
  90. infinite: false,
  91. speed: 300,
  92. slidesToShow: 3,
  93. slidesToScroll: 4,
  94. prevArrow: $('.back'),
  95. nextArrow: $('.next'),
  96. responsive: [
  97. {
  98. breakpoint: 1024,
  99. settings: {
  100. slidesToShow: 3,
  101. slidesToScroll: 3,
  102. infinite: true,
  103. dots: false
  104. }
  105. }, {
  106. breakpoint: 600,
  107. settings: {
  108. slidesToShow: 2,
  109. slidesToScroll: 2
  110. }
  111. }, {
  112. breakpoint: 480,
  113. settings: {
  114. slidesToShow: 1,
  115. slidesToScroll: 1
  116. }
  117. }
  118. // You can unslick at a given breakpoint now by adding:
  119. // settings: "unslick"
  120. // instead of a settings object
  121. ]
  122. });
  123.     </script>
  124. {% endblock %}