Castel'Lab le Fablab MJC de Château-Renault

Outils pour utilisateurs

Outils du site

Piste :
start:ajouter_image

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
start:ajouter_image [2017/10/25 18:11] – gerardadminstart:ajouter_image [2023/01/27 16:07] (Version actuelle) – modification externe 127.0.0.1
Ligne 1: Ligne 1:
 +======== Comment ajouter une image ou un fichier ========
 +
 +    * [[https://www.dokuwiki.org/fr:images|Aide dokuwiki : ajout d'images ou de médias]]
 +
 +===== Images et médias =====
 +
 +Vous pouvez inclure des images et d'autres fichiers dans les pages de [[https://www.dokuwiki.org/fr:dokuwiki|DokuWiki]] avec [[https://www.dokuwiki.org/fr:wiki:syntax#images_et_autres_fichiers|la syntaxe d'image.]] Alors que les images, vidéos et fichiers audio sont affichés directement sur la page, les autres fichiers (comme les documents PDF) sont simplement liés au document. Veuillez vous référer à la page sur les types mime pour plus d'information.
 +
 +===== Envoi de documents =====
 +
 +Le Gestionnaire de média
 +
 +L'envoi de nouveaux fichiers vers le wiki se fait via [[https://www.dokuwiki.org/fr:media_manager|le Gestionnaire de média]] que l'on appelle depuis la barre d'outils disponible en mode édition.
 +
 +Utilisez simplement le formulaire d'envoi situé en haut à droite. Vous pouvez donner un nouveau nom à votre fichier mais dans ce cas, n'oubliez pas de conserver son extension ! Si vous y ajoutez de nouvelles [[https://www.dokuwiki.org/fr:namespaces|catégories]], elles seront créées automatiquement.
 +
 +[[https://www.dokuwiki.org/fr:fullscreen_mediamanager|Le gestionnaire de médias pleine page]] permet également d'envoyer des images. Par ailleurs, il peut afficher les différentes révisions des médias et en éditer les métadonnées.
 +
 +Remarque : si l'administrateur a activé les [[https://www.dokuwiki.org/fr:acl|ACL]], l'envoi de fichier peut être réservé à certains utilisateurs. Ceux qui n'ont pas la permission ne voient pas le formulaire d'envoi de fichiers.
 +
 +
 +===== Affichage =====
 +
 +Utilisez ''%%{{}}%%'' pour afficher vos médias dans les pages.
 +
 +  {{wiki:dokuwiki-128.png}}
 +  {{wiki:text2html.rc}}
 +
 +Une image {{wiki:dokuwiki-128.png?30}} est affichée et les autres médias {{ :start:text2html.rc.zip }} sont présentés sous la forme d'un lien et d'une icône correspondante.
 +
 +Vous pouvez utiliser ''|'' pour ajouter un titre à votre média
 +
 +  {{wiki:dokuwiki-128.png|Le logo de DokuWiki}}
 +
 +{{wiki:dokuwiki-128.png?30|le logo de DokuWiki}} Survolez l'image pour faire apparaître le titre dans une bulle.
 +
 +Comment les images sont présentées est influencé par divers paramètres. On indique les paramètres dans le style des URL, en ajoutant un point d'interrogation et en les séparant par des esperluette (&).
 +
 +===== Alignement ===== 
 +
 +Vous pouvez aligner les médias avec des espaces à gauche ou à droite :
 +
 +{{ wiki:dokuwiki-128.png}}
 +{{wiki:dokuwiki-128.png }}
 +{{ wiki:dokuwiki-128.png }}
 +
 +  {{ wiki:dokuwiki-128.png}}
 +  {{wiki:dokuwiki-128.png }}
 +  {{ wiki:dokuwiki-128.png }}
 +
 +===== Redimensionnement =====
 +
 +DokuWiki peut redimensionner les images de deux façons. Par défaut, c'est la bibliothèque GD de PHP qui est utilisée si elle est installée. De meilleurs résultats peuvent être obtenus avec [[http://www.imagemagick.org/script/index.php|imagemagick]].
 +
 +Avec GD, le redimensionnement peut parfois échouer si les images sont très grosses ou que le format n'est pas supporté par la version de GD installée.
 +
 +Pour redimensionner des images externes, elle doivent être mises en cache sur votre serveur. Vous devez autoriser DokuWiki à les télécharger en augmentant le paramètre de configuration [[https://www.dokuwiki.org/fr:config:fetchsize|fetchsize]] qui est à zéro par défaut.
 +
 +Pour redimensionner une image en conservant ses proportions, indiquez simplement sa largeur en pixels :
 +
 +  {{wiki:dokuwiki-128.png?20}}
 +
 +{{wiki:dokuwiki-128.png?20 }} Cette image est réduite à une largeur de 20 pixels.
 +
 +Pour redimensionner une image en donnant sa taille verticale, il faut indiquer 0 comme taille horizontale :
 +  {{wiki:dokuwiki-128.png?0x20}}
 +
 +{{wiki:dokuwiki-128.png?0x20 }} Cette image est réduite à une hauteur de 20 pixels.
 +
 +Quand vous indiquez la largeur ET la hauteur, l'image sera redimensionnée exactement à la hauteur indiquée, sans tenir compte des proportions.
 +
 +  {{wiki:dokuwiki-128.png?20x50}}
 +
 +{{wiki:dokuwiki-128.png?20x50 }} Cette image est redimensionnée à une largeur de 20 pixels et une hauteur de 50 pixels.
 +
 +A partir de la version 2009-02-14 de DokuWiki, indiquer la largeur ET la hauteur conserve les proportions en recadrant l'image si besoin.
 +
 +===== Liens =====
 +
 +Les images que vous insérez dans vos pages peuvent être des liens pointant vers une page de "détail" ou l'image originale non redimensionnée. Vous pouvez aussi inclure des images qui ne sont pas des liens.
 +
 +Par défaut, cliquer sur une image affiche sa page de détail (qui correspond au fichier ''detail.php'' de votre [[https://www.dokuwiki.org/fr:template|thème]]). Le thème par défaut de DokuWiki affiche une version grand format, accompagnée du contenu des métadonnées EXIF et IPTC contenues dans l'image comme l'auteur, la légende, la date de prise de vue etc.
 +
 +La syntaxe suivante insère l'image dans la page à sa taille originale. Lorsque l'on clique dessus, on obtient une page de détail avec les métadonnées de l'image :
 +
 +  {{wiki:dokuwiki-128.png}}
 +
 +{{wiki:dokuwiki-128.png?20}} Cliquez sur cette image réduite pour voir sa page de détail
 +
 +Vous pouvez cliquer sur l'image de la page de détail pour afficher l'image originale. La plupart du temps, on insère une image réduite dans un document et sa page de détail présente une image de taille moyenne. Il faut alors recliquer dessus pour avoir l'image originale non redimensionnée.
 +
 +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?20&direct }} Cliquez sur cette image réduite pour voir directement la version originale
 +
 +Il est également possible d'insérer une image qui ne soit pas un lien. Il faut alors ajouter le paramètre ''nolink'' :
 +
 +  {{wiki:dokuwiki-128.png?nolink}}
 +
 +{{wiki:dokuwiki-128.png?20&nolink }} Essayez de cliquer sur cette image ; pas évident hein ?
 +
 +Il est possible de combiner les paramètres avec une esperluette (&) :
 +
 +  {{wiki:dokuwiki-128.png?nolink&100}}
 +
 +{{wiki:dokuwiki-128.png?nolink&100}}
 +
 +Si vous voulez juste fournir un lien textuel pointant vers l'image, utilisez le paramètre ''linkonly'' :
 +
 +  {{wiki:dokuwiki-128.png?linkonly}}
 +
 +{{wiki:dokuwiki-128.png?linkonly}} Ceci est un lien textuel vers l'image 
 +
 +==== Utilisation depuis en dehors du wiki ====
 +
 +Il est possible d'utiliser les images du dépôt DokuWiki en dehors du wiki. Par exemple, vous pouvez vouloir réutiliser ces images depuis des pages en HTML, depuis du HTML embarqué dans vos page avec la balise <HTML>, ou depuis une feuille de style CSS.
 +
 +En gros, il suffit de copier le code généré par DokuWiki, mais vous ne pouvez pas utiliser le redimensionnement. L'URL généré a généralement trois paramètres, media, w et tok. w sert à redimensionner l'image, mais il ne fonctionne que si tok est également indiqué. En d'autres mots, on ne peut donner que le paramère media de l'URL.
 +
 +Le paramètre tok change a chaque mise à jour de l'image, et ne peut donc être utilisé de manière fiable.
 +
 +exemple, dans une feuille de style
 +
 +<code css exemple>
 +div.personal_info {
 +  ...
 +  background-image:  url('{/chemin_vers_dokuwiki}/lib/exe/fetch.php?media=name:space:mypic.png');
 +}
 +</code>
 +
 +
 +===== Images dynamiques =====
 +
 +Il est parfois nécessaire d'afficher des images dynamiques comme [[http://kalsey.com/tools/buttonmaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54|celle-ci]].
 +
 +En utilisant la méthode standard :
 +
 +  {{http://kalsey.com/tools/buttonmaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54}}
 +  
 +cela ne marche pas :
 +
 +{{http://kalsey.com/tools/buttonmaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54}}
 +
 +Ceci est dû au fait que, pour [[https://www.dokuwiki.org/dokuwiki#|DokuWiki]], une image doit se terminer par ''.gif'',''.jpg'' ou ''.png'' ; mais celle-ci se termine par ''.php''. L'astuce est d'ajouter par exemple ''&.png?'' à la fin de l'URL -- DokuWiki saura alors qu'il s'agit d'une image.
 +
 +{{http://kalsey.com/tools/buttonmaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54&.png?}}
 +
 +  {{http://kalsey.com/tools/buttonmaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54&.png?}}
 +  
 +Au passage, vous trouverez de bons outils pour faire des boutons ici :
 +
 +  * http://kalsey.com/tools/buttonmaker/
 +
 +===== Supprimer un fichier média =====
 +
 +Pour supprimer un fichier média, la [[https://www.dokuwiki.org/fr:acl|liste de contrôle d'accès]] doit être activée et l'utilisateur qui souhaite supprimer l'image doit avoir la permission "Supprimer". L'image peut ensuite être supprimée avec l'icône en forme de poubelle.
 +
 +Voir aussi: [[https://www.dokuwiki.org/faq:deletemedia|deleting media files]] (en anglais)
 +
 +
 +===== Liens image =====
 +
 +Pour que le lien d'une image pointe vers un autre site ou une page spécifique de votre wiki, insérez le code de l'image à l'endroit habituellement réservé pour le titre d'un lien :
 +
 +Exemple:  [[http://www.google.com|{{wiki:dokuwiki-128.png}}]]
 +  Exemple:  [[http://www.google.com|{{wiki:dokuwiki-128.png}}]]
 +
 +Si le lien renvoie vers un média local, vous pouvez utiliser la syntaxe suivante :
 +
 +  [[this>_media/media_local|{{wiki:dokuwiki-128.png}}]]
 +
 +Par exemple 
 +[[this>_media/wiki:dokuwiki-128.png|{{wiki:dokuwiki-128.png}}]]
 +
 +  [[this>_media/wiki:dokuwiki-128.png|{{wiki:dokuwiki-128.png}}]]
 +===== Mise en mémoire cache =====
 +
 +Afin d'optimiser les performances, DokuWiki essaie de mettre en mémoire cache les images externes. Si vous voulez utiliser une image externe sans qu'elle soit mise en cache, vous pouvez ajouter le paramètre ''nocache'' :
 +
 +  {{http://de3.php.net/images/php.gif?nocache}}
 +
 +Vous pouvez bien évidemment combiner ce paramètre avec d'autres, comme le redimensionnement.
 +
 +  {{http://de3.php.net/images/php.gif?300x50&nocache}}
 +
 +Effectuer une requête sur un serveur externe à chaque chargement de page n'est pas très respectueux. Vous pouvez donc utiliser le paramètre ''recache'', pour laisser dokuwiki remettre l'image en mémoire cache en utilisant l'intervalle spécifié dans le paramètre de configuration [[fr:config:cachetime]] :
 +
 +  {{http://de3.php.net/images/php.gif?recache}}
 +  
 +  ========== Statistiques ========
 +
 +~~NOCACHE~~ 
 +Cet page a été consultée : Aujourd'hui: {{counter|today}}  Hier: {{counter|yesterday}}  Jusqu'à maintenant: {{counter|total}}
 +
 +
 +