templates/blog/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Blog{% endblock %}
  5. {% block header %}
  7. <!-- Header -->
  8. <header class="header text-white pt-8 mt-10 h-250" style="background-image: url(/img/bg/fondo-hojas.png);" data-overlay="8">
  10.     <div class="container text-center">
  12.         <div class="row">
  14.             {#<div class="col-md-8 mx-auto">#}
  16.             {#    <h1>Blog</h1>#}
  18.             {#</div>#}
  20.         </div>
  22.     </div>
  24. </header><!-- /.header -->
  26. {% endblock %}
  28. {% block body %}
  29.     <section class="section" style="background-color: #F9F9FB">
  30.         <img style="position: absolute; height: 20%; top: 0;" src="/img/bg/degradado.png" alt="Degradado decorativo">
  31.         <div class="container">
  33.             <h1 class="pt-5 pb-5" style="font-weight: 600; color: #4A4A4A; text-align: center;">Blog</h1>
  34.             
  35.             <div class="row">
  37.                 <div class="col-md-8 col-xl-9">
  39.                     <div class="row gap-y">
  41.                     {% for post in posts %}
  43.                         <!-- Post -->
  44.                         <div class="col-md-6">
  46.                             <div class="card d-block border hover-shadow-6 mb-6 h-100 align-content-center">
  48.                             {% if post.imageName != '' %}
  50.                                 <a href="{{ path('show_post', {'slug': post.slug, 'year': post.date.format('Y'), 'month': post.date.format('m'), 'day': post.date.format('d') }) }}">
  51.                                 {% if loop.first %}
  52.                                 <img class="card-img-top" src="{{ asset('/assets/blog/'~ post.imageName) | imagine_filter('mode_image') }}" alt="Imagen de la tarjeta">
  53.                                 {% else %}
  54.                                 <img class="card-img-top" src="{{ asset('/assets/blog/'~ post.imageName) | imagine_filter('mode_tile') }}" alt="Imagen de la tarjeta">
  55.                                 {% endif %}
  56.                                 </a>
  58.                             {% endif %}
  60.                                 <div class="p-6 text-center">
  62.                                     <p><a class="small-5 text-lighter text-uppercase ls-2 fw-400" href="#">{{ post.date | localizeddate('medium', 'none', app.request.locale) }}</a></p>
  64.                                     <h5 class="mb-0"><a class="text-dark" href="{{ path('show_post', {'slug': post.slug, 'year': post.date.format('Y'), 'month': post.date.format('m'), 'day': post.date.format('d') }) }}">{{ post.title }}</a></h5>
  66.                                 </div>
  67.                             </div>
  68.                         </div>
  70.                     {% endfor %}
  72.                     </div>
  74.                     <div class="paginator-container">
  76.                         {{ knp_pagination_render(posts) }}
  78.                     </div>
  80.                 </div>
  82.                 {% include 'blog/sidebar.html.twig' %}
  84.             </div>
  86.         </div>
  87.         <img style="position: absolute; height: 20%; bottom: 0; right: 0; rotate: 180deg;" src="/img/bg/degradado.png" alt="Degradado decorativo">
  88.     </section>
  90. {% endblock body %}