Init project
This commit is contained in:
237
templates/render_feature/news.html.twig
Normal file
237
templates/render_feature/news.html.twig
Normal file
@@ -0,0 +1,237 @@
|
||||
{% block body %}
|
||||
{% if (news|length) > 0 %}
|
||||
{% if isCarousel == false %}
|
||||
<div class="bg-white py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-4xl">
|
||||
<h2
|
||||
class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl"
|
||||
>
|
||||
Les spectacles
|
||||
</h2>
|
||||
<p class="mt-2 text-lg/8 text-gray-600">
|
||||
Retrouvez mes derniers spectacles.
|
||||
</p>
|
||||
<div class="mt-16 space-y-20 lg:mt-20">
|
||||
{% for new in news %}
|
||||
<article
|
||||
class="relative isolate flex flex-col gap-8 lg:flex-row"
|
||||
>
|
||||
{% if new.newsImages is defined %}
|
||||
<div
|
||||
class="relative aspect-video sm:aspect-2/1 lg:aspect-square lg:w-64 lg:shrink-0"
|
||||
>
|
||||
<img
|
||||
src="{{ new.newsImages[0].image.url }}"
|
||||
alt=""
|
||||
class="absolute inset-0 size-full rounded-2xl bg-gray-50 object-cover"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 rounded-2xl inset-ring inset-ring-gray-900/10"
|
||||
></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div>
|
||||
<div class="flex items-center gap-x-4 text-xs">
|
||||
<time
|
||||
datetime="{{ new.updatedAt|date('Y-m-d') }}"
|
||||
class="text-gray-500"
|
||||
>
|
||||
{{ new.updatedAt|date('d M Y') }}
|
||||
</time>
|
||||
</div>
|
||||
<div class="group relative max-w-xl">
|
||||
<h3
|
||||
class="mt-3 text-lg/6 font-semibold text-gray-900 group-hover:text-gray-600"
|
||||
>
|
||||
<a href="#">
|
||||
<span class="absolute inset-0"></span>
|
||||
{{ new.title }}
|
||||
</a>
|
||||
</h3>
|
||||
<p class="mt-5 text-sm/6 text-gray-600">
|
||||
{{ new.description|u.truncate(300, '…', false)|raw }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="mt-6 flex border-t border-gray-900/5 pt-6 items-center gap-x-2"
|
||||
>
|
||||
<span class="text-sm font-medium text-gray-700">
|
||||
Partager :
|
||||
</span>
|
||||
|
||||
{% set shareUrl =
|
||||
absolute_url(
|
||||
path(
|
||||
'actualites',
|
||||
{
|
||||
slug: news.slug
|
||||
}
|
||||
)
|
||||
)
|
||||
%}
|
||||
|
||||
<!-- LinkedIn -->
|
||||
<a
|
||||
href="https://www.linkedin.com/sharing/share-offsite/?url={{
|
||||
shareUrl
|
||||
}}"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center justify-center size-9 rounded-full bg-gray-100 text-gray-600 hover:bg-amber-500/10 hover:text-amber-500 transition"
|
||||
aria-label="Partager sur LinkedIn"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-linkedin"
|
||||
viewbox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Facebook -->
|
||||
<a
|
||||
href="https://www.facebook.com/sharer/sharer.php?u={{
|
||||
shareUrl
|
||||
}}"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center justify-center size-9 rounded-full bg-gray-100 text-gray-600 hover:bg-amber-500/10 hover:text-amber-500 transition"
|
||||
aria-label="Partager sur Facebook"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-facebook"
|
||||
viewbox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Twitter / X -->
|
||||
<a
|
||||
href="https://twitter.com/intent/tweet?url={{
|
||||
shareUrl
|
||||
}}&text={{ new.title|url_encode }}"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center justify-center size-9 rounded-full bg-gray-100 text-gray-600 hover:bg-amber-500/10 hover:text-amber-500 transition"
|
||||
aria-label="Partager sur Twitter"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-twitter"
|
||||
viewbox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334q.002-.211-.006-.422A6.7 6.7 0 0 0 16 3.542a6.7 6.7 0 0 1-1.889.518 3.3 3.3 0 0 0 1.447-1.817 6.5 6.5 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.32 9.32 0 0 1-6.767-3.429 3.29 3.29 0 0 0 1.018 4.382A3.3 3.3 0 0 1 .64 6.575v.045a3.29 3.29 0 0 0 2.632 3.218 3.2 3.2 0 0 1-.865.115 3 3 0 0 1-.614-.057 3.28 3.28 0 0 0 3.067 2.277A6.6 6.6 0 0 1 .78 13.58a6 6 0 0 1-.78-.045A9.34 9.34 0 0 0 5.026 15"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="bg-white py-24 sm:py-32">
|
||||
<div class="mx-auto px-6 lg:px-8">
|
||||
<h2 class="text-4xl font-semibold text-gray-900 sm:text-5xl">
|
||||
Les spectacles
|
||||
</h2>
|
||||
<p class="mt-2 text-lg text-gray-600">
|
||||
Retrouvez mes derniers spectacles.
|
||||
</p>
|
||||
|
||||
<div class="mt-16 flex">
|
||||
<div class="swiper" data-controller="render-feature--news-carousel">
|
||||
<div class="swiper-wrapper">
|
||||
{% for new in news %}
|
||||
{% set images = new.newsImages|default([]) %}
|
||||
{% set mainImage = images|first %}
|
||||
{% set secondaryImages = images|slice(1) %}
|
||||
<div class="swiper-slide">
|
||||
<article class="flex flex-col lg:flex-row rounded-2xl">
|
||||
{# Image à gauche #}
|
||||
{% if mainImage %}
|
||||
<div
|
||||
class="w-full lg:w-1/2 h-100 pl-20 pr-20 lg:pr-10 py-10"
|
||||
>
|
||||
<img
|
||||
src="{{ new.newsImages[0].image.url }}"
|
||||
alt="{{ new.title }}"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
{% if secondaryImages is not empty %}
|
||||
<div class="flex gap-2 mt-6">
|
||||
{% for image in secondaryImages %}
|
||||
<img
|
||||
src="{{ image.image.url }}"
|
||||
alt="{{ new.title }}"
|
||||
class="w-20 h-20 object-cover rounded-lg"
|
||||
/>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Contenu à droite #}
|
||||
<div
|
||||
class="flex flex-col justify-center w-full lg:w-1/2 pr-20 pl-20 lg:pl-10"
|
||||
>
|
||||
<time class="text-xs text-gray-500">
|
||||
{{ new.updatedAt|date('d M Y') }}
|
||||
</time>
|
||||
|
||||
<a
|
||||
class="mt-2 text-xl font-semibold text-gray-900"
|
||||
href="{{
|
||||
path(
|
||||
'actualites',
|
||||
{
|
||||
slug: new.slug
|
||||
}
|
||||
)
|
||||
}}"
|
||||
>
|
||||
{{ new.title }}
|
||||
</a>
|
||||
<p class="mt-4 text-sm text-gray-600">
|
||||
{{
|
||||
new.description|striptags|u.truncate(220, '…', true)
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="swiper-pagination"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user