{% extends 'base.html.twig' %}{% set totalPages = news['totalPages']|default() %}{% set total = news['total']|default() %}{% set limit = 10 %}{% set firstNews = news['list']|slice(0, 1)|default([]) %}{% set secondNews = news['list']|slice(1, 4)|default([]) %}{% set restsNews = news['list'][5:]|default([]) %}{% block page_contents %} <section class="section section-page-title bg-gradient py-xl-5 py-4" data-aos='fade-down'> <div class="container"> <div class="row"> <div class="col-12 text-center text-white"> <h1 class="page-name font-weight-bold my-2">{% trans %}Suivez les dernières actualités ÉSTIAM{% endtrans %}</h1> <p class="mb-0">{%trans%}Retrouvez toute l'actualité de l'école ÉSTIAM : vie de l'école, pédagogie, événements, toutes les actualités par campus...{%endtrans%}</p> </div> </div> </div> </section> <section class="section section-top-news py-4 mb-4"> <div class="container"> <div class="row"> <div class="col-lg-6"> {% if firstNews %} {% set news = (firstNews|first) %} <div class="top-news d-flex flex-column h-100 mb-4 mr-xl-3 mt-3" data-aos='fade-right'> <div class="t-img hover-zoom"> <a href="{{ news.url }}"> <img class="w-100" src="{{ news.media }}" alt="{{ news.title }}" onerror="this.onerror=null;this.src='{{ asset('assets/images/no-img/news.jpg') }}';"/> </a> </div> <div class="p-xl-3 p-2"> <div class="n-title mb-3"> <a href="{{ news.url }}">{{ news.title }}</a> </div> <div class="n-time mb-3"> <div class="n-icon"><i class="fa-solid fa-calendar-week"></i></div> <div class="n-text">{{ news.createdDate|date('d M Y') }}</div> </div> <div class="n-text mb-3"> <div class="truncate-text"> {{ news.description }} </div> </div> <div class="n-link mt-auto"> <a href="{{ news.url }}">{% trans %}Lire l'article{% endtrans %}<i class="fa-solid fa-arrow-right"></i></a> </div> </div> </div> {% endif %} </div> <div class="col-lg-6"> {% if secondNews %} <div class="d-flex flex-column h-100 mb-4 ml-xl-2" data-aos='fade-left'> {% for news in secondNews %} <div class="related-item py-3 d-flex"> <div class="r-content flex-1 d-flex flex-column h-100 py-2 mr-md-3 mr-2"> <div class="r-title font-weight-bold mb-auto"> <a href="{{ news.url }}">{{ news.title }}</a> </div> <div class="r-time my-md-3 my-2"> <div class="r-icon"><i class="fa-solid fa-calendar-week"></i></div> <div class="r-text">{{ news.createdDate|date('d M Y') }}</div> </div> <div class="r-link mt-auto"> <a href="{{ news.url }}">{% trans %}Lire l'article{% endtrans %}<i class="fa-solid fa-arrow-right"></i></a> </div> </div> <div class="r-img ml-auto"> <div class="hover-zoom"> <a href="{{ news.url }}"><img class="w-100" src="{{ news.media }}" alt="{{ news.title }}" onerror="this.onerror=null;this.src='{{ asset('assets/images/no-img/news.jpg') }}';"/></a> </div> </div> </div> {% endfor %} </div> {% endif %} </div> </div> </div> </section> {% if restsNews %} <section class="section section-news b-4"> <div class="container"> <div class="row" id="load-more"> {% for news in restsNews %} <div class="col-lg-4 col-md-6 mb-lg-5 mb-4"> <div class="n-item d-flex flex-column h-100" data-aos='zoom-in'> <div class="n-img mb-4"> <a href="{{ news.url }}"> <img class="position-relative w-100" src="{{ news.media }}" alt="{{ news.title }}" onerror="this.onerror=null;this.src='{{ asset('assets/images/no-img/news.jpg') }}';"/> </a> </div> <div class="n-title mb-3"> <a href="{{ news.url }}">{{ news.title }}</a> </div> <div class="n-time mb-3"> <div class="n-icon"><i class="fa-solid fa-calendar-week"></i></div> <div class="n-text">{{ news.createdDate|date('d M Y') }}</div> </div> <div class="n-text mb-3"> <div class="truncate-text"> {{ news.description }} </div> </div> <div class="n-link mt-auto"> <a href="{{ news.url }}">{% trans %}Lire l'article{% endtrans %}<i class="fa-solid fa-arrow-right"></i></a> </div> </div> </div> {% endfor %} </div> {% if totalPages > 1 %} <div class="row mt-4 mb-5" data-aos='fade-up'> <div class="col-12 text-center listing-loading" style="display: none;"> <div class="loading"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> </div> {% endif %} </div> </section> {% endif %}{% endblock %}{% block custom_javascripts %}{{ '<script type="application/ld+json">'|raw }}{{ richSnippets|json_encode | raw }}{{ '</script>'|raw }}<script type="text/javascript">$(document).ready(function(){ $('.load__more').hide(); const totalPages = '{{ totalPages }}'; const total = '{{ total }}'; const limit = '{{ limit }}'; let page = 1; let process = true; $('.view-more .link-btn').click(function(){ if(process && totalPages > 1){ $('.listing-paging').hide(); $('.listing-loading').show(); getmoredata(); } }); $(window).scroll(function () { let height = ($(window).scrollTop() + $(window).height()+ 400); if(height >= $(document).height()){ if(process && totalPages > 1){ $('.listing-loading').show(); getmoredata(); } } }) function getmoredata() { process = false; $.ajax({ type: "GET", url: "{{ path('news.loadMore') }}", dataType: "json", data:{'page':page,'limit':limit}, success: function (response) { $('.listing-loading').hide(); if(response.list){ $('#load-more').append(response.list); $('.item-more .truncate-text').each(function() { var $div = $(this); var divWords = $div.text().split(/\s+/); $div.empty(); $.each(divWords, function(i,w){ $('<span/>').text(w).appendTo($div); }); $(this).parent('.item-more').removeClass('item-more'); }); } page = page + 1; let processWidth = (((parseInt($('#news-seen').text()) + limit) / total) *100); $('.progress').css({'width': processWidth+'%'}); if(page*limit < total){ process = true; $('#news-seen').text(parseInt($('#news-seen').text()) + limit); $('.listing-paging').show(); } AOS.init({ easing: 'ease-out-back', offset: 150, disable: 'mobile' }); } }); }});</script>{% endblock %}