Redimensionnement des logos d'articles (backend)

Dev
1

Salut !

Pourriez-vous m’aiguiller à propos du redimensionnement des logos d’articles ? Est-ce fait nativement ? Si oui, à partir de quels fichiers et comment le configurer ?

J’hérite d’un projet dont je ne comprends pas tout. Les logos de petite taille sont encadrés d’un fond blanc afin de les étendre, ce qui rend l’ajustement en CSS impossible.
Pour le moment, j’aimerais forcer un redimensionnement à certaines dimensions (quelque soit la taille initial et l’orientation de l’image).

Si ce n’est pas la bonne pratique n’héistez pas à me corriger, j’ignore totalement l’état de l’art !

Merci :slight_smile:

2

Le redimensionnement des logos / recadrage se fait dans 90% du temps lors de la construction de la page HTML public (je crois que les dernières versions de SPIP permettent une réduction au chargment, mais je ne suis pas trop ce genre de chose).

C’est donc tes squelettes qui contiennent quelque part le code qui redimensionne. Vu que tu me parle de cadre blanc, j’imagine que cela utilise le filtre |image_recadre.

Utilise ?var_mode=inclure côté public t’aidera à trouver le fichier concerné.

Voir Traitement automatisé des images - SPIP et Les aides au débuggage de squelettes - SPIP

3

Merci de ta réponse !

En effet le code utilise |image_recadre avec arguments 3 (largeur, hauteur, positionnement), et |image_passe_partout avec 2 arguments (largeur et hauteur).

La doc à laquelle tu me renvoies est instructive, mais ne semble pas répondre à mon besoin…

Par exemple, ici le logo est encadré (|image_recadre), mais je souhaiterais l’étendre afin que soit sa hauteur, soit sa largeur remplisse le container (ici la hauteur):
image

Je reviens un peu sur mes envies. L’idéal serait de reproduire l’effet object-contain: contain, en ajoutant un flou gaussien sur les zones libres.
Comme sur l’image dessous, qui est étendue tout en respectant les proportions, mais avec en plus un remplissage des zones blanches (par un flou de couleurs similaires)
image

J’en demande sûrement beaucoup, surtout au vu de mes compétences, mais ça m’aiderait à savoir ce qu’il est possible de réaliser

4

Tu veux parler de objetct-fit ? Je suppose.
Sinon plutôt que de faire un recadre avec des valeurs fixes, tu peux mettre un ratio (4:3, 19:9, 400:248 etc). Le mieux serait d’avoir la portion de code pour voir ce qui se passe.
Et pour le fond flou de la même couleur, tu peux mettre ça dans un style="background-image:…" en css avec ce genre d’effet sur l’image Traitement automatisé des images - SPIP

5

(Désolé je ne passe qu’une fois tout les quelques jours)

Tu veux parler de objetct-fit ? Je suppose.

Oui !

Par exemple, les images sont souvent recadrées de la sorte: (ici, la manchette)

[(#LOGO_ARTICLE_RUBRIQUE
    |image_passe_partout{#EVAL{logo_article_largeur,540},#EVAL{logo_article_hauteur,325}}
    |image_recadre{#EVAL{logo_article_largeur,540},#EVAL{logo_article_hauteur,325},center}
    |inserer_attribut{class,img-fluid}
)]

Et pour le fond flou de la même couleur, tu peux mettre ça dans un style="background-image:…" en css avec ce genre d’effet sur l’image Traitement automatisé des images - SPIP

Très bonne idée, merci du conseil ! Je vous tiens informé des avancements