Amelioration de |balise_img et |balise_svg pour permettre de forcer une taille #132

Merged
cerdic merged 1 commits from dev_filtre_balise_img_svg into master 5 months ago
cerdic commented 5 months ago
Owner

Le filtre |balise_img est survitamine :

  • il peut prendre en premier argumenr une balise img deja formee si besoin - ie issue d'un filtre image :
    [(#FICHIER|image_reduire{200,200}|balise_img{'un nuage','spip_logo'})]
  • il paut prendre un dernier argument size pour forcer la taille sous plusieurs formes :
    • x1.5, x2 ou x3 permet de forcer une densite de 1.5, 2 ou 3 (le x est ici le multiplicateur de densite par rapport a la taille initiale)
      une image de largeur 200px affichee avec un x2 aura donc un attribut width='100'
    • Un nombre seul comme 64 pour forcer une image carree avec width='64' height='64'
    • Une largeur ET une hauteur sour la forme 1024x640 pour avoir un width='1024' height='640'
    • Une largeur seule et une hauteur automatique sous la forme '1024x*pour avoir donc unwidth='1024'` et un height ajuste automatiquement pour respecter les proportions initiales de l'image

Pour faciliter l'utilisation du filtre, l'argument de taille (optionnel) arrive toujours en dernier, meme si on ne precise pas de alt ou de class :
[(#FICHIER|balise_img{1024x640})]
[(#FICHIER|balise_img{'un nuage',1024x640})]
[(#FICHIER|balise_img{'un nuage','spip_logo',1024x640})]

Mais si jamais le alt ou la class sont ambigu et peuvent etre interpretes comme une taille, il suffit d'indiquer une taille vide pour lever l'ambiguite :
[(#FICHIER|balise_img{'un nuage','x2',''})]

Le filtre peut donc ainsi facilement etre utilise pour ajuster l'affichage d'image en x2 ou x3 pour prendre en compte les ecrans retina :
[(#FICHIER|image_reduire{400,400}|balise_img{'Mon image HD',x2})]

Le filtre |balise_svg adopte la même syntaxe et le même comportement pour une balise svg inline

Le filtre |balise_img est survitamine : - il peut prendre en premier argumenr une balise img deja formee si besoin - ie issue d'un filtre image : `[(#FICHIER|image_reduire{200,200}|balise_img{'un nuage','spip_logo'})]` - il paut prendre un dernier argument size pour forcer la taille sous plusieurs formes : * `x1.5`, `x2` ou `x3` permet de forcer une densite de 1.5, 2 ou 3 (le x est ici le multiplicateur de densite par rapport a la taille initiale) une image de largeur 200px affichee avec un `x2` aura donc un attribut `width='100'` * Un nombre seul comme `64` pour forcer une image carree avec `width='64' height='64'` * Une largeur ET une hauteur sour la forme `1024x640` pour avoir un `width='1024' height='640'` * Une largeur seule et une hauteur automatique sous la forme '1024x*` pour avoir donc un `width='1024'` et un height ajuste automatiquement pour respecter les proportions initiales de l'image Pour faciliter l'utilisation du filtre, l'argument de taille (optionnel) arrive toujours en dernier, meme si on ne precise pas de alt ou de class : `[(#FICHIER|balise_img{1024x640})]` `[(#FICHIER|balise_img{'un nuage',1024x640})]` `[(#FICHIER|balise_img{'un nuage','spip_logo',1024x640})]` Mais si jamais le alt ou la class sont ambigu et peuvent etre interpretes comme une taille, il suffit d'indiquer une taille vide pour lever l'ambiguite : `[(#FICHIER|balise_img{'un nuage','x2',''})]` Le filtre peut donc ainsi facilement etre utilise pour ajuster l'affichage d'image en x2 ou x3 pour prendre en compte les ecrans retina : `[(#FICHIER|image_reduire{400,400}|balise_img{'Mon image HD',x2})]` Le filtre `|balise_svg` adopte la même syntaxe et le même comportement pour une balise svg inline
Owner

Sacré survitaminage ! (j'ai failli taper survitanimage ^^)

J'ai juste un peu peur du coup de la classe 'x2' qui pourrait avoir des effets de bords et donc nécessiter des modifications dans les usages existants.

Sacré survitaminage ! (j'ai failli taper survitanimage ^^) J'ai juste un peu peur du coup de la classe 'x2' qui pourrait avoir des effets de bords et donc nécessiter des modifications dans les usages existants.
Owner
  • il peut prendre en premier argumenr une balise img deja formee si besoin - ie issue d'un filtre image

trop bien !

> - il peut prendre en premier argumenr une balise img deja formee si besoin - ie issue d'un filtre image trop bien !
Poster
Owner

oui pour le risque de collision entre un size x2 et une classe x2 en effet c'est un petit peu embetant.

On peut limiter le risque en acceptant uniquement un coeff < 10 (x0 à x9.99999 donc).

Alternativement on pourrait choisir

  • une syntaxe 2x qui techniquement ne conflictera pas avec les autres syntaxes et qui pour le coup a un risque de collision beaucoup plus faible voire nul (car une classe ne peut pas commencer par un nombre, ou alors il faut l'échapper), mais alors c'est un peu plus confusionnant
  • ou alors une syntaxe @2x @1.5x @3x qui pour le coup est la convention généralement retenue pour les noms d'assets et qui ne risque pas de conflit non plus
oui pour le risque de collision entre un size `x2` et une classe `x2` en effet c'est un petit peu embetant. On peut limiter le risque en acceptant uniquement un coeff < 10 (x0 à x9.99999 donc). Alternativement on pourrait choisir - une syntaxe `2x` qui techniquement ne conflictera pas avec les autres syntaxes et qui pour le coup a un risque de collision beaucoup plus faible voire nul (car une classe ne peut pas commencer par un nombre, ou alors il faut l'échapper), mais alors c'est un peu plus confusionnant - ou alors une syntaxe `@2x` `@1.5x` `@3x` qui pour le coup est la convention généralement retenue pour les noms d'assets et qui ne risque pas de conflit non plus
Owner

ou alors une syntaxe @2x @1.5x @3x qui pour le coup est la convention généralement retenue pour les noms d'assets et qui ne risque pas de conflit non plus

+10 c'est ce que fait leaflet pour indiquer qu'un jeu de tuiles est en retina => top

> ou alors une syntaxe @2x @1.5x @3x qui pour le coup est la convention généralement retenue pour les noms d'assets et qui ne risque pas de conflit non plus +10 c'est ce que fait leaflet pour indiquer qu'un jeu de tuiles est en retina => top
cerdic force-pushed dev_filtre_balise_img_svg from 89492d27ed to 5c40d310ce 5 months ago
cerdic merged commit 5c40d310ce into master 5 months ago
cerdic deleted branch dev_filtre_balise_img_svg 5 months ago
The pull request has been merged as 5c40d310ce.
Sign in to join this conversation.
No reviewers
No Milestone
No project
No Assignees
3 Participants
Notifications
Due Date

No due date set.

Dependencies

This pull request currently doesn't have any dependencies.

Loading…
There is no content yet.