Aide:Image complétée

Un modèle d'image complétée est un modèle (a priori sans paramètres) qui affiche une image (graphique, croquis, schéma, planche, carte, ...) sur laquelle des étiquettes (modèle {{étiquette}}) ou autres ont été ajoutées par-dessus formant ainsi une légende ou une terminologie. Ces étiquettes permettent d'apposer directement du texte et des liens sur une image.

Exemples

modifier

Description détaillée

modifier
 
Une catégorie est consacrée à ce sujet : Modèle d'image complétée.

Conventions de nommage des modèles

modifier

Les conventions de « nommage » (la nomenclature) et de catégorisation automatique des modèles sont encore à débattre.

Toutefois, le recours aux sous-espaces est très bénéfique car il permet :

  • La catégorisation automatique (grâce à {{#titlepart:}})
  • La construction d'une arborescence (facile à parcourir)
  • La construction de listes exhaustives (grâce à {{Special:Prefixindex/Template: ...}})

Comment créer une image complétée ?

modifier
 
L'image à compléter

Prenons l'exemple de ce demi-camembert (image:French presidential election 2007 1st 180°.svg) que l'on va compléter pour y placer les noms des candidats. On emploiera pour cela les modèles {{Début de carte}}[1], {{Fin de carte}}, {{Étiquette}} (on pourrait également utiliser les modèles {{Toponyme}}[1] et/ou {{Toponyme avec trait}}[1] ; mais {{Étiquette}} est plus adéquat ici).

Commençons par le placement rapide d'une seule étiquette

Code wiki Rendu
{{Début de carte}}<!--
-->[[Fichier:French presidential election 2007 1st 180°.svg|300px]]
{{Étiquette|90|10|Gérard Schivardi}}
{{Fin de carte}}

Le point de cette étiquette se trouve à 90% de la hauteur de l'image et 10% de sa largeur (à partir de son coin supérieur gauche). On voit que le placement de ce point ne sera pas facile    . Heureusement, pour éviter de tâtonner, il existe des modèles qui insèrent temporairement un quadrillage. Utilisons {{Grille/2%}}.

On voit également que l'étiquette « déborde » de l'image ; mais ignorons cela pour le moment, ce sera rectifié plus tard.

Code wiki Rendu
Ajustement du point à l'aide du quadrillage.
{{Début de carte}}<!--
-->[[Fichier:French presidential election 2007 1st 180°.svg|300px]]
{{Grille/2%}}
{{Étiquette|99|5|[[Gérard Schivardi]]}}
{{Fin de carte}}
 
10%
10%
10%
20%
20%
20%
30%
30%
30%
40%
40%
40%
50%
50%
50%
60%
60%
60%
70%
70%
70%
80%
80%
80%
90%
90%
90%
Code wiki Rendu
Toutes les étiquettes de gauche à droite.
{{Début de carte}}<!--
-->[[Fichier:French presidential election 2007 1st 180°.svg|300px]]
{{Grille/2%}}
{{Étiquette|99|5|[[Gérard Schivardi]]}}
{{Étiquette|95|2|[[José Bové]]}}
{{Étiquette|93|27|[[Olivier Besancenot]]}}
{{Étiquette|81|8|[[Arlette Laguiller]]}}
{{Étiquette|75|5|[[Marie-George Buffet]]}}
{{Étiquette|73|10|[[Dominique Voynet]]}}
{{Étiquette|30|20|[[Ségolène Royal]]}}
{{Étiquette|8|45|[[François Bayrou]]}}
{{Étiquette|8|58|[[Frédéric Nihous]]}}
{{Étiquette|33|80|[[Nicolas Sarkozy]]}}
{{Étiquette|67|94|[[Philippe de Villiers]]}}
{{Étiquette|85|90|[[Jean-Marie Le Pen]]}}
{{Fin de carte}}

Le résultat est épouvantable ; mais rassurez-vous ; on va arranger cela grâce aux paramètres 4 et 5 du modèle {{Étiquette}} qui définissent l'orientation du texte et la longueur du trait.

La paramètre 5 est un paramètre de positionnement (ou orientation) du texte par rapport à son point. Les valeurs sont des directions cardinales : n, ne (la valeur par défaut), e, se, s, so (ou sw), o (ou w), no (ou nw).

Ôtons le quadrillage et répartissons[2] les noms tous autour du camembert à l'aide de ce paramètre 5 (le paramètre 4 sera réglé à l'étape suivante) :

Code wiki Rendu
Orientation des textes.
{{Début de carte}}<!--
-->[[Fichier:French presidential election 2007 1st 180°.svg|300px]]
{{Étiquette|99|5|[[Gérard Schivardi]]|0|sw}}
{{Étiquette|95|2|[[José Bové]]|0|o}}
{{Étiquette|93|27|[[Olivier Besancenot]]|0|s}}
{{Étiquette|81|8|[[Arlette Laguiller]]|0|o}}
{{Étiquette|75|5|[[Marie-George Buffet]]|0|nw}}
{{Étiquette|73|10|[[Dominique Voynet]]|0|nw}}
{{Étiquette|30|20|[[Ségolène Royal]]|0|n}}
{{Étiquette|8|45|[[François Bayrou]]|0|n}}
{{Étiquette|8|58|[[Frédéric Nihous]]|0|ne}}
{{Étiquette|33|80|[[Nicolas Sarkozy]]|0|e}}
{{Étiquette|67|94|[[Philippe de Villiers]]|0|e}}
{{Étiquette|85|90|[[Jean-Marie Le Pen]]|0|se}}
{{Fin de carte}}

La situation est maintenant plus claire ; toutefois il subsiste des superpositions. On règle cela en jouant sur la longueur des traits (ou connecteurs). La valeur par défaut du paramètre est 0 et signifie que les connecteurs « vont » jusqu'au bord de l'image. En effet, contrairement au modèle {{Toponyme avec trait}}, le paramètre 4 de {{Étiquette}} n'est pas la longueur du trait ; mais (en pourcentage par rapport à la taille de l'image), l'écart entre le bord de l'image et l'extrémité « texte » du trait. Avec une valeur négative, le trait s'allonge et sort de l'image. L'avantage par rapport à {{Toponyme avec trait}} est que l'on peut facilement aligner les textes indépendamment de la position des points. Décalons les items Bayrou, Voynet et Buffet :

Code wiki Rendu
Ajustement des textes.
{{Début de carte}}<!--
-->[[Fichier:French presidential election 2007 1st 180°.svg|300px]]
{{Étiquette|99|5|[[Gérard Schivardi]]|-4|sw}}
{{Étiquette|95|2|[[José Bové]]|-2|o}}
{{Étiquette|93|27|[[Olivier Besancenot]]|-4|s}}
{{Étiquette|81|8|[[Arlette Laguiller]]|-2|o}}
{{Étiquette|75|5|[[Marie-George Buffet]]|35|nw}}
{{Étiquette|73|10|[[Dominique Voynet]]|15|nw}}
{{Étiquette|30|20|[[Ségolène Royal]]|0|n}}
{{Étiquette|8|45|[[François Bayrou]]|-14|n}}
{{Étiquette|8|58|[[Frédéric Nihous]]|0|ne}}
{{Étiquette|33|80|[[Nicolas Sarkozy]]|10|e}}
{{Étiquette|67|94|[[Philippe de Villiers]]|0|e}}
{{Étiquette|85|90|[[Jean-Marie Le Pen]]|-4|se}}
{{Fin de carte}}

Le graphique est maintenant terminé. Cependant il déborde. L'étape suivante règle ce problème.

Comment gérer les débordements ?

modifier

Pour régler les débordements, on enferme le graphique dans une balise « <div> » avec une marge intérieure (le « padding »). La syntaxe est :

<div style="
padding-left:<!--espace à gauche-->;
padding-right:<!--espace à droite-->;
padding-top:<!--espace en haut-->;
padding-bottom:<!--espace en bas-->;
">{{Début de carte}}<!--
...
-->
{{Fin de carte}}</div>

Ici j'ai rajouté une bordure bleue pour visualiser le nouveau cadre. J'ai également légèrement réduit la taille de l'image ; cela ne modifie pas les positionnements.

Code wiki Rendu
Élargissement du cadre pour incorporer les débordements.
<div style="
padding-left:9em;
padding-right:9em;
padding-top:5ex;
padding-bottom:5ex;
border: 1px solid blue;
">{{Début de carte}}<!--
-->[[Fichier:French presidential election 2007 1st 180°.svg|200px]]
{{Étiquette|99|5|[[Gérard Schivardi]]|-4|sw}}
{{Étiquette|96|2|[[José Bové]]|-2|o}}
{{Étiquette|93|27|[[Olivier Besancenot]]|-4|se}}
{{Étiquette|81|8|[[Arlette Laguiller]]|-2|o}}
{{Étiquette|75|5|[[Marie-George Buffet]]|35|nw}}
{{Étiquette|73|10|[[Dominique Voynet]]|15|nw}}
{{Étiquette|30|20|[[Ségolène Royal]]|0|n}}
{{Étiquette|8|45|[[François Bayrou]]|-14|n}}
{{Étiquette|8|58|[[Frédéric Nihous]]|0|ne}}
{{Étiquette|33|80|[[Nicolas Sarkozy]]|10|e}}
{{Étiquette|67|94|[[Philippe de Villiers]]|0|e}}
{{Étiquette|85|90|[[Jean-Marie Le Pen]]|-4|se}}
{{Fin de carte}}
</div>

Comment placer une image complétée dans un article ?

modifier

Le code précédent a été placé dans le modèle {{Graphique/Politique/France/Premier tour de l'élection présidentielle 2007}}. Voyons maintenant comment employer ce modèle dans un article.

Une image complétée ne peut être insérée dans un article par la commande habituellement employée pour les images. Mais on peut obtenir le même résultat avec des commandes différentes.

Émuler la commande [[Fichier:...|right|...]]
Il suffit d'ajouter « float:right; » au « style » de la balise « <div> ».
Émuler la commande [[Fichier:...|thumb|right|...]]
On utilise les modèles {{Début d'illustration}}, {{Fin d'illustration}} :
{{Début d'illustration|right}}
{{Graphique/Politique/France/Premier tour de l'élection présidentielle 2007}}
{{Fin d'illustration
|French presidential election 2007 1st 180°.svg
|Répartition de l'échiquier politique
au sortir du premier tour de l'[[Élection présidentielle française de 2007]].
}}
Émuler la commande [[Fichier:...|thumb|center|...]]
Le paramètre 1 de {{Début d'illustration}} est laissé vierge (« none ») et on centre :
<center>{{Début d'illustration}}
{{Graphique/Politique/France/Premier tour de l'élection présidentielle 2007}}
{{Fin d'illustration
|French presidential election 2007 1st 180°.svg
|Répartition de l'échiquier politique
au sortir du premier tour de l'[[Élection présidentielle française de 2007]].
}}
</center>

Cliquez ici pour purger le cache

Faire un modèle

modifier

Pourquoi faire un modèle ?

modifier

Faire un modèle peut sembler inutile et même absurde pour un seul usage ; mais cela présente de multiples avantages et un très faible surcroit de travail.

Donc faire un modèle n'est nullement une obligation ; à vous de voir.

Comment faire le modèle ?

modifier

Voici un code minimal à employer. Il faudra renseigner les deux à compléter avant de prévisualiser. Les liens de la documentation fournissent les liens utiles.

Un code minimal à copier-coller
{{Début de carte}}[[Fichier:<à compléter>|300px|<à compléter>]]<!--{{Grille/2%}}-->
<!--
{{Étiquette|<y>|<x>|<lien>|<alignement du lien>|<positionnement>}}
-->
{{Fin de carte}}<noinclude>
{{Documentation d'image complétée}}
</noinclude>

Les modèles {{Début d'incrustation|coin}} et {{Fin d'incrustation}} permettent de placer dans un coin de l'image (les coins sont des directions : ne, se, so, so) une échelle, une légende quelconque ou plus couramment le modèle {{Tnavbar}} grâce auquel on accèdera rapidement au modèle depuis l'article. Voici un patron plus complet qui inclut ce modèle :

Un code plus complet
{{Début de carte}}[[Fichier:<à compléter>|{{{largeur|300}}}px|{{{légende|<à compléter>}}}]]<!--{{Grille/2%}}-->
{{Début d'incrustation}}{{Tnavbar|{{SUBST:PAGENAME}}|nodiv=1|mini=1}}{{Fin d'incrustation}}
<!--
{{Étiquette|<y>|<x>|<lien>|<alignement du lien>|<positionnement>}}
-->
{{Fin de carte}}<noinclude>
{{Documentation d'image complétée
|bandeau=<!--{{Ébauche modèle}}{{Modèle pas fini}}{{Accessibilité à corriger}}-->
|description=<!--informations complémentaires-->
}}
</noinclude>


  1. a b et c Les termes « carte » et « toponyme » viennent du fait que le procédé « d'image complétée » a d'abord été conçu pour la géolocalisation sur une carte.
  2. Ici J'ai employé les 8 directions pour montrer chacun des rendus et tester le modèle ; mais esthétiquement, ce n'est pas la meilleure solution.