Et des images ?

  Modèles d’insertion d’illustrations dans le texte

Rajouter une image en illustration dans le texte d’un article est très facile (deux clics), dès que vous disposez d’un fichier electronique de votre photo, téléchargeable depuis votre navigateur.

Si la quasi-totalité des formats graphiques (et multimedias) est accessible et affichable sans souci, vous devrez néanmoins veiller à la taille du fichier... sous réserve d’avoir Page blanche ? dans l’espace privé !

Article publié le 10 septembre 2021, et actualisé en septembre 2021

   
 
 
 
 
 
 
 
 

Quelques exemples de modèles personnalisés :
- un modèle de Beurt 30/06/2015 14:44
Voilà mon modèle "img_simple.html"

  1. <BOUCLE_document (DOCUMENTS) {id_document}>
  2. [(#REM)
  3.     Modele pour <imgXXX|simple>
  4.     Affiche l'image le plus simplement du monde, sans div, ni rien !
  5.  
  6. ]<img src='#URL_DOCUMENT'[ width="(#LARGEUR)"][ height="(#HAUTEUR)"]
  7. alt="[(#TITRE|attribut_html)]"[ title="(#TITRE|attribut_html)"] />
  8. </BOUCLE_document>

Télécharger

(il n’y a même pas de span contrairement à ce que je disais plus tôt)

- et celui de Camille

  1. <BOUCLE_condition_inline(CONDITION) {si #ENV{class}|=={inline}} >
  2. [(#SET{taille_image,#URL_DOCUMENT|taille_image})][
  3. (#SET{largeur,#GET{taille_image}|table_valeur{1}})][
  4. (#SET{hauteur,#GET{taille_image}|table_valeur{0}})
  5. ]<span style="background-image: url('#URL_DOCUMENT'); width: #GET{largeur}px; height: #GET{hauteur}px; top: [(#GET{hauteur}|div{2}|intval)]px;" class="spip_document_inline">
  6. </span>
  7. </BOUCLE_condition_inline>
  8. <!-- le reste de mon modèle <img> ici -->
  9. <//B_condition_inline>

Télécharger

Avec pour la CSS :

  1. span.spip_document_inline {
  2.     display: inline-block;
  3.     position: relative;
  4. }

Télécharger


Merci de nous signaler les coquilles, imprécisions ou erreurs qui figureraient dans cette page.

Liens A2A visibles seulement pour les inscrits.
Liens visibles seulement pour les inscrits.
   

Article publié le 10 septembre 2021, et actualisé en septembre 2021 .

Répondre à cet article