Manual:Images liées

This page is a translated version of the page Manual:Linked images and the translation is 100% complete.

Les images sur un wiki MediaWiki seront par défaut, liées à la page de description, pour que les informations de droits d'auteur, l'historique des téléversements, les contributeurs, et pour que les versions complètes des résolutions soient directement disponibles à l'utilsateur lorsqu'il clique sur une image.

Néanmoins il existe plusieurs solutions de contournement pour ceux qui en ont besoin.

Syntaxe link= disponible depuis la version 1.14

Les liens internes ou externes directs vers les images sont possibles en utilisant la syntaxe documentée sur Aide:Images .

Cette prise en charge native du lien vers l'image a été ajoutée dans MediaWiki v1.14 (r41727; voir b539). Les solutions et les extensions pour contourner le problème ne sont plus nécessaires.

Notez que link ne fonctionne pas avec thumb ni avec frame dans les versions antérieures à la 1.17.

Dans votre wikitexte :

[[Image:Wiki.png|50px|link=MediaWiki]]

Ceci produira une image de 50 pixels de largeur avec un lien vers la page MediaWiki :

 

Si vous utilisez le lien vide, on ne pourra plus cliquer sur l'image.

[[Image:Wiki.png|50px|link=]]

 

Anciens contournements d'avant la version 1.14 pour les installations de base

MediaWiki a été pendant longtemps conçu pour empêcher la manipulation manuelle des images dans le wikitexte car cela pouvait contourner l'opération du lien de description des pages : la balise ‎<img> ne figure pas intentionnellement dans la liste blanche de Sanitizer , et l'attribut CSS background-image non plus.

Les solutions suivantes furent implémentées dans ces anciennes versions.

CSS de site

Le méthode la plus simple, si vos besoins d'image externe sont spécifiques (c'est à dire restreints à une page ou une image), est d'ajouter une règle CSS à votre fichier MediaWiki:Common.css (ou aux autres fichiers CSS, tels que MediaWiki:Skinname.css ou /skins/skinname/main.css, etc) qui donnent aux fils les liens d'une certaine classe d'objet d'une image d'arrière plan. Cette méthode comporte aussi quelques points de sécurité à respecter car elle nécessite des modifications dans les fichiers CCS du site, ce qui signifie que seuls les administrateurs système peuvent modifier l'image affichée.

Par exemple (les sections en rouge sont les parties à configurer pour chaque image) :

Dans MediaWiki:Common.css :

.imagelink_somename a {
  width:100px;
  height:100px;
  display:block;
  text-decoration:none;
  background-image: url("https://fullurltoimage") 
}

Dans votre wikitexte :

<div class="imagelink_somename">[[Some link|&nbsp;]]</div>

Ce qui donnerait un lien vers l'image d'arrère-plan avec sa largeur et sa hauteur (à initialiser manuellement). Pour savoir où se trouve le fichier téléchargé, allez sur la page de description de l'image et cliquez sur cette image, puis recopiez-en le chemin à l'intérieur de la barre d'adresse.

Par exemple sur Image:Wiki.png, le chemin de l'image est http://upload.wikimedia.org/wikipedia/mediawiki/b/bc/Wiki.png (le format du chemin diffère selon les paramètres locaux de configuration), et la largeur et la hauteur seront de 135 sur 135 pixels. Donc pour faire un lien vers la page d'accueil ici, en utilisant ce logo, on peut ajouter ceci à MediaWiki:Common.css :

.imagelink_wikilogo a {
  width:135px;
  height:135px;
  display:block;
  text-decoration:none;
  background-image: url("https://upload.wikimedia.org/wikipedia/mediawiki/b/bc/Wiki.png") 
}

Ensuite utiliser le wikitexte :

<div class="imagelink_wikilogo">[[MediaWiki|&amp;nbsp;]]</div>

Ce qui donnera:

Vous pouvez aussi utiliser la vignette d'une image, mais assurez-vous que cette vignette est utilisée ailleurs, car la plupart des installations ne sont pas configurées pour générer les vignettes à la demande.

CSS en ligne

Vous pouvez aussi essayer de superposer un lien invisible sur une image en utilisant le CSS comme cela est fait dans w:Template:Click. Un exemple de click typique est :

<div style="position: relative; width: {{{width}}}; height: {{{height}}}; overflow: hidden;">
<div style="position: absolute; top: 0px; left: 0px; font-size: 100px; overflow: hidden; line-height: 100px; z-index: 3;">[[{{{link}}}|&amp;nbsp;&amp;nbsp;&amp;nbsp;]]</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 2;">[[Image:{{{image}}}|{{{width}}}|{{{link}}}]]</div>
</div>

Problèmes connus : cela ne fonctionne pas avec les navigateurs en mode texte seulement, avec les lecteurs d'écran pour personnes déficientes, et éventuellement dans d'autres cas. La technique d'utiliser le CSS pour modifier le contenu des pages casse complètement son accessibilité web en contrevenant à un point de contrôle Web Accessibility Initiative (WAI) de priorité 1. Voir Web Content Accessibility.

Configuration native avec modifications

Si vous avez accès au serveur et que vous ne souhaitez pas installer d'extension, ces solutions peuvent vous convenir.

Syntaxe des images externes

Si vous activez $wgAllowExternalImages (qui autorise les images externes de tous les domaines), ou $wgAllowExternalImagesFrom (qui restreint la liste des domaines), chacun peut alors facilement créer un lien externe vers une imge externe. Externe signifie simplement que l'on utilise l'URL complète plutôt que le lien local, donc vous pouvez pointer localement, mais vous devez utiliser l'URL complète. La classe des liens explicites (plainlinks class) est utilisée pour supprimer l'icône de lien externe :

Après avoir activé $wgAllowExternalImages , vous pouvez aussi inclure une image simplement en écrivant son URL.

Par exemple

https://domain.com/images/image_file.png

va afficher l'image sur l'écran.

<span class="plainlinks">[https://linktopage https://linktoimage]</span>

Donc par exemple, quand les images externes sont autorisées, vous pouvez lier à main page avec https://upload.wikimedia.org/wikipedia/mediawiki/b/bc/Wiki.png en utilisant un wikitexte similaire à :

<span class="plainlinks">[{{fullurl:MediaWiki}} https://upload.wikimedia.org/wikipedia/mediawiki/b/bc/Wiki.png]</span>

L'inconvénient est que le lien et l'utilisation de l'image ne sont pas enregistrés et qu'ils ne sont pas facilement portables lors des créations de branches et sur les sites mirroirs.

HTML brut

Si vous activez $wgRawHtml , vous pouvez utiliser les balises ‎<img> librement, mais cette méthode n'est pas du tout sécurisée. Dans les versions récentes de MediaWiki vous pouvez utiliser l'option Manuel:$wgAllowImageTag (obsolète depuis v. 1.35) qui permet d'utiliser <img> et qui est plus sécurisée que le Html brut.

Néanmoins il existe certaines extensions qui sécurisent cela, voir Manuel:$wgRawHtml pour les détails.

Via les extensions

Si vous souhaitez installer une extension, plusieurs extensions ont été créées pour répondre à cette question :

  • Extension:ImageMap - extension forme d'image et lien avancée qui utilise les fonctionnalités Html USEMAP (balise xml)

Ou bien vous pouvez inventer votre propre syntaxe d'image liée en écrivant une extension qui l'enregistre en tant qu'accroche d'analyseur syntaxique. Voir Extensions de balise pour les informations à propos de l'extension de la syntaxe MediaWiki.

Autres options

Si vous le souhaitez, vous pouvez faire quelques actions plus drastiques, comme modifier /includes/Sanitizer.php (où se trouve la liste blanche des balises HTML), et ajouter <img /> à la liste des balises permises.

Voir aussi