Syntaxe pour les images

Ajouter des images

Avant toute chose, vérifiez que l'image dont vous avez besoin n'existe pas déjà sur le wiki.

Vérifiez aussi que vous avez les droits pour utiliser l'image. Soit c'est une image que vous avez réalisé vous-même, soit elle est placée sous une licence qui permet la réutilisation y compris dans un cadre commercial (c'est le cas ici).

  • Pour des images génériques, les sites Pixabay.com pour les photos et Openclipart.org pour les dessins sont très bien : tout y est sous licence CC0 (domaine public) et il y a un vaste choix. Ne prenez pas des images sur le net sans savoir précisément d'où elles viennent et si les auteurs sont d'accord pour qu'elles soient réutilisées.
  • Sinon, préférez des photos que vous avez pris vous-même et précisez bien la licence. Contactez-nous en cas de doute.

L'envoi de nouveaux fichier vers le wiki se fait lorsqu'on écrit un article en cliquant sur cette icone : dans la barre d'outils. Cela va ouvrir le gestionnaire de média dans une autre fenêtre. On peut aussi l'ouvrir directement avec le lien “Gestionnaire Multimédia” en bas du site qui liste les images.

Faites Sélection de fichiers, choisissez votre image, renommez-la au besoin mais sans changer son extension, puis cliquez sur Télécharger et enfin sur Terminé. Vous pouvez ajoutez plusieurs images en une fois, il suffit de répéter cette opération. Enfin, cliquez sur l'image, sélectionnez les options (alignement, taille…) et c'est dans votre article ! Vous pouvez aussi naviguer dans l'arborescence de cette fenêtre (sur la gauche) pour voir les images dans chaque espace de nom. Pour la mise en page de votre image il faut maîtriser la syntaxe (chapitre suivant).

Les images sont limités en taille (2Mb actuellement), essayez de les faire aussi légères que possible. Si votre image est en jpg, vous pouvez renseigner dans le gestionnaire de média des balises méta EXIF : titre, légende, auteur, licence. Le jpg est souvent plus léger que le png mais il ne gère pas les effets de transparences.

Syntaxe de base

Vous pouvez inclure des images externes et internes avec des accolades. Vous pouvez spécifier leur taille (facultatif).

Taille réelle :

Redimensionnement à une largeur donnée :

Redimensionnement à une largeur et une hauteur données1) :

Image externe redimensionnée :

Taille réelle :                                          {{wiki:dokuwiki-128.png}}
Redimensionnement à une largeur donnée :                 {{wiki:dokuwiki-128.png?50}}
Redimensionnement à une largeur et une hauteur données : {{wiki:dokuwiki-128.png?200x50}}
Image externe redimensionnée :                           {{http://de3.php.net/images/php.gif?200x50}}

En utilisant des espaces à gauche ou à droite, vous pouvez choisir l'alignement.

{{ wiki:dokuwiki-128.png}}
{{wiki:dokuwiki-128.png }}
{{ wiki:dokuwiki-128.png }}

Bien sûr, vous pouvez aussi ajouter un titre (affiché comme une bulle d'aide par la plupart des navigateurs).

Ceci est le titre

{{ wiki:dokuwiki-128.png |Ceci est le titre}}

On peut proposer une image en téléchargement sans l'afficher, en utilisant ?linkonly après le nom de l'image

le logo de DokuWiki

{{ wiki:dokuwiki-128.png?linkonly|le logo de DokuWiki}}

Si vous spécifiez un nom de fichier (externe ou interne) qui n'est pas une image (gif, jpeg, png), alors il sera affiché comme un lien et non comme une image.

Pour lier une image à une autre page, voir Liens images ci-dessus.

2017/08/16 10:23

Liens

Par défaut, cliquer sur une image affiche sa page de détail avec une version grand format et les métadonnées EXIF. Un clic sur l'image dans cette page et vous verrez seulement l'image sur le fond de votre navigateur.

Vous pouvez supprimer l'étape de la page de détail en affichant directement l'image originale lorsque vous cliquez sur l'image insérée dans votre document. Cela s'appelle un “lien direct”. Pour activer ce lien direct, ajoutez le paramètre direct comme ceci :

{{:wiki:dokuwiki-128.png?direct}}

2)

Pour qu'un clic sur l'image ne fasse rien, il suffit d'ajouter nolink :

{{:wiki:dokuwiki-128.png?nolink}}

Pour n'avoir qu'un lien vers l'image :

{{:wiki:dokuwiki-128.png?linkonly}}

dokuwiki-128.png

Pour que le lien de l'image mène vers ce que vous voulez :

[[http://khaganat.net|{{:wiki:dokuwiki-128.png}}]]

Ajouter un cadre et une légende

<WRAP center box [taille] [alignement]>{{:wiki:dokuwiki-128.png?200|Icône image basique}}Légende de l'image</WRAP>
  • [taille] peut être exprimé en px (largeur fixe) ou en pourcentage.
  • [alignement] peut avoir comme valeur leftalign, rightalign, centeralign, justify, ce qui se verra surtout avec du texte autour.

Exemple avec 220px et centeralign :

Icône image basiqueLégende de l'image

Créer une galerie

Grâce au plugin Gallery il est possible d'afficher une liste d'image contenu dans un espace de nom et de façon récursive (avec l'option), sous forme de miniatures ou à diverses tailles.

{{gallery>:namespace}}

Vous pouvez les aligner avec un espace, bien qu'au delà de trois miniatures, ça aie peu d'intérêt :

{{gallery> :namespace}} (aligné à droite)
{{gallery>:namespace }} (aligné à gauche)
{{gallery> :namespace }} (centré, par défaut)

Au lieu d'un espace de nom, vous pouvez aussi donner une URL HTTP d'un flux Media RSS ou ATOM:

{{galerie> http://www.23hq.com/rss/schabloni}}

L'URL ne peut contenir aucun point d'interrogation. Si c'est le cas, il suffit d'utiliser un service de racourcisseur d'url comme tinyurl.

Pour afficher la galerie avec des options, ajoutez un ? à la fin et séparez ensuite chaque argument par un &. Pour désactiver un argument existant par défaut (comme lightbox) il suffit d'ajouter no devant (donc ici nolighbox)

{{gallery>:namespace?5&random}}
{{galerie> http://www.23hq.com/rss/schabloni?5&nolighbox}}
Paramètre Défaut Description
<number>x<number> 120x120 Définit la taille des vignettes. Sauf si l'option crop est activée, il s'agit de la taille maximum dans laquelle la vignette sera affichée, en conservant le même ratio.
<number>X<number> 800X600 Définit la taille des images liées au mode direct. Il s'agit de la taille maximum dans laquelle la vignette sera affichée, en conservant le même ratio. Notez la majuscule X.
<number> 5 Le nombre d'image par ligne. Si la valeur est à 0 ça n'est pas comme si vous ne précisez rien. Un conseil, laissez tomber cette option.
=<number> =0 Limite le nombre d'image à la valeur indiqué. 0 pour toutes.
+<number> +0 Saute les premières images (suivant le nombre). Utile avec l'option ci-dessus.
~<number> ~0 Nombre de vignettes donnés par page. 0 désactive la pagination. La pagination est ajouté par JavaScript - en l'absence de JavaScript toutes les vignettes sont affichées en une fois
cache activé Habituellement, la galerie créée est mise en cache. Lorsque les images de votre espace de nom changent, vous devez forcer manuellement une mise à jour du cache. Pour désactiver le cache de la page montrant la galerie, mettez nocache en option.
crop désactivé Recadre les miniatures exactement à la taille choisie, quitte à déformer les images.
direct désactivé Le lien de la vignette affiche l'image seule dans sa taille originelle (si lightbox n'est pas actif).
lightbox activé Affiche les images dans une fenêtre de navigation JavaScript, voir ci-dessous pour plus de détails. La définition de cette option implique automatiquement le mode direct
reverse désactivé Inverse l'ordre des images affichées
recursive activé Trouve les images dans l'espace de nom donné et tous les sous-espaces de noms
random désactivé Trie les images au hasard. Bien plus intéressant lié à l'option nocache
modsort désactivé Trie les images par date de modification du fichier
datesort désactivé Trie les images par date EXIF
titlesort désactivé Trie les images par le titre EXIF
showname désactivé Affiche le nom du fichier sous les miniatures
showtitle désactivé Affiche le tag Titre EXIF comme titre sous la vignette
* jpg,gif,png images Utilisé comme joker pour sélectionner certains fichiers dans un espace de nom donné.
1)
Si les proportions de l'image ne sont pas respectées, celle-ci sera «découpée» avant redimensionnement selon les nouvelles proportions
2)
Oui, machin. J'avais envie de variété.
wiki/image.txt · Dernière modification: 2018/09/19 11:09 par Amalya