Modèle:Img float

La bibliothèque libre.
Aller à la navigation Aller à la recherche
Documentation

Utilisation[modifier]

Permet de créer des images ou des schémas flottants.

Remarques[modifier]

  • Les « div » peuvent casser les paragraphes

Syntaxe[modifier]

Syntaxe simplifiée[modifier]

{{Img float
 | file = 
 | width = 
 | align = 
 | cap = 
}}

Syntaxe complète[modifier]

{{Img float
 | style = 
 | m = 
 | large =
 | above = 
 | file = 
 | width = 
 | align = 
 | cap = 
 | capalign = 
 | alt = 
}}

Paramètres[modifier]

Permet de créer des images ou des schémas flottants.

Paramètres du modèle

La mise en forme multiligne est préférée pour ce modèle.

ParamètreDescriptionTypeStatut
Nom du fichierfile

Nom du fichier sans le préfixe « File: » ou « Fichier: »

Exemple
The Kinematics of Machinery Fig 2.jpg
Fichierobligatoire
Largeur de l’imagewidth

Largeur de l’image

Par défaut
150px
Exemple
2em, 200px
Chaînefacultatif
Margeverticalem

Marge verticale avant et après le bloc image + légende

Par défaut
1em si align=center, 0 sinon
Exemple
2em, 20px
Chaînefacultatif
Largeur du cadrelarge

Largeur du cadre contenant l’image

Par défaut
150px
Exemple
2em, 200px
Chaînefacultatif
Légendecap

Légende de l’image

Chaînefacultatif
Alignementalign

Aligne l’image à gauche, à droite, ou au centre

Par défaut
right
Exemple
left, right, center
Chaînefacultatif
(alt-text) Texte alternatifalt

Texte qui apparaît lors du survol par la souris, ou pour les systèmes pour malvoyants

Chaînefacultatif
Alignement de la légendecapalign

Alignement du texte de la légende

Par défaut
center
Exemple
left, right, center
Chaînefacultatif
Autres styles en CSSstyle

Permet d’insérer d’autres styles en CSS

Exemple
font-size: 80%; line-height: 80%;
Chaînefacultatif
Texte au-dessusabove

Ajoute du texte au-dessus de l'image

Chaînefacultatif

Exemple[modifier]

Exemple 1 - Image à droite[modifier]

Code wiki Rendu
{{Img float
 | file = The Kinematics of Machinery Fig 1.png
 | width = 250px
 | align = right
 | cap = Fig. 2.
}}
{{lorem ipsum}}

Fig. 2.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

Exemple 2 - Image à gauche[modifier]

Code wiki Rendu
{{Img float
 | file = The Kinematics of Machinery Fig 2.jpg
 | width = 250px
 | align = left
 | cap = Fig. 2.
}}
{{lorem ipsum}}

Fig. 2.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

Exemple 3 - Légende alignée à gauche[modifier]

Code wiki Rendu
{{Img float
 | file = The Kinematics of Machinery Fig 2.jpg
 | width = 250px
 | align = right
 | cap = Fig. 2.
 | capalign = left
}}
{{lorem ipsum}}

Fig. 2.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

Exemple 4 - Image à droite avec texte au dessus[modifier]

Code wiki Rendu
{{Img float
 | style = 
 | file     = The Kinematics of Machinery Fig 1.png
 | width    = 250px
 | align    = right
 | above    = Kinematics of Machinery
 | cap      = Fig. 1.
}}
{{lorem ipsum}}
Kinematics of Machinery

Fig. 1.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

Exemple 5 - Image centrée[modifier]

Dans ce cas, le texte ne peut pas entourer l’image.

Premier cas. — L’image est située entre deux paragraphes : align=center.[modifier]
Code wiki Rendu
{{exemple texte|2}}
{{Img float
 | file = The Kinematics of Machinery Fig 2.jpg
 | width = 250px
 | align = center
 | cap = Fig. 2.
}}
{{exemple texte|5}}
Longtemps, je me suis couché de bonne heure. Parfois, à peine ma bougie éteinte, mes yeux se fermaient si vite que je n’avais pas le temps de me dire :

Fig. 2.
Longtemps, je me suis couché de bonne heure. Parfois, à peine ma bougie éteinte, mes yeux se fermaient si vite que je n’avais pas le temps de me dire : « Je m’endors. » Et, une demi-heure après, la pensée qu’il était temps de chercher le sommeil m’éveillait ; je voulais poser le volume que je croyais avoir encore dans les mains et souffler ma lumière ;
Deuxième cas. — L’image interrompt un paragraphe : align=left et large = 100%.[modifier]
Code wiki Rendu
{{exemple texte|3}} {{Img float
 | large = 100%;
 | file  = The Kinematics of Machinery Fig 2.jpg
 | width = 250px
 | m     = 2em
 | align = left
 | cap   = Fig. 2.
}} {{exemple texte|5}}
Longtemps, je me suis couché de bonne heure. Parfois, à peine ma bougie éteinte, mes yeux se fermaient si vite que je n’avais pas le temps de me dire : « Je m’endors. »
Fig. 2.
Longtemps, je me suis couché de bonne heure. Parfois, à peine ma bougie éteinte, mes yeux se fermaient si vite que je n’avais pas le temps de me dire : « Je m’endors. » Et, une demi-heure après, la pensée qu’il était temps de chercher le sommeil m’éveillait ; je voulais poser le volume que je croyais avoir encore dans les mains et souffler ma lumière ;

Voir aussi[modifier]