Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

Aligner les images

Patrice MOREL
le 7 novembre 2024
à 12:14
Rappel du sujet :

Bonjour,

Je viens de passer mon site personnel (patcatnats.fr) avec un Spip tout neuf et sous Escal (et j’en ai ch...).
Je cherche à aligner les images les unes à côté des autres ; Spip, les alignant les unes en dessous des autres !.

Par exemple pour aligner 1 ou 2 images et le texte qui suis ; voire une image au milieu du texte ! (voir en exemple mon article n° 497 avec "bille rouge - drapeau - texte - drapeau - texte").

<img152> <img5> Pièce détachées pour automobile <img5> sur le site [Oscaro->http://www.oscaro.com/].

J’ai trouvé un moyen à mettre dans mes modèles/image.html (c’est le fichier SPIP 3.0 (je crois...)).

<BOUCLE_tous (DOCUMENTS types_documents) {id_document=#ID} {tout}>[

(#REM) Cas <imageXX>	: equivalent a <imgXX> pour une image en mode image

][(#INCLUS|=={image}|et{#ENV{emb,''}|non}|oui)
<span class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})][ (#ENV{class})] spip_lien_ok'[
	 style='float:(#ENV{align}|match{left|right});[ width:(#LARGEUR)px;]']>[
	<a href="(#ENV{lien})"[
		class="(#ENV{lien_class})"]>]<img src='#URL_DOCUMENT'
		[ width="(#LARGEUR)"][ height="(#HAUTEUR)"][
			title="(#TITRE|attribut_html)"]
			alt="[(#TITRE|attribut_html)]" class="ajustable" />[(#ENV{lien}|?{</a>})]</span>
][

(#REM) Cas <embXX> : on est appele ici avec emb=' ' : on veut la legende
equivalent a un <docXX> pour une image en mode image

][(#INCLUS|=={image}|et{#ENV{emb,''}|oui}|oui)
#SET{fichier,#URL_DOCUMENT}
#SET{width,#LARGEUR}
#SET{height,#HAUTEUR}
#SET{url,#ENV{lien}}
<dl class='ajustable spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})][ (#ENV{class})] spip_lien_ok' style='float:#ENV{align};' >

<dt>[<a href="(#GET{url})"[ class="(#ENV{lien_class})"] title='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]'[ type="(#ENV{lien}|?{#ENV{lien_mime},#MIME_TYPE})"]>]<img class='ajustable' src='#GET{fichier}' alt='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]' />[(#GET{url}|?{</a>})]</dt>[
<dt class='#EDIT{titre} spip_doc_titre'[ style='width:(#GET{width}|min{350}|max{120})px;']><strong>(#TITRE)</strong></dt>][
<dd class='#EDIT{descriptif} spip_doc_descriptif'[ style='width:(#GET{width}|min{350}|max{120})px;']>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</dd>]
</dl>
][

(#REM) Cas des images qu'il faut embed (svg)
][
(#INCLUS|=={embed}|oui)
<div class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})]'[
style='[(#ENV{align}|match{^(left|right)$}|?{' '})float:#ENV{align};] (#ENV{align,center}|=={center}|?{'',' '})']>
<object	data='#URL_DOCUMENT' 
	type='#MIME_TYPE'[
	width='(#ENV{largeur}?{'', #LARGEUR})'][
	height='(#ENV{hauteur}?{'', #HAUTEUR})']
	class="ajustable"
	[(#ENV*|env_to_attributs)] >
	<param name='src' value='#URL_DOCUMENT' />
	[(#ID_DOCUMENT|appliquer_filtre{#MIME_TYPE})]
</object>[
<div class='spip_doc_titre'><strong>(#TITRE)</strong></div>
][
<div class='spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>
]</div>]
</BOUCLE_tous>

J’aurais besoin de votre avis, car ce n’est que du copier collé ! Et peut-être à développer pour Escal ?!...

Merci

Patrice
patcatnats.fr

Aligner les images

Hello

Je ne trouve pas l’article 497 ...

Aligner les images
Aligner les images

Je ne comprends pas tout au code mais si ça fonctionne, tout va bien !

Aligner les images

Sinon, normalement avec le raccourci <docXX> ça devrait le faire non ?

Aligner les images

Effectivement, çà fonctionne aussi, mais j’ai pas mal d’articles faits avec <imgXX>.
Merci
Patrice

Aligner les images

Il y a le plugin Rechercher-Remplacer qui te permet de remplacer tous les <img par des <doc dans la base de données.

Aligner les images

J’ai enlevé modèles/image.html.
Finalement non, çà ne fonctionne pas avec  !
Les images sont l’une en dessous l’autre et le texte dessous !
Voir article n°497 (patcatnats.fr).
J’aurais souhaité obtenir :

Aligner les images

*Finalement non, çà ne fonctionne pas avec <docXX> !

Aligner les images

en passant

et avec un tableau

|<docxx>|<imgxx>|

et une régle css pour ne pas afficher le tableau dans l’article

apres on peu faire un model

<B_images>
        <a name="ton_conteneur" id="ton_conteneur"></a>
        <div class="ton_conteneur">
          <BOUCLE_images(DOCUMENTS){id_article}{par date}{extension==jpg|png|gif}{mode=image}{doublons}>
            <dl>
              <dt>#TITRE</dt>
              <dd>[(#EMBED_DOCUMENT)]</dd>
              <dd>[(#DESCRIPTIF)]</dd>
            </dl>
          </BOUCLE_images>
        </div>
      </B_images>
      <//B_images>

bref je sais pas trop ce que tu veux faire

par contre évite de sortir un bazooka pour tuer une mouche

Aligner les images

En effet.
Je vais poser la quetion sur discuter.spip.net

Aligner les images

Merci Jean-Christophe.
Il pourrait être inintéressant de pouvoir faire ce genre de composition :

Aligner les images

* Il pourrait être intéressant de pouvoir faire ce genre de composition :
(saloperie de correction automatique !)

Aligner les images

Ok alors si je te propose dans la future version d’escal un modèle qui te permettrait d’aligner tes images avec le raccourci <docXX|inline>, est-ce que ça t’irait ?

Aligner les images

Cela serait super ! Merci.
Pourquoi ne pas l’intégrer dans Escal ?

Aligner les images

Ben c’est justement ce que je te propose !

Aligner les images

Bon, la version 5.2.6 livrée à l’instant devrait te satisfaire 😉

Aligner les images

C’était pourtant écrit comme sur le Port Salut.
J’en tiens une couche parfois...
Merci (j’ai hâte d’utiliser...)
@+
Patrice
patcatnats.fr

Aligner les images

Voilà installer ;)

Configurer ESCAL
Version actuelle : 5.2.6

Vous avez la dernière version disponible

Aligner les images

Impeccable.
J’ai fait un essai sur mon site collectif-jeandeneyman qui est sous SpipFactory et çà fonctionne (article n° 6 - sous le sommaire).
Pour mon site perso patcatnats (sous OVH), j’attends que l’on me propose de mettre à jour Escal vers la version 5.2.6. dans mes plugins.
Je suis sûr que cela pourrait intéresser d’autres personnes.
Proposition : il faudrait pouvoir faire de la publicité des apports ou modifications, à chaque changement de version ; auprès des adhérents Spipfactory à minima.
Encore merci.
Patrice

Aligner les images

Merci d’avoir mis la mise à jour d’Escal.
Un petit problème : si l’image est en milieu de texte, çà ne fonctionne pas (voir article n° 497) !
Patrice
patcatnats.fr

Aligner les images

Si si ça fonctionne mais il ne faut pas oublier de mettre le |inline
 😉

Aligner les images

Quand je te dis que J’en tiens une couche parfois...
Toutes mes excuses
Patrice

Réagir au sujet
Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.
Attention ! Si votre message contient un lien, il devra être validé par le webmestre. Inutile de le poster à nouveau ;-)

Ajouter un document

Plan du site Contact Mentions légales Données personnelles et cookies Espace privé squelette RSS

2009-2025 © Escal - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 5.2.14