Difference between revisions of "Manual:Linked images"

From GridPACK
Jump to: navigation, search
 
m (1 revision)
 
(No difference)

Latest revision as of 23:42, 31 October 2013

Images on a MediaWiki wiki will by default, link to the description page, so that licensing information, upload history, contributors, and full resolution versions are immediately available to the user when he or she clicks an image.

However, there are several workarounds for those that require them.

link= Syntax available since version 1.14

Direct internal or external links from images are possible using the syntax documented at Help:Images

This native image link support was added in MediaWiki v1.14 onwards ( r41727. See b539 ) and negates the need for any of the following workarounds or extensions.

{{#if: link does not work with thumb or frame in versions before 1.17. |
link does not work with thumb or frame in versions before 1.17.
| Note Note: }}

In your wikicode:

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

This will make a 50px width picture with a link to the page MediaWiki:

50px

Old CSS workarounds for vanilla installs pre 1.14

MediaWiki was for a long time designed to prevent manual manipulation of images in wikicode which may circumvent the link to description page operation: The <img> tag is specifically not whitelisted in the {{ #ifeq:

 GridPACK

| MediaWiki | Sanitizer | [[{{#if:|{{#ifexist:Manual:Sanitizer.php||mw:}}}}Manual:Sanitizer.php|Sanitizer]] }}, nor is the background-image CSS attribute.

On these older versions, there were the following workarounds.

Site CSS

The simplest method, if your requirements for external images are specialized (that is, restricted to one page or one image), is to add a CSS rule to your MediaWiki:Common.css (or other CSS files, such as MediaWiki:Skinname.css or /skins/skinname/main.css, etc) giving child links of a certain class of object a background image. This method also has some security, as it requires editing the site-wide CSS files, meaning only sysops have access to modify the image shown.

For example (red sections are parts to configure for each image):

In MediaWiki:Common.css:

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

In your wikicode:

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

This would give the link the background image specified, as well as the width and height of the image (which you have to set manually). To find the location of an uploaded file, go to the image description page and click the image itself, and copy the image location in the address bar.

For example on Image:Wiki.png, the image location is http://upload.wikimedia.org/wikipedia/mediawiki/b/bc/Wiki.png (location format will differ depending on local settings), and the width and height would be set to 135px and 135px. So to make a link to the main page here using that logo, one would add to MediaWiki:Common.css:

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

And then use the wikicode:

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

Which would give you:

You can also use a thumbnail of an image, but make sure the thumbnail is being used elsewhere, as most installations are not configured to generate thumbnails on demand.

Inline CSS

You can also attempt to superimpose an invisible link over an image via CSS, such as is done in w:Template:Click. An example of a typical click template is:

<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}}}|&nbsp;&nbsp;&nbsp;]]</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 2;">[[Image:{{{image}}}|{{{width}}}|{{{link}}}]]</div>
</div>

Known problems: It doesn't work in text-only browsers, and in screen readers for the disabled, and possibly other situations. The technique of using CSS to change page content also completely breaks an article's web accessibility by contravening a WAI priority-one checkpoint.[1]

Native with configuration change

If you have server access, but do not want to install any extensions, these solutions may work for you.

External image syntax

If you enable {{ #ifeq:

 GridPACK

| MediaWiki | $wgAllowExternalImages | [[{{#if:|{{#ifexist:Manual:$wgAllowExternalImages||mw:}}}}Manual:$wgAllowExternalImages|$wgAllowExternalImages]] }} (which allows external images from any domain) or {{ #ifeq:

 GridPACK

| MediaWiki | $wgAllowExternalImagesFrom | [[{{#if:|{{#ifexist:Manual:$wgAllowExternalImagesFrom||mw:}}}}Manual:$wgAllowExternalImagesFrom|$wgAllowExternalImagesFrom]] }} (which restricts the list of domains), anyone can then easily create an "external" link to an "external" image. External simply means: using the full URL rather than a local link, so you can link locally, but you need to use the full URL. The plainlinks class is used to remove the "external link" icon:

After enabling {{ #ifeq:

 GridPACK

| MediaWiki | $wgAllowExternalImages | [[{{#if:|{{#ifexist:Manual:$wgAllowExternalImages||mw:}}}}Manual:$wgAllowExternalImages|$wgAllowExternalImages]] }}, you can also embed an image by simply typing the URL of the image.

For example
http://domain.com/images/image_file.png
, will display the image on screen.
<span class="plainlinks">[http://linktopage http://linktoimage]</span>

So for example, were external images allowed here, you could link to the {{ #ifeq:

 GridPACK

| MediaWiki | main page | [[{{#if:|{{#ifexist:MediaWiki||mw:}}}}MediaWiki|main page]] }} with http://upload.wikimedia.org/wikipedia/mediawiki/b/bc/Wiki.png using wikicode like:

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

This has the disadvantage of not registering the link, or the image use, as well as not being easily portable to forks and mirrors.

Raw HTML

If you enable {{ #ifeq:

 GridPACK

| MediaWiki | $wgRawHtml | [[{{#if:|{{#ifexist:Manual:$wgRawHtml||mw:}}}}Manual:$wgRawHtml|$wgRawHtml]] }}, you can use <img> tags freely, but this method is highly insecure. On newer MediaWiki you can use the Manual:$wgAllowImageTag option which allows <img> and is more secure than raw html.

There are, however, some extensions to make it safer, see {{ #ifeq:

 GridPACK

| MediaWiki | Manual:$wgRawHtml#Related_Extensions | [[{{#if:|{{#ifexist:Manual:$wgRawHtml#Related_Extensions||mw:}}}}Manual:$wgRawHtml#Related_Extensions|Manual:$wgRawHtml#Related_Extensions]] }} for details.

Via extensions

If you are willing to install an extension, several extensions have been created to address this issue:

  • {{ #ifeq:
 GridPACK

| MediaWiki | Extension:ImageMap | [[{{#if:|{{#ifexist:Extension:ImageMap||mw:}}}}Extension:ImageMap|Extension:ImageMap]] }} - advanced image shape-link extension, uses the html USEMAP features (xml tag)

  • {{ #ifeq:
 GridPACK

| MediaWiki | Extension:ImageLink | [[{{#if:|{{#ifexist:Extension:ImageLink||mw:}}}}Extension:ImageLink|Extension:ImageLink]] }}

  • {{ #ifeq:
 GridPACK

| MediaWiki | Extension:LinkedImage | [[{{#if:|{{#ifexist:Extension:LinkedImage||mw:}}}}Extension:LinkedImage|Extension:LinkedImage]] }} - image links (XML tag)

  • {{ #ifeq:
 GridPACK

| MediaWiki | Extension:Icon | [[{{#if:|{{#ifexist:Extension:Icon||mw:}}}}Extension:Icon|Extension:Icon]] }} - image links (parser function)

Or you can invent your own linked image syntax, by writing an extension that registers it as a parser hook. See {{ #ifeq:

 GridPACK

| MediaWiki | Manual:Tag extensions | [[{{#if:|{{#ifexist:Manual:Tag extensions||mw:}}}}Manual:Tag extensions|Manual:Tag extensions]] }} for information on extending MediaWiki syntax.

Other options

If you want, you can do some more drastic things, such as modify /includes/Sanitizer.php (where the HTML tag whitelist is), and add <img /> to the list of allowed tags.

See also

{{#if:[[Project:Language policy|]] | |

}}

[[Project:Language policy|]] English {{#ifexist: {{#if:||:Manual:Linked images}}/af

| • {{#if:

 |Afrikaans
 |Afrikaans
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/ar | • {{#if:

 |العربية
 |العربية
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/ast | • {{#if:

 |asturianu
 |asturianu
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/az | • {{#if:

 |azərbaycanca
 |azərbaycanca
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/bcc | • {{#if:

 |جهلسری بلوچی
 |جهلسری بلوچی
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/bg | • {{#if:

 |български
 |български
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/br | • {{#if:

 |brezhoneg
 |brezhoneg
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/bn | • {{#if:

 |বাংলা
 |বাংলা
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/bs | • {{#if:

 |bosanski
 |bosanski
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/ca | • {{#if:

 |català
 |català
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/cs | • {{#if:

 |čeština
 |čeština
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/da | • {{#if:

 |dansk
 |dansk
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/de | • {{#if:

 |Deutsch
 |Deutsch
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/diq | • {{#if:

 |Zazaki
 |Zazaki
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/el | • {{#if:

 |Ελληνικά
 |Ελληνικά
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/eo | • {{#if:

 |Esperanto
 |Esperanto
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/es | • {{#if:

 |español
 |español
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/fa | • {{#if:

 |فارسی
 |فارسی
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/fi | • {{#if:

 |suomi
 |suomi
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/fr | • {{#if:

 |français
 |français
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/gl | • {{#if:

 |galego
 |galego
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/gu | • {{#if:

 |ગુજરાતી
 |ગુજરાતી
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/he | • {{#if:

 |עברית
 |עברית
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/hi | • {{#if:

 |हिन्दी
 |हिन्दी
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/hu | • {{#if:

 |magyar
 |magyar
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/hy | • {{#if:

 |Հայերեն
 |Հայերեն
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/id | • {{#if:

 |Bahasa Indonesia
 |Bahasa Indonesia
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/io | • {{#if:

 |Ido
 |Ido
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/it | • {{#if:

 |italiano
 |italiano
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/ja | • {{#if:

 |日本語
 |日本語
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/ka | • {{#if:

 |ქართული
 |ქართული
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/kk | • {{#if:

 |қазақша
 |қазақша
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/km | • {{#if:

 |ភាសាខ្មែរ
 |ភាសាខ្មែរ
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/ko | • {{#if:

 |한국어
 |한국어
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/ksh | • {{#if:

 |Ripoarisch
 |Ripoarisch
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/kw | • {{#if:

 |kernowek
 |kernowek
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/la | • {{#if:

 |Latina
 |Latina
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/min | • {{#if:

 |Baso Minangkabau
 |Baso Minangkabau
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/mk | • {{#if:

 |македонски
 |македонски
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/ml | • {{#if:

 |മലയാളം
 |മലയാളം
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/mr | • {{#if:

 |मराठी
 |मराठी
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/ms | • {{#if:

 |Bahasa Melayu
 |Bahasa Melayu
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/nl | • {{#if:

 |Nederlands
 |Nederlands
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/no | • {{#if:

 |norsk bokmål
 |norsk bokmål
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/oc | • {{#if:

 |occitan
 |occitan
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/or | • {{#if:

 |ଓଡ଼ିଆ
 |ଓଡ଼ିଆ
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/pl | • {{#if:

 |polski
 |polski
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/pt | • {{#if:

 |português
 |português
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/pt-br | • {{#if:

 |português do Brasil
 |português do Brasil
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/ro | • {{#if:

 |română
 |română
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/ru | • {{#if:

 |русский
 |русский
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/si | • {{#if:

 |සිංහල
 |සිංහල
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/sk | • {{#if:

 |slovenčina
 |slovenčina
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/sl | • {{#if:

 |slovenščina
 |slovenščina
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/sq | • {{#if:

 |shqip
 |shqip
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/sr | • {{#if:

 |српски / srpski
 |српски / srpski
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/sv | • {{#if:

 |svenska
 |svenska
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/ta | • {{#if:

 |தமிழ்
 |தமிழ்
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/th | • {{#if:

 |ไทย
 |ไทย
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/tr | • {{#if:

 |Türkçe
 |Türkçe
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/uk | • {{#if:

 |українська
 |українська
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/vi | • {{#if:

 |Tiếng Việt
 |Tiếng Việt
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/yi | • {{#if:

 |ייִדיש
 |ייִדיש
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/yue | • {{#if:

 |粵語
 |粵語
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/zh | • {{#if:

 |中文
 |中文
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/zh-hans | • {{#if:

 |中文(简体)‎
 |中文(简体)‎
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/zh-hant | • {{#if:

 |中文(繁體)‎
 |中文(繁體)‎
 }}

}}{{#ifexist: {{#if:||:Manual:Linked images}}/zh-tw | • {{#if:

 |中文(台灣)‎
 |中文(台灣)‎
 }}
}}