Changes
no edit summary
{{H:h|editor toc}}
Although not a 'feature' of the MediaWiki software, an image can be made to link to a specified page if desired.
Some people find trawling through this page understandably confusing, so here is the short version:
*You can use the [[Help:Redirect|re-direct]] feature on an image page, but when used, the target page shows all sorts of unwanted information that gets transcluded from the image page itself.
*For MediaWiki sites that support the [[Help:Images_and_other_uploaded_files#Embedding_external_images|embedding of external_images]] (which is basically all MediaWiki websites except the Wikipedia and Meta) you can use the [[Template:Clickpic|'clickpic' template]]. See that link for information on how to use it.
*For website such as Wikipedia that preclude the use of embedding external images you can use superimpose hyperlinks onto images.
For more detailed explanations, see the rest of the article below.
== Method 1: Employing image redirects ==
One way to do this is by putting a [[help:redirect|redirect]] on the image page. For example, on Meta the internal image [[Image:Catapult.jpg|80px|]] links to the page [[Help:Redirect]]. The image [[Image:Amtrak_schematic.png|60px]] from Commons, redirecting on Meta to the Main Page, is not displayed.
If the redirect is within the same project, then a redirect message with a link to the image page ([[MediaWiki:Redirectedfrom]]) is inserted on the target page.
To use the same image on another page without a redirect or with a different target, a copy of the image has to be uploaded under another name. However, an image on Commons may have its own image page on each project, e.g. [[Image:Zuid_Holland-Position.png|70px|]], which could have a redirect on the image page on this project, which would then be accessible by the link {{SERVER}}{{localurl:Image:Zuid_Holland-Position.png|redirect=no}}.
== Method 2: Using the external link format ==
In projects that allow [[Help:Images_and_other_uploaded_files#Embedding_external_images|the embedding of external_images]] (in which case you see images in the lefthand column of the table below) there are the following possibilities:
(The image can be an internally or externally held image, and the target can be an external URL or a wiki page).
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<th>What it looks like</th>
<th>What you type</th>
</tr>
<tr valign="top"><td>An external image linking to an external page, image, etc.:<br>
[http://www.google.com http://www.google.com/images/logo.gif]
</td>
<td><pre><nowiki>
[http://www.google.com http://www.google.com/images/logo.gif]</nowiki></pre>
</td>
</tr>
<tr>
<td>
An external image linking to an internal page:<br>
[[Help:Redirect|http://www.google.com/images/logo.gif]] <u>'''does not work!'''</u>
</td>
<td>
<pre><nowiki>[[Help:Redirect|http://www.google.com/images/logo.gif]]</nowiki></pre>
</td>
</tr>
<tr><td>
An external image linking to an internal page with external link style, with :<br>
[{{SERVER}}{{localurl:Help:Redirect}} http://www.google.com/images/logo.gif]
</td>
<td><pre><nowiki>
[{{SERVER}}{{localurl:Help:Redirect}} http://www.google.com/images/logo.gif]
</nowiki></pre>
</td>
</tr>
<tr><td>
An internal image linking to an internal page with external link style:<br>
[{{SERVER}}{{localurl:Help:Redirect}} http:../upload/b/bc/Wiki.png] Again, there is no automatic link to the image page, use [[:Image:wiki.png]]. With this method, the same image can be used on another page linking as usual to the image page, or linking to a different target.
</td>
<td><pre><nowiki>
[{{SERVER}}{{localurl:Help:Redirect}} http:../upload/b/bc/Wiki.png]
[[:Image:wiki.png]]
</nowiki></pre>
</td>
</tr>
<tr><td>
If you don't want the small icon indicating it is an external link to appear, because it is actually an internal link (and looks untidy), you can surround the image link with code to supress it. This will be most useful to people running their own corporate or independent wikis, rather than Wikimedia sites.<br>
<span class="plainlinks">[{{SERVER}}{{localurl:Help:Redirect}} http:../upload/b/bc/Wiki.png]</span>
<br><font size=1>''If you are looking at this on Meta, you will not see the effect here as it doesn't allow embedding of 'external' images...''</font>
</td>
<td><pre><nowiki>
<span class="plainlinks">[{{SERVER}}{{localurl:Help:Redirect}} http:../upload/b/bc/Wiki.png]</span>
</nowiki></pre>
*Using 'span' instead of 'div' means a navigational image can be embedded within text without linebreaks spoiling the show
</td>
</tr>
<tr><td>
To make it easy to create navigational images based on the above method, a template can be employed. In this example a template called ''''clickpic'''' is created that takes two parameters: target page name and image path. <font size=1>''(''''clickpic'''' template not to be confused with ''''click'''' template mentioned in [[#Method 3: Using 'Click' template|Method 3]])''.</font>
{{clickpic|Main Page|http:../upload/b/bc/Wiki.png}}
<small>For more info on using this template, see [[User:CharlesC/Template for navigational images on Mediawiki websites]].</small>
Now you can easily have proper internal linking with images in MediaWiki sites - hooray!
</td>
<td>
*Create template called 'clickpic'. Probably easiest method is to type 'template:clickpic' at the end of your wiki's URL, then click 'edit'.
*This is the text you need add to your template page (see Meta's one at [[:Template:Clickpic]]):
<pre><nowiki>
<span class="plainlinks">[{{SERVER}}{{localurl:{{{1}}}}} {{{2}}}]</span>
</nowiki></pre>
*Using the template above, this is all that needs to be written to create a navigational image:
<pre><nowiki>
{{clickpic|Main Page|http:../upload/b/bc/Wiki.png}}
</nowiki></pre>
*This creates a navigational image that has 'Main Page' as the target page and displays the image stored at 'http:../upload/b/bc/Wiki.png'
</td>
</tr>
</table>
=== Thumbnail ===
One application is linking a small version of an image to a large one. Example where both are external:
<nowiki>
[http://pennine.demon.co.uk/photos/seakayak/xga/Lunga-P7-100-3086.jpg http://pennine.demon.co.uk/photos/seakayak/small/Lunga-P7-100-3086.jpg]
</nowiki>
gives
[http://pennine.demon.co.uk/photos/seakayak/xga/Lunga-P7-100-3086.jpg http://pennine.demon.co.uk/photos/seakayak/small/Lunga-P7-100-3086.jpg]
The alternate text is the name of the image, after the last slash in the URL. If you have control over the image, give it a meaningful name; you could even include a text like "click to enlarge" in the name.
== Method 3: Superimposing a linked text onto an image ==
A linked text can be superimposed onto an image, see [[Help:Composite images]]. In particular there can be a dummy text such as an &nbsp; character in a very large font, covering the whole image.
Using {{tim|navimg}}:
<nowiki>top{{navimg|xsize=50|ysize=50|image=Wikimedia-logo.svg|link=MediaWiki}}bottom</nowiki> gives:
top{{navimg|xsize=50|ysize=50|image=Wikimedia-logo.svg|link=MediaWiki}}bottom
However, if the browser is set to ignore font sizes specified in web pages then only part of the area in the image links to the specified page, and the rest of the image to the image page. Check the hoverbox or status line to see the target at any position of the mouse cursor. Some versions of the template have the same hoverbox for the two areas.
The image cannot be inline. Positioning can be done e.g. with a table.
See also:
*{{tiw|click}}.
*{{tiw|nl|klikafb}}
*[[wikt:de:Template:Link-Bild]]
==See also==
*[[Help:Images_and_other_uploaded_files#Navigational_maps|Navigational maps]]
*[[Help:Composite images]] - Allows superimposing a linked text onto an image.
{{h:f|enname=Navigational image}}
[[Category:Mediawiki Hacks]]
Although not a 'feature' of the MediaWiki software, an image can be made to link to a specified page if desired.
Some people find trawling through this page understandably confusing, so here is the short version:
*You can use the [[Help:Redirect|re-direct]] feature on an image page, but when used, the target page shows all sorts of unwanted information that gets transcluded from the image page itself.
*For MediaWiki sites that support the [[Help:Images_and_other_uploaded_files#Embedding_external_images|embedding of external_images]] (which is basically all MediaWiki websites except the Wikipedia and Meta) you can use the [[Template:Clickpic|'clickpic' template]]. See that link for information on how to use it.
*For website such as Wikipedia that preclude the use of embedding external images you can use superimpose hyperlinks onto images.
For more detailed explanations, see the rest of the article below.
== Method 1: Employing image redirects ==
One way to do this is by putting a [[help:redirect|redirect]] on the image page. For example, on Meta the internal image [[Image:Catapult.jpg|80px|]] links to the page [[Help:Redirect]]. The image [[Image:Amtrak_schematic.png|60px]] from Commons, redirecting on Meta to the Main Page, is not displayed.
If the redirect is within the same project, then a redirect message with a link to the image page ([[MediaWiki:Redirectedfrom]]) is inserted on the target page.
To use the same image on another page without a redirect or with a different target, a copy of the image has to be uploaded under another name. However, an image on Commons may have its own image page on each project, e.g. [[Image:Zuid_Holland-Position.png|70px|]], which could have a redirect on the image page on this project, which would then be accessible by the link {{SERVER}}{{localurl:Image:Zuid_Holland-Position.png|redirect=no}}.
== Method 2: Using the external link format ==
In projects that allow [[Help:Images_and_other_uploaded_files#Embedding_external_images|the embedding of external_images]] (in which case you see images in the lefthand column of the table below) there are the following possibilities:
(The image can be an internally or externally held image, and the target can be an external URL or a wiki page).
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<th>What it looks like</th>
<th>What you type</th>
</tr>
<tr valign="top"><td>An external image linking to an external page, image, etc.:<br>
[http://www.google.com http://www.google.com/images/logo.gif]
</td>
<td><pre><nowiki>
[http://www.google.com http://www.google.com/images/logo.gif]</nowiki></pre>
</td>
</tr>
<tr>
<td>
An external image linking to an internal page:<br>
[[Help:Redirect|http://www.google.com/images/logo.gif]] <u>'''does not work!'''</u>
</td>
<td>
<pre><nowiki>[[Help:Redirect|http://www.google.com/images/logo.gif]]</nowiki></pre>
</td>
</tr>
<tr><td>
An external image linking to an internal page with external link style, with :<br>
[{{SERVER}}{{localurl:Help:Redirect}} http://www.google.com/images/logo.gif]
</td>
<td><pre><nowiki>
[{{SERVER}}{{localurl:Help:Redirect}} http://www.google.com/images/logo.gif]
</nowiki></pre>
</td>
</tr>
<tr><td>
An internal image linking to an internal page with external link style:<br>
[{{SERVER}}{{localurl:Help:Redirect}} http:../upload/b/bc/Wiki.png] Again, there is no automatic link to the image page, use [[:Image:wiki.png]]. With this method, the same image can be used on another page linking as usual to the image page, or linking to a different target.
</td>
<td><pre><nowiki>
[{{SERVER}}{{localurl:Help:Redirect}} http:../upload/b/bc/Wiki.png]
[[:Image:wiki.png]]
</nowiki></pre>
</td>
</tr>
<tr><td>
If you don't want the small icon indicating it is an external link to appear, because it is actually an internal link (and looks untidy), you can surround the image link with code to supress it. This will be most useful to people running their own corporate or independent wikis, rather than Wikimedia sites.<br>
<span class="plainlinks">[{{SERVER}}{{localurl:Help:Redirect}} http:../upload/b/bc/Wiki.png]</span>
<br><font size=1>''If you are looking at this on Meta, you will not see the effect here as it doesn't allow embedding of 'external' images...''</font>
</td>
<td><pre><nowiki>
<span class="plainlinks">[{{SERVER}}{{localurl:Help:Redirect}} http:../upload/b/bc/Wiki.png]</span>
</nowiki></pre>
*Using 'span' instead of 'div' means a navigational image can be embedded within text without linebreaks spoiling the show
</td>
</tr>
<tr><td>
To make it easy to create navigational images based on the above method, a template can be employed. In this example a template called ''''clickpic'''' is created that takes two parameters: target page name and image path. <font size=1>''(''''clickpic'''' template not to be confused with ''''click'''' template mentioned in [[#Method 3: Using 'Click' template|Method 3]])''.</font>
{{clickpic|Main Page|http:../upload/b/bc/Wiki.png}}
<small>For more info on using this template, see [[User:CharlesC/Template for navigational images on Mediawiki websites]].</small>
Now you can easily have proper internal linking with images in MediaWiki sites - hooray!
</td>
<td>
*Create template called 'clickpic'. Probably easiest method is to type 'template:clickpic' at the end of your wiki's URL, then click 'edit'.
*This is the text you need add to your template page (see Meta's one at [[:Template:Clickpic]]):
<pre><nowiki>
<span class="plainlinks">[{{SERVER}}{{localurl:{{{1}}}}} {{{2}}}]</span>
</nowiki></pre>
*Using the template above, this is all that needs to be written to create a navigational image:
<pre><nowiki>
{{clickpic|Main Page|http:../upload/b/bc/Wiki.png}}
</nowiki></pre>
*This creates a navigational image that has 'Main Page' as the target page and displays the image stored at 'http:../upload/b/bc/Wiki.png'
</td>
</tr>
</table>
=== Thumbnail ===
One application is linking a small version of an image to a large one. Example where both are external:
<nowiki>
[http://pennine.demon.co.uk/photos/seakayak/xga/Lunga-P7-100-3086.jpg http://pennine.demon.co.uk/photos/seakayak/small/Lunga-P7-100-3086.jpg]
</nowiki>
gives
[http://pennine.demon.co.uk/photos/seakayak/xga/Lunga-P7-100-3086.jpg http://pennine.demon.co.uk/photos/seakayak/small/Lunga-P7-100-3086.jpg]
The alternate text is the name of the image, after the last slash in the URL. If you have control over the image, give it a meaningful name; you could even include a text like "click to enlarge" in the name.
== Method 3: Superimposing a linked text onto an image ==
A linked text can be superimposed onto an image, see [[Help:Composite images]]. In particular there can be a dummy text such as an &nbsp; character in a very large font, covering the whole image.
Using {{tim|navimg}}:
<nowiki>top{{navimg|xsize=50|ysize=50|image=Wikimedia-logo.svg|link=MediaWiki}}bottom</nowiki> gives:
top{{navimg|xsize=50|ysize=50|image=Wikimedia-logo.svg|link=MediaWiki}}bottom
However, if the browser is set to ignore font sizes specified in web pages then only part of the area in the image links to the specified page, and the rest of the image to the image page. Check the hoverbox or status line to see the target at any position of the mouse cursor. Some versions of the template have the same hoverbox for the two areas.
The image cannot be inline. Positioning can be done e.g. with a table.
See also:
*{{tiw|click}}.
*{{tiw|nl|klikafb}}
*[[wikt:de:Template:Link-Bild]]
==See also==
*[[Help:Images_and_other_uploaded_files#Navigational_maps|Navigational maps]]
*[[Help:Composite images]] - Allows superimposing a linked text onto an image.
{{h:f|enname=Navigational image}}
[[Category:Mediawiki Hacks]]