feat(liip_imagine): Ajoute un filtre 'avatar_partner' et l'utilise pour les logos des partenaires.

This commit is contained in:
Serreau Jovann
2025-11-21 20:00:21 +01:00
parent f13629751c
commit b28a852f16
2 changed files with 22 additions and 14 deletions

View File

@@ -1,5 +1,4 @@
liip_imagine:
# Use the gd or imagick driver. Imagick is often more powerful.
driver: "gd"
twig:
mode: lazy
@@ -8,4 +7,10 @@ liip_imagine:
quality: 85
format: 'webp'
filters:
strip: true
strip: ~
avatar_partner:
quality: 75
format: 'webp'
filters:
strip: ~
thumbnail: { size: [ 128, 128 ], mode: inset }

View File

@@ -131,34 +131,37 @@
{ 'w':64,'h':64, 'image': '/assets/partenair/siteconseil.png', 'name': 'SARL SITECONSEIL', 'facebook_link': 'https://www.facebook.com/siteconseil','website':'https://www.siteconseil.fr' }
]) %}
{# Conteneur du partenaire #}
<a href=" {% if partner.website is defined and partner.website %}{{ partner.website }}{% else %}{{ partner.facebook_link ?? '#' }}{% endif %}" target="_blank" class="col-span-1 flex flex-col items-center justify-center py-6 px-4 bg-white rounded-xl shadow-md border border-gray-100 hover:shadow-lg hover:border-indigo-200 transition duration-300 group">
<a href=" {% if partner.website is defined and partner.website %}{{ partner.website }}{% else %}{{ partner.facebook_link ?? '#' }}{% endif %}" target="_blank"
class="col-span-1 flex flex-col items-center justify-center py-6 px-4 bg-white rounded-xl shadow-md border border-gray-100 hover:shadow-lg hover:border-indigo-200 transition duration-300 group">
{# Logo/Image du partenaire #}
<img class="max-h-16 w-auto object-contain mb-3"
src="{{ partner.image | imagine_filter('webp') }}"
{# MODIFICATION 1 : Utilisation du nouveau filtre 'avatar_partner' #}
src="{{ partner.image | imagine_filter('avatar_partner') }}"
alt="{{ partner.name }}"
width="{{ partner.w }}"
height="{{ partner.h }}"
{# Conserver les dimensions intrinsèques pour éviter le CLS, même si l'image est redimensionnée #}
width="64"
height="64"
onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"
>
{# Fallback en texte si l'image ne se charge pas #}
<span class="text-xl font-bold text-indigo-700 group-hover:text-indigo-900 transition duration-300">
{{ partner.name }}
</span>
{{ partner.name }}
</span>
{# Icône Facebook (Optionnelle) #}
{# Le reste du bloc de code pour l'icône reste inchangé #}
{% if partner.website is defined and partner.website %}
<span class="text-sm text-gray-500 mt-2 flex items-center">
Site internet
</span>
Site internet
</span>
{% else %}
{% if partner.facebook_link is defined and partner.facebook_link %}
<span class="text-sm text-gray-500 mt-2 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-facebook mr-1"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
Page Facebook
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-facebook mr-1"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
Page Facebook
</span>
{% endif %}
{% endif %}
</a>