display:inline-block sur picture.adapt-img-wrapper ? #4

merci de mettre sur adaptive_images_options.php

include_spip("lib/AdaptiveImages/AdaptiveImages");

à la place de

include_once(_DIR_PLUGIN_ADAPTIVE_IMAGES."lib/AdaptiveImages/AdaptiveImages.php");

car on ne peut pas surcharger la lib sinon.

En l'occurence, je voudrais changer le style imposé inline de cette lib qui créé sur des boites flex un espace horizontal sous les images à cause du display:inline-block (ligne 342)

merci de mettre sur adaptive_images_options.php ``` include_spip("lib/AdaptiveImages/AdaptiveImages"); à la place de include_once(_DIR_PLUGIN_ADAPTIVE_IMAGES."lib/AdaptiveImages/AdaptiveImages.php"); ``` car on ne peut pas surcharger la lib sinon. En l'occurence, je voudrais changer le style imposé inline de cette lib qui créé sur des boites flex un espace horizontal sous les images à cause du display:inline-block (ligne 342)

adaptive_images_options.php.txt

16 KiB

Oui mais c'est un peu embêtant car si il y a des surcharges ça va casser à la prochaine grosse mise à jour du plugin et de la lib :(

Dans le cas des CSS tu peux toujours ajouter des styles dans ton site et prendre la main avec un !important par dessus ce qu'injecte le plugin non ?

(Je pense que dans ce cas il manque sans doute juste un line-height:1px;)

Oui mais c'est un peu embêtant car si il y a des surcharges ça va casser à la prochaine grosse mise à jour du plugin et de la lib :( Dans le cas des CSS tu peux toujours ajouter des styles dans ton site et prendre la main avec un `!important` par dessus ce qu'injecte le plugin non ? (Je pense que dans ce cas il manque sans doute juste un `line-height:1px;`)

certes, mais chacun.e sait ce qu'ielle fait en surchargant et c'est le comportement normal de SPIP pour inclure, ça ne coûte rien, ça ne change rien, sauf à permettre à celleux qui le souhaitent de ne pas recopier encore plus haut dans les ascendants à inclure …
En l'état je dois dupliquer ce fichier d'options ET la lib, double punition :/

Question CSS, il me semble avoir essayé de modifier le line-height et ça ne marche pas.
D'autant que le style est difficilement surchargeable puisqu'il est en dur, il pourrait passer en class peut-être ?
Test fait avec le plugin spectral et adaptive_images, page d'accueil pétée avec des lignes sous chaque image.

Donc, pas d'autre solution amha.

certes, mais chacun.e sait ce qu'ielle fait en surchargant et c'est le comportement normal de SPIP pour inclure, ça ne coûte rien, ça ne change rien, sauf à permettre à celleux qui le souhaitent de ne pas recopier encore plus haut dans les ascendants à inclure … En l'état je dois dupliquer ce fichier d'options ET la lib, double punition :/ Question CSS, il me semble avoir essayé de modifier le line-height et ça ne marche pas. D'autant que le style est difficilement surchargeable puisqu'il est en dur, il pourrait passer en class peut-être ? Test fait avec le plugin spectral et adaptive_images, page d'accueil pétée avec des lignes sous chaque image. Donc, pas d'autre solution amha.

Le style est pas "en dur" sur les éléments html, mais bien déclaré sur la classe .adapt-img-wrapper
https://git.spip.net/spip-contrib-extensions/adaptive_images/src/branch/master/lib/AdaptiveImages/AdaptiveImages.php#L344

Le seul truc c'est que le style est inline dans la page HTML, ce qui le rend plus prioritaire que les styles des css externes.

Mais si tu mets un sélecteur plus fort, tu passes par dessus, donc en principe il suffit de mettre une règle CSS du type

body .adapt-img-wrapper {
}

qui sera plus prioritaire.

Le style est pas "en dur" sur les éléments html, mais bien déclaré sur la classe `.adapt-img-wrapper` https://git.spip.net/spip-contrib-extensions/adaptive_images/src/branch/master/lib/AdaptiveImages/AdaptiveImages.php#L344 Le seul truc c'est que le style est inline dans la page HTML, ce qui le rend plus prioritaire que les styles des css externes. Mais si tu mets un sélecteur plus fort, tu passes par dessus, donc en principe il suffit de mettre une règle CSS du type ``` body .adapt-img-wrapper { } ``` qui sera plus prioritaire.

Ou bien, dans les cas désespérés de styles inline qui collent, en doublant la classe :

.adapt-img-wrapper.adapt-img-wrapper {
	line-height: 1px !important;
}

mais bon, les !important c'est mal :)

Ou bien, dans les cas désespérés de styles inline qui collent, en doublant la classe : ``` .adapt-img-wrapper.adapt-img-wrapper { line-height: 1px !important; } ``` mais bon, les `!important` c'est mal :)

Rectification ! j'ai du utiliser une version différente de l'actuelle car le style n'est pas en dur mais inclus dans la page, on peut donc le surcharger sans modifier la lib.

Dans mon fichier css perso, j'ai juste demandé à revenir à un picture inline par defaut

.adapt-img-wrapper{display:inherit}

et du coup, je me demande pour la LIB lib/AdaptiveImages/AdaptiveImages à quoi peut bien servir de forcer un display:inline-block sur la balise <picture> alors que le comportement de picture est de pouvoir inclure des images et leurs versions mobiles, je n'en vois pas l'utilité. Une idée ?

Rectification ! j'ai du utiliser une version différente de l'actuelle car le style n'est pas en dur mais inclus dans la page, on peut donc le surcharger sans modifier la lib. Dans mon fichier css perso, j'ai juste demandé à revenir à un picture inline par defaut ``` .adapt-img-wrapper{display:inherit} ``` et du coup, je me demande pour la LIB lib/AdaptiveImages/AdaptiveImages à quoi peut bien servir de forcer `un display:inline-block sur la balise <picture>` alors que le comportement de picture est de pouvoir inclure des images et leurs versions mobiles, je n'en vois pas l'utilité. Une idée ?

en effet il faut que je revoie ça à tête reposée, ça ne semble pas très pertinent

Le problème d'espace vide n'est pas le même que là https://github.com/nursit/AdaptiveImages/issues/13 ?

En ajoutant vertical-align: top; à .adapt-img-wrapper ça résout le problème ?

Le problème d'espace vide n'est pas le même que là https://github.com/nursit/AdaptiveImages/issues/13 ? En ajoutant `vertical-align: top;` à `.adapt-img-wrapper` ça résout le problème ?

c'est le même problèmé @jeanmarie en effet, mais la question pertinente de @touti c'est de savoir si le mieux serait pas de supprimer ce inline-block par défaut quand on a un picture.adapt-img-wrapper car il n'apporte a priori rien d'autre que ce soucis

Labels Milestones

display:inline-block sur picture.adapt-img-wrapper ? #4