Images
Autheurs (basique) Vous trouverez ici des informations sur la manière d'intégrer des images dans vos pages wiki, qu'elles proviennent du wiki lui-même ou de sites web externes.
Utilisation de base
Pour placer une image dans une page, télécharger l'image en utilisant le balisage "Attach:", ou entrez l'adresse (url) de l'image dans le texte du balisage.
N'importe quel texte alternatif (utilisé pour les infobulles et pour les navigateurs qui n'affichent pas les images) est placé entre guillemets immédiatement après l'URL de l'image.
Une légende peut suivre, séparée par une barre verticale (|), et peut inclure une mise en forme simple.
https://pmichaud.com/img/misc/pc.jpg"Trombones" | [- %newwin% [[ Wikipedia:Paper_clips | Les trombones ]] sont ''amusants'' à utiliser. -] |
Les images peuvent également être spécifiées sous forme de fichiers upload (par exemple, Attach:image.jpeg) et via des liens InterMap.
Par défaut, PmWiki prend en charge les types d'images suivants pour l'intégration dans la page :
gif, jpg, jpeg, png, apng, webp, svg, svgz, avif, avifs
(Voir aussi Uploads et Notes ci-dessous pour les fichiers image sans extension.)
Pour créer un lien sur une image (comme http://www.pmichaud.com/img/misc/pc.jpg par opposition à l'affichage de l'image en elle-même), utilisez les doubles crochets pour marquer le lien, comme [[http://www.pmichaud.com/img/misc/pc.jpg]] ou [[Attach:image.jpg]].
Pour que l'image effectue le lien vers une autre adresse, utilisez l'image comme texte de lien comme
[[https://pmwiki.org/ | https://pmichaud.com/img/misc/pc.jpg"PmWiki"]] |  |
or [[https://example.com|Attach:Groupname./image.jpeg]].
Infobulle ou texte alternatif
Une infobulle, ou texte alternatif, peut s'afficher lorsque le curseur survole l'image. Pour cela, placez la description entre guillemets juste après l'URL de l'image. La description ne doit contenir aucune mise en forme.
https://pmichaud.com/img/misc/pc.jpg"Trombones de couleur" | |
Légendes
Une légende peut être ajoutée à une image à l'aide d'une barre verticale et du texte de la légende.
https://pmichaud.com/img/misc/pc.jpg | '''Figure 1''' | Figure 1 |
Alignement des images
Normalement, les images sont affichées "en ligne" avec le texte environnant.
Utilisez %center% pour centrer une image sur son propre paragraphe, %right% pour l'aligner à droite.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. %center%https://pmichaud.com/img/misc/pc.jpg"Trombones"%% | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
Images flottantes
Pour aligner une image à gauche ou à droite et enrouler le texte autour, utilisez %lfloat% ou %rfloat% wiki styles.
%lfloat text-align=center margin-top=5px margin-right=25px margin-bottom=5px margin-left=25px% https://pmichaud.com/img/misc/gem.jpg | '''Rock on!''' '''L'image est alignée à gauche, avec des marges définies ; la légende est centrée ; le texte s'enroule à droite de l'image.''' Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |  Rock on! L'image est alignée à gauche, avec des marges définies ; la légende est centrée ; le texte s'enroule à droite de l'image. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Le balisage [[<<]] interrompt le texte flottant et le texte continue au bas de l'image.
%lfloat% https://pmichaud.com/img/misc/gem.jpg '''L'image est alignée à gauche et le texte s'enroule sur le côté droit de l'image. Le texte après le balisage ''[@[[<<]]@]'' continue sous l'image.''' [[<<]] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | L'image est alignée à gauche et le texte s'enroule sur le côté droit de l'image. Le texte après le balisage |
Utilisez les styles %lframe% ou %rframe% pour faire flotter une image et ajouter un cadre autour de l'image et de sa légende. Le cadre peut être formaté via wikistyles :
%rframe% https://pmichaud.com/img/misc/gem.jpg | '''Rock on!''' '''L'image est alignée à droite et le texte s'affiche à gauche de l'image.''' Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Rock on! L'image est alignée à droite et le texte s'affiche à gauche de l'image. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
%cframe width=100px bgcolor=lightblue border='3px solid red' padding=20px% https://pmichaud.com/img/misc/gem.jpg | |
Exemple illustrant l'échec de l'application complète du paramètre de largeur :-
%cframe width=50px bgcolor=lightblue border='3px solid red' padding=20px% https://pmichaud.com/img/misc/gem.jpg | |
Utilisez %block rframe% pour mettre en évidence plusieurs images et un texte de légende à empiler verticalement dans un cadre flottant à droite.
%block rframe width=300px%https://pmichaud.com/img/misc/gem.jpg\\ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\\\ https://pmichaud.com/img/misc/bubble.jpg\\ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.%% Le texte qui suit le bloc défini s'affiche à gauche du cadre. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Le texte qui suit le bloc défini s'affiche à gauche du cadre. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Redimensionnement d'images
Pour redimensionner une image via les wikistyles, utilisez %width=50px% ou %height=50px% devant l'image. Le wikistyle %thumb% est un raccourci pratique pour %width=100px%.
%width=50px% https://pmichaud.com/img/misc/bubble.jpg \ %height="50px"% https://pmichaud.com/img/misc/bubble.jpg \ %width=10pct% https://pmichaud.com/img/misc/bubble.jpg %comment% pct signifie "pourcentage" dans pmwiki \ %thumb% https://pmichaud.com/img/misc/bubble.jpg %comment%[@ %thumb% est un raccourci pour %width=100px% @] |
| |
Remarque : Redimensionner une image via wikistyles n’affecte que son affichage dans un navigateur ; cela ne réduit pas sa taille de transfert. Par conséquent, le redimensionnement via wikistyles n’est pas une méthode acceptable pour générer une page remplie d’images, ou 'galerie'.
Si vous souhaitez insérer une image redimensionnée dans un lien, vous devez spécifier sa taille avant le lien et l’encadrer avec %%.
%width=60%[[https://pmwiki.org/ | https://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%% \ %height=60%[[https://pmwiki.org/ | https://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%% \ |
| |
Pour ouvrir le lien dans une nouvelle fenêtre, placez %newwin% avant la spécification de la taille.
%newwin%[[https://pmwiki.org/ | https://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%% |
|
Les images redimensionnées à l'aide de %thumb% peuvent également être intégrées à des cadres ou transformées en liens.
%lframe thumb% [[https://pmichaud.com/img/misc/bubble.jpg | https://pmichaud.com/img/misc/bubble.jpg"Éclater la bulle"]] | [-Bulle-] %lframe thumb% https://pmichaud.com/img/misc/pc.jpg"Couper le ticket" | [-Trombones-] %lframe thumb% [[DocumentationIndex | https://pmichaud.com/img/misc/gem.jpg"Consulter l'index de la documentation"]] | [[DocumentationIndex | [-Rock On-]]] |
Bulle Trombones |
Images comme links
Pour utiliser une image comme lien, spécifiez une image au lieu de texte dans le balisage link.
[[PmWiki/Links | https://pmichaud.com/img/2003/atc-1.gif"Informations sur les liens wiki"]] |
 |
Notes
- Un fichier image sans extension correcte peut être affiché en ajoutant une extension "fictive" à l'URL. Par exemple, si l'URL est
https://example.com/script/tux, ajoutez une chaîne de requête factice à la fin avec l'extension souhaitée (par exemple,https://example.com/script/tux?format=.png). Si les chaînes de requête ne conviennent pas, un identifiant de fragment devrait fonctionner, par exemplehttps://example.com/script/tux#file.png. - La largeur relative est possible grâce à l'utilisation de pourcentages.
%width=10pct% https://pmichaud.com/img/misc/bubble.jpg \ %height=30pct% https://pmichaud.com/img/misc/bubble.jpg |
| |
- Il est possible d'insérer du texte, comme des légendes, dans un cadre
>>lframe width=130px<< %thumb width=130% [[https://pmichaud.com/img/misc/bubble.jpg | https://pmichaud.com/img/misc/bubble.jpg"Éclater la bulle"]] | [--Légende longue pour une image comme [[https://pmichaud.com/img/misc/bubble.jpg | la bulle]]. Ceci sert simplement à montrer du texte s'insérant dans le cadre.--] >><< |
Légende longue pour une image comme la bulle. Ceci sert simplement à montrer du texte s'insérant dans le cadre. |
Voir aussi
- Media -
- Cookbook:Images - ajout de galeries d'images, de vignettes automatiques, d'images d'arrière-plan et plus encore.
Crédits
Les images de cette page proviennent de https://flickr.com et sont redistribuées sous licence Creative Commons.
FAQ
Pourquoi certaines images externes sont-elles correctement intégrées et d’autres non ?
Si la page actuelle se trouve sur une URL sécurisée avec le protocole "https://", certains navigateurs refusent de charger les images provenant d’URL non sécurisées (l’inverse est autorisé). De plus, certains webmasters configurent leurs serveurs pour interdire le hotlinking.
Est-il possible d’insérer un lien vers une image sur PmWiki sans utiliser d’URL complète ?
Oui. Pour les images jointes, le format général est Attach:Groupname./image.gif. Pour insérer un lien vers une image hébergée sur le même serveur, utilisez Path:/chemin/vers/image.gif où "Path:" remplace le nom du serveur, par exemple "https://www.example.com".
Puis-je joindre un fichier image client sur PmWiki ?
Oui, voir Uploads.
Comment inclure une image dont le nom contient des espaces ?
Échappez le nom de l'image avec le balisage [=nom_de_l'image=].jpg.
Comment inclure une page d'un autre groupe contenant une image jointe ?
Incluez la page normalement, c'est-à-dire : `(:include GroupName.Pagename:)`. Dans la page à inclure (celle qui contient l'image), remplacez Attach:filename.ext par Attach:{$Group}./filename.ext.
Pourquoi, lorsque j'insère une image avec rframe ou rfloat et que j'ouvre immédiatement après une nouvelle section de page avec !, le titre de la section s'affiche-t-il sous l'image au lieu d'être à gauche ?
Parce que le CSS des headings, comme !, contient l'élément clear:both qui impose ce comportement. Redéfinissez le CSS localement si vous souhaitez éviter cela, mais je pense que la bordure inférieure (qui souligne le titre) devra également être redéfinie. J'utilise simplement le gras pour le titre et 4 tirets en dessous de ---- pour séparer une nouvelle section, ce qui évite d'avoir à modifier les définitions principales.
Contrairement aux directives lframe et rframe, cframe ne tient pas entièrement compte de la largeur définie. Bien que le cadre lui-même s'adapte à la requête, l'image qu'il contient conserve sa largeur d'origine. Le comportement est identique sous Internet Explorer et Firefox. J'ai ajouté un exemple sous l'exemple standard ci-dessus.
Est-il possible de désactiver toutes les images ? J’ai déjà désactivé les chargements, mais je souhaite également empêcher l’affichage d’images externes sur mes pages wiki.
Oui, ajoutez à config.php :
DisableMarkup('img');
$ImgExtPattern = "$^";
Comment faire pour que, lorsque j'insère une image dans une page, le bloc de texte qui la contient soit un paragraphe (<p>) plutôt qu'une division (<div>) ?
Si vous souhaitez que cela ne s'applique qu'à une seule image (et non à toutes),
essayez d'ajouter [==] au début de la ligne, comme ceci :
[==] https://www.pmwiki.org/pub/pmwiki/pmwiki-32.gif
L'ajout de [==] au début d'une ligne force le texte qui suit à
faire partie d'un paragraphe.
Est-il possible d’utiliser des chemins relatifs pour les images ?
Consultez le guide : Cookbook:RelativeLinks et $EnableLinkPageRelative.
Est-il possible de joindre une image BMP et de l'afficher plutôt que de créer un lien ?
Ajoutez la ligne suivante à config.php :
$ImgExtPattern = "(?:$ImgExtPattern|\\.bmp|\\.BMP)";
Notez que les images BMP ne sont pas compressées et sont assez volumineuses. Vous pouvez les convertir au format PNG (sans perte) ou JPG (avec perte) afin de réduire leur taille de 5 à 20 fois.
Comment ajouter un type d’image à $ImgExtPattern
Vous pouvez ajouter les extensions à la variable $ImgExtPattern
$ImgExtPattern = "(?:$ImgExtPattern|\\.webp|\\.WEBP)";Est-il possible d’afficher un tableau à gauche ou à droite d’une image ?
Oui, voir TableAndImage.
Traduction de PmWiki.Images
Page originale sur PmWikiFr.Images - Référencé par
Dernières modifications:
PmWikiFr.Images: 12 June 2026 à 08h07
PmWiki.Images: 25 April 2026 à 13h04