Perte des modèles img inline #4856

Open
opened 1 year ago by JLuc · 13 comments
JLuc commented 1 year ago

« Suite au changement des modèles de documents, en 3.2 le modèle img générait une balise img dans une span, donc le tout en inline. Depuis SPIP 4.0, tous les modèles de documents génèrent une balise figure dans une div, donc des blocs. + voir ici https://demo.spip.net/Charte-typo c'est pareil » (b_b)

C'était par exemple utilisé pour les icones "point d'interrogation" de la doc sur l'aide SPIP et ça donnait ça https://web.archive.org/web/20120508123114/https://www.spip.net/fr_article891.html = une <img> dans un <span>. Mais avec SPIP 4 ces images insérées cassaient le paragraphe comme là https://web.archive.org/web/20210309101526/https://www.spip.net/fr_article891.html. Après correction, elles sont maintenant insérées en début de paragraphe et en float: right avec <img|right>, mais c'est pas le même rendu : https://www.spip.net/fr_article891.html

Il doit y avoir d'autres endroits et d'autres sites où on compte sur une image inline.

Serait il possible de restaurer ça ? Sinon, fournir une manière simple d'obtenir des images inline ?

(suite de spip-galaxie/www.spip.net_legacy#4790)

« Suite au changement des modèles de documents, en 3.2 le modèle img générait une balise img dans une span, donc le tout en inline. Depuis SPIP 4.0, tous les modèles de documents génèrent une balise figure dans une div, donc des blocs. + voir ici https://demo.spip.net/Charte-typo c'est pareil » (b_b) C'était par exemple utilisé pour les icones "point d'interrogation" de la doc sur l'aide SPIP et ça donnait ça https://web.archive.org/web/20120508123114/https://www.spip.net/fr_article891.html = une `<img>` dans un `<span>`. Mais avec SPIP 4 ces images insérées cassaient le paragraphe comme là https://web.archive.org/web/20210309101526/https://www.spip.net/fr_article891.html. Après correction, elles sont maintenant insérées en début de paragraphe et en `float: right` avec `<img|right>`, mais c'est pas le même rendu : https://www.spip.net/fr_article891.html Il doit y avoir d'autres endroits et d'autres sites où on compte sur une image inline. Serait il possible de restaurer ça ? Sinon, fournir une manière simple d'obtenir des images inline ? (suite de https://git.spip.net/spip-galaxie/www.spip.net_legacy/issues/4790)
b_b commented 1 year ago
Owner

Vu le code généré, div + figure, donc deux éléments de type block, ça me semble mal barré. Amha, le besoin est vraiment à la marge et peut se contourner sans problème. À moins qu'on décide d'ajouter et de maintenir une variante inline aux modèles par défaut pour répondre à ce cas à la marge ? (bof)

Vu le code généré, div + figure, donc deux éléments de type block, ça me semble mal barré. Amha, le besoin est vraiment à la marge et peut se contourner sans problème. À moins qu'on décide d'ajouter **et de maintenir** une variante `inline` aux modèles par défaut pour répondre à ce cas à la marge ? (bof)
b_b added the
amélioration
label 1 year ago
b_b added this to the spip-4.0 milestone 1 year ago
Owner

Rien n'empêche de style en inline une variante avec la class inline telle que <docXX|inline>, même si ce sont des conteneur div+figure.

Mais cela casse un peu la compat en effet...

Rien n'empêche de style en inline une variante avec la class `inline` telle que `<docXX|inline>`, même si ce sont des conteneur div+figure. Mais cela casse un peu la compat en effet...
b_b commented 1 year ago
Owner

Je me répète, amha c'est un cas à la marge qui doit être géré localement par les sites qui en ont besoin, mais pas par le core.

Je me répète, amha c'est un cas à la marge qui doit être géré localement par les sites qui en ont besoin, mais pas par le core.
Poster

J'ai ajouté |inline comme suggéré sur https://www.spip.net/fr_article891.html mais ça n'a rien changé.

Avec le texte suivant :

<img1121|right>  SPIP intègre une {aide en ligne} complète, que vous pouvez retrouver, dans l'espace privé de votre site, en cliquant sur les points <img1121|inline> d'interrogation disponibles un peu partout.

on obtient ça : https://www.spip.net/fr_article891.html (idem avec <doc1121|inline>).

J'ai ajouté `|inline` comme suggéré sur https://www.spip.net/fr_article891.html mais ça n'a rien changé. Avec le texte suivant : ``` <img1121|right> SPIP intègre une {aide en ligne} complète, que vous pouvez retrouver, dans l'espace privé de votre site, en cliquant sur les points <img1121|inline> d'interrogation disponibles un peu partout. ``` on obtient ça : https://www.spip.net/fr_article891.html (idem avec `<doc1121|inline>`).

Il me semble que c'est pas spécialement à la marge et que oui ça casse, donc si on peut ajouter une variante (comme left etc) "inline" qui marche vraiment ça serait pas mal.

J'ai vu par ex un site où on met des ptites images/icones avec label texte dans un lien, et donc faut vraiment que l'image puisse être inline parfois. [<doc123|inline> Mon label -> lien]

Il me semble que c'est pas spécialement à la marge et que oui ça casse, donc si on peut ajouter une variante (comme left etc) "inline" qui marche vraiment ça serait pas mal. J'ai vu par ex un site où on met des ptites images/icones avec label texte dans un lien, et donc faut vraiment que l'image puisse être inline parfois. `[<doc123|inline> Mon label -> lien]`
b_b commented 3 weeks ago
Owner

J'ai ajouté |inline comme suggéré sur https://www.spip.net/fr_article891.html mais ça n'a rien changé.

La suggestion implique que tu aies un déclaration dans tes CSS pour prendre en compte cette classe inline posée sur le modèle :p

> J'ai ajouté `|inline` comme suggéré sur https://www.spip.net/fr_article891.html mais ça n'a rien changé. La suggestion implique que tu aies un déclaration dans tes CSS pour prendre en compte cette classe inline posée sur le modèle :p
b_b commented 3 weeks ago
Owner

Il me semble que c'est pas spécialement à la marge et que oui ça casse, donc si on peut ajouter une variante (comme left etc) "inline" qui marche vraiment ça serait pas mal.

Même si on ajoute la prise en charge de cette classe inline dans les CSS de la dist, rien ne permet de dire qu'elle sera dispo dans tous les squelettes dispos. Et ça ne règle rien au fait que ça casse, car les gens devront toujours revoir leurs appels de modèles pour y ajouter ce |inline.

> Il me semble que c'est pas spécialement à la marge et que oui ça casse, donc si on peut ajouter une variante (comme left etc) "inline" qui marche vraiment ça serait pas mal. Même si on ajoute la prise en charge de cette classe inline dans les CSS de la dist, rien ne permet de dire qu'elle sera dispo dans tous les squelettes dispos. Et ça ne règle rien au fait que ça casse, car les gens devront toujours revoir leurs appels de modèles pour y ajouter ce `|inline`.
Poster

J'avais tenté car une recherche montrait que la classe .inline est définie dans squelettes-dist/css/clear.css

J'avais tenté car une recherche montrait que la classe `.inline` est [définie dans `squelettes-dist/css/clear.css`](https://git.spip.net/spip/dist/src/branch/master/css/clear.css#L23)
b_b commented 3 weeks ago
Owner

J'avais tenté car une recherche montrait que la classe .inline est définie dans squelettes-dist/css/clear.css

Ça illustre parfaitement ce que je viens de répondre à @rastapopoulos :)

> J'avais tenté car une recherche montrait que la classe `.inline` est [définie dans `squelettes-dist/css/clear.css`](https://git.spip.net/spip/dist/src/branch/master/css/clear.css#L23) > Ça illustre parfaitement ce que je viens de répondre à @rastapopoulos :)

Bé… tout comme les variantes "left" ou "right" doivent être implémentées aussi pour que ça marche, et pourtant on les documente bien officiellement ?

Bé… tout comme les variantes "left" ou "right" doivent être implémentées aussi pour que ça marche, et pourtant on les documente bien officiellement ?
Owner

+1 pour la demande.

Si je me trompe pas ça devrait pas faire .spip_document.inline mais plutôt .spip_document.spip_document_inline, comme pour left et right. Et donc pris en charge dans les CSS de la dist comme pour ces derniers.

+1 pour la demande. Si je me trompe pas ça devrait pas faire `.spip_document.inline` mais plutôt `.spip_document.spip_document_inline`, comme pour `left` et `right`. Et donc pris en charge dans les CSS de la dist comme pour ces derniers.

Au cas où ça puisse donner des idées : dans SoyezCréateurs, j'ai rajouté un modèle qui garde le comportement de <imgNNN> de SPIP 3.2 :
https://git.spip.net/spip-contrib-squelettes/soyezcreateurs/src/branch/master/modeles/image_img.html

Ça fait en plus une réduction à 32 de haut pour les images inline (dans l'idée que si on fait un inline, ça ne doit pas trop sortir du texte).

Au cas où ça puisse donner des idées : dans SoyezCréateurs, j'ai rajouté un modèle qui garde le comportement de `<imgNNN>` de SPIP 3.2 : https://git.spip.net/spip-contrib-squelettes/soyezcreateurs/src/branch/master/modeles/image_img.html Ça fait en plus une réduction à 32 de haut pour les images inline (dans l'idée que si on fait un inline, ça ne doit pas trop sortir du texte).

Moi j'ai fait un truc plus explicite, et qui ne nécessite PAS de CSS à implémenter : une vrai modèle variante "inline", au même titre que left ou right, qui génère vraiment un truc inline sans aucune balise bloc, uniquement l'image insérée "au fil du texte" quoi, ce qu'on demande à de l'inline :

[(#REM)

	Modele pour les images inline
	<doc1234|inline|hauteur=24>

]
<BOUCLE_image (DOCUMENTS) {media=image} {id_document=#ENV{id,#ENV{id_document}}} {inclus=image} {mode?} {tout}>
[(#SET{autolien,#MEDIA|media_determine_autolien{#EXTENSION,#LARGEUR,#HAUTEUR,#ID_DOCUMENT}|oui})]
[(#SET{image,[(#ENV{largeur}|ou{#ENV{hauteur}}|?{
		[(#FICHIER|image_reduire{#ENV{largeur,10000},#ENV{hauteur,10000}})],
		[<img src='(#URL_DOCUMENT)'[ width="(#LARGEUR)"][ height="(#HAUTEUR)"]/>]})]})]
[(#SET{image,#GET{image}|inserer_attribut{alt,#ENV{alt,#ALT}|sinon{''}}})]
#SET{largeur,#GET{image}|largeur}

[<a href="(#ENV{lien})"[ class="(#ENV{lien_class}|concat{' spip_doc_lien'}|trim)"]>]
[(#ENV{lien}|non|et{#GET{autolien}})<a href="#URL_DOCUMENT" class="spip_doc_lien mediabox" type="#MIME_TYPE">]
		#GET{image}
[(#ENV{lien}|ou{#GET{autolien}}|?{</a>})]
</BOUCLE_image>

Quelque soit la méthode finale décidée, il me semble que ça devrait vraiment être à SPIP (enfin Médias) de base par défaut, de fournir une méthode officielle pour insérer les choses en inline. Sans bidouillage, sans ajout CSS, etc, vraiment par défaut.

Moi j'ai fait un truc plus explicite, et qui ne nécessite PAS de CSS à implémenter : une vrai modèle variante "inline", au même titre que left ou right, qui génère vraiment un truc inline sans aucune balise bloc, uniquement l'image insérée "au fil du texte" quoi, ce qu'on demande à de l'inline : ``` html [(#REM) Modele pour les images inline <doc1234|inline|hauteur=24> ] <BOUCLE_image (DOCUMENTS) {media=image} {id_document=#ENV{id,#ENV{id_document}}} {inclus=image} {mode?} {tout}> [(#SET{autolien,#MEDIA|media_determine_autolien{#EXTENSION,#LARGEUR,#HAUTEUR,#ID_DOCUMENT}|oui})] [(#SET{image,[(#ENV{largeur}|ou{#ENV{hauteur}}|?{ [(#FICHIER|image_reduire{#ENV{largeur,10000},#ENV{hauteur,10000}})], [<img src='(#URL_DOCUMENT)'[ width="(#LARGEUR)"][ height="(#HAUTEUR)"]/>]})]})] [(#SET{image,#GET{image}|inserer_attribut{alt,#ENV{alt,#ALT}|sinon{''}}})] #SET{largeur,#GET{image}|largeur} [<a href="(#ENV{lien})"[ class="(#ENV{lien_class}|concat{' spip_doc_lien'}|trim)"]>] [(#ENV{lien}|non|et{#GET{autolien}})<a href="#URL_DOCUMENT" class="spip_doc_lien mediabox" type="#MIME_TYPE">] #GET{image} [(#ENV{lien}|ou{#GET{autolien}}|?{</a>})] </BOUCLE_image> ``` Quelque soit la méthode finale décidée, il me semble que ça devrait vraiment être à SPIP (enfin Médias) de base par défaut, de fournir une méthode officielle pour insérer les choses en inline. Sans bidouillage, sans ajout CSS, etc, vraiment par défaut.
Sign in to join this conversation.
No Milestone
No Assignees
6 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.