====== 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 [[https://pixabay.com/|Pixabay.com]] pour les photos et [[https://openclipart.org/|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. Utiliser une image sans avoir de droits dessus vous expose à des poursuites judiciaires. N'utilisez pas d'image sans être certain d'avoir les droits pour le faire. [[admin@liev.re|Contactez-nous]] en cas de doute. Nous pouvons vous aider à comprendre les droits d'utilisations des images et à vous trouvez des alternatives. L'envoi de nouveaux fichier vers le wiki se fait lorsqu'on écrit un article en cliquant sur cette icone : {{http://khaganat.net/wikhan/lib/images/toolbar/image.png}} 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 [[https://www.dokuwiki.org/fr:exif|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 ===== {{page>wiki:syntax#images_et_autres_fichiers&noheader}} ===== 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. {{:wiki:dokuwiki-128.png}} 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}} {{:wiki:dokuwiki-128.png?direct}} Pour qu'un clic sur l'image ne fasse rien, il suffit d'ajouter nolink : {{:wiki:dokuwiki-128.png?nolink}} {{:wiki:dokuwiki-128.png?nolink}} Pour n'avoir qu'un lien vers l'image : {{:wiki:dokuwiki-128.png?linkonly}} {{:wiki:dokuwiki-128.png?linkonly}} Pour que le lien de l'image mène vers ce que vous voulez : [[http://khaganat.net|{{:wiki:dokuwiki-128.png}}]] [[http://khaganat.net|{{:wiki:dokuwiki-128.png}}]] ===== Ajouter un cadre et une légende ===== {{:wiki:dokuwiki-128.png?200|Icône image basique}}Légende de l'image * [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// : {{:wiki:dokuwiki-128.png?200|Icône image basique}}Légende de l'image ===== Créer une galerie ===== Grâce au plugin [[https://www.dokuwiki.org/plugin:gallery|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 [[http://fr.wikipedia.org/wiki/Media_RSS|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 [[http://tinyurl.com|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 ^ | ''////x////'' | ''%%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. | | ''////X////'' | ''%%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''. | | ''////'' | ''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. | | ''=////'' | ''=0'' | Limite le nombre d'image à la valeur indiqué. 0 pour toutes. | | ''+////'' | ''+0'' | Saute les premières images (suivant le nombre). Utile avec l'option ci-dessus. | | ''~////'' | ''~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é. | ===== Créer un diaporama (slider) ===== Grâce au plugin [[https://www.dokuwiki.org/plugin:slider|Slider]], on peut réaliser un diaporama défilant automatiquement. Les diapositives doivent commencer par un élément ''''. Cet élément peut contenir une image (interne ou externe) qui sera affichée comme fond de la diapositive. On peut aussi ajouter d'autres éléments (syntaxe DokuWiki), qui seront affichés par dessus l'image, permettant d'ajouter des légendes, de réaliser l'équivalent d'une présentation basique. La dernière diapositive doit être terminée avec un élément ''''. Exemple de code pour un diaporama simple : Résultat : Exemple de code pour une "présentation" : **Un titre** Et quelques mots. Cette diapositive n'a pas d'image, juste du texte. **Un titre** Et quelques mots. Cette diapositive n'a pas d'image, juste du texte.