Help:Afbeeldingen

Let op: Als u deze pagina bewerkt, gaat u akkoord met het vrijgeven van uw bijdragen onder de CC0. Zie Helppagina’s Publiek Domein voor meer informatie.

Op deze pagina wordt de syntaxis van afbeelding uitgelegd bij het bewerken van de wiki. U of een andere gebruiker moet meestal een afbeelding uploaden voordat u deze op een pagina kunt gebruiken.

Afbeeldingen die op een MediaWiki-server zijn opgeslagen, worden meestal opgebouwd (gerenderd) met behulp van het namespace-voorvoegsel File: (maar het oude voorvoegsel Image: wordt nog steeds ondersteund als synoniem) als het doel van een MediaWiki-link. Het alternatieve voorvoegsel Media: voor de namespace is ook bruikbaar om te verwijzen naar de oorspronkelijke inhoud van het mediabestand (voor het afzonderlijk weergeven of downloaden, van elke MediaWiki-pagina).

Vereisten

Voordat u afbeeldingen op uw pagina kunt gebruiken, moet een systeembeheerder van uw wiki bestandsuploads ingeschakeld hebben en een gebruiker het recht bestand uploaden hebben. Systeembeheerders kunnen de wiki ook zo instellen dat bestanden van externe repositories worden geaccepteerd, zoals van Wikimedia Commons. Voor het wijzigen van het formaat van afbeeldingen aan de serverzijde is het noodzakelijk om een schaler te configureren (zoals GD2, ImageMagick, enz.).

Ondersteunde mediatypen voor afbeeldingen

De volgende bestandsformaten worden standaard ondersteund:

• .jpg of .jpeg - een in het standaard JPEG-formaat gecomprimeerde bitmap afbeelding (dit 'lossy' formaat is het meest geschikt voor foto's).
• .png - bitmapafbeelding in het formaat Portable Network Graphics (gespecificeerd door het W3 Consortium).
• .gif - bitmapafbeelding in het verouderde formaat Graphics Interchange Format.
• .webp - WebP Ondersteunt zowel lossy als lossless compressie waarbij de afbeeldingsgrootte tot 45% wordt verkleind.

Andere formaten die op Wikimedia worden gebruikt en elders vaak worden ingeschakeld (dit kan extra instellingen vereisen die niet standaard zijn ingeschakeld):

• .svg - schaalbare afbeelding in het formaat Scalable Vector Graphics (gespecificeerd door het W3 Consortium). Handleiding deel over SVG.
• .tiff - Tagged afbeeldingsformaat. Vaak gebruikt voor archieffoto's met hoge resolutie. Vaak gebruikt met Extension:PagedTiffHandler .
• .ogg, .oga, .ogv - Ogg multimedia (audio of video). Niet een afbeeldingsformaat, maar behandeld op dezelfde manier. Vaak gebruikt met Extension:TimedMediaHandler .
• .pdf - documenten met meerdere pagina's in het Portable Document Format (aanvankelijk gespecificeerd door Adobe). Vaak gebruikt in combinatie met Extension:PdfHandler
• .djvu - bitmapdocumenten met meerdere pagina's in het formaat DejaVu (meestal scans van boeken). Zie Manual:How to use DjVu with MediaWiki

  Er wordt slechts één pagina van een bestand van .pdf of .djvu tegelijk weergegeven.

Andere mediatypen kunnen worden ondersteund, maar deze kunnen mogelijk inline worden weergeven.

Opbouwen van een enkele afbeelding

Syntaxis

De volledige syntaxis voor het weergeven van een afbeelding is:

[[File:filename.extension|options|caption]]

waarbij options leeg kan zijn of een of meer van de volgende letters kan bevatten, gescheiden door verticale strepen (|):

• Formaat option: border, en een van frameless, frame (of framed), thumb (of thumbnail). Note: border can be used in combination with frameless but will be ignored if used with one of the other options.

  Hiermee bepaalt u hoe de afbeelding wordt geformatteerd en ingesloten in de rest van de pagina.

• Resizing option: een van
  • {width}px - Hiermee past u het formaat van de afbeelding aan zodat deze binnen de opgegeven maximale breedte in pixels past, zonder de hoogte te beperken. (Alleen pixelwaarden met gehele getallen worden ondersteund. Een spatie tussen de waarde en "px" is toegestaan.)
  • {width}px - Hiermee past u het formaat van de afbeelding aan zodat deze binnen de opgegeven maximale hoogte in pixels past, zonder de breedte te beperken. Alleen pixelwaarden met gehele getallen worden ondersteund. Een spatie tussen de waarde en "px" is toegestaan.
  • {width}x{height}px -Hiermee past u het formaat van de afbeelding aan zodat deze binnen de opgegeven breedte en hoogte in pixels past. Alleen pixelwaarden met gehele getallen worden ondersteund. Een spatie tussen de waarde en "px" is toegestaan.
  • upright — Hiermee wijzigt u het formaat van een afbeelding naar een veelvoud van de voorkeuren voor miniatuurgrootte van de gebruiker (of de standaardminiatuurgrootte, voor uitgelogde gebruikers of ingelogde gebruikers die hun voorkeuren niet hebben gewijzigd), zodat deze binnen redelijke afmetingen past. Deze optie is vaak nuttig voor afbeeldingen waarvan de hoogte groter is dan de breedte. Het vereist thumb of frameless. Als u |upright=1.0| instelt, wordt de afbeelding weergegeven op de standaardafbeeldingsbreedte van de gebruiker. |upright=2.0| toont de afbeelding met twee keer de standaardbreedte van de gebruiker.

  De afbeelding behoudt altijd haar breedte/hoogte verhouding.

  Afbeeldingen in niet-schaalbare media kunnen worden verkleind, maar niet vergroot; bv. bitmap afbeeldingen kunnen niet worden vergroot.

  De instelling upright vereist geen gelijkteken, dus |upright 2.0| werkt hetzelfde als |upright=2.0|.

  Wanneer het zonder waarde of gelijkteken wordt gebruikt (bijv. |upright|), wordt de standaard |upright=0.75| (hoewel |upright=| gelijk is aan |upright=1.0|)

  De standaard maximale grootte is afhankelijk van het formaat en de interne afmetingen van de afbeelding (afhankelijk van het mediatype).

• Horizontale uitlijning option: een van left, right, center, none. Indien er meerdere van deze opties zijn, wordt alleen de eerste gebruikt

  Zorgt voor de horizontale afstemming (en inline/block of floating stijlen) van de afbeelding binnen een tekst (geen standaardwaarde).

• Verticale uitlijning option: een van baseline, sub, super, top, text-top, middle, bottom, text-bottom.

  Zorgt voor de verticale uitlijning van een niet-zwevende inline-afbeelding met de tekst voor of na de afbeelding en in hetzelfde blok (de standaard verticale uitlijning is middle).

• Link option: een van
  • link={target} — Maakt het mogelijk om het doel (naar een willekeurige paginatitel of URL) van de gegenereerde link te wijzigen, die kan worden geactiveerd op het weergegeven afbeeldingsoppervlak; bijv. [[File:Example.jpg|20px|link=http://www.wikipedia.org]] wordt weergegeven als (externe link), of [[File:Example.jpg|20px|link=MediaWiki]] wordt weergegeven als (interne link).
  • link= (met een lege waarde) — (MediaWiki 1.14+) Geeft een afbeelding weer zonder te activeren link; bijv. [[File:Example.jpg|20px|link=]] wordt weergegeven als .

  Als er een spatie tussen link en het gelijkteken staat, wordt de link opdracht behandeld als een caption.

  Het opnemen van enkele equivalenten van HTML-tekens, zoals %22 voor ", kan ertoe leiden dat de link wordt behandeld als een ondertitel (zie phabricator:T306216).

  '! voor MW 1.24: Als u |link=| (leeg) instelt, wordt er geen titel weergegeven. (Zie phabricator:T23454.)

• Andere specifieke options:
  • alt={alternatieve tekst} — (MediaWiki 1.14+) Definieert de alternatieve tekst (toegewezen aan het HTML-attribuut alt="..." van het gegenereerde ‎<img />-element) van een afbeelding die wordt weergegeven als de afbeelding waarnaar wordt verwezen niet kan worden gedownload en ingesloten, of als de ondersteunende media de alternatieve beschrijvingstekst moeten gebruiken (bijvoorbeeld bij gebruik van een braillelezer of met toegankelijkheidsopties die door de gebruiker in de browser zijn ingesteld).

  Als er een spatie tussen alt en het gelijkteken staat, wordt de link opdracht behandeld als een caption.

  • page={number} — Geeft het gespecificeerde pagina-nummer weer (nu alleen van toepassing bij het weergeven van een djvu- of pdf-bestand).
  • thumbtime={number} — Geeft een miniatuur van de video weer met het gespecificeerde tijdstempel in seconden of in het formaat MM:SS of HH:MM:SS (alleen van toepassing bij het weergeven van een videobestand).
  • start={number} — Wanneer het afspelen van de video wordt gestart, wordt deze gestart op het gespecificeerde tijdstempel in seconden of in het format MM:SS of HH:MM:SS (alleen van toepassing bij het weergeven van een video-bestand).
  • muted — Als het media weergeven is gestart, zal de audio worden stilgelegd.
  • loop — De media zal continu draaien. (alleen van toepassing op audio en video)
  • lossy={false} — (PagedTiffHandler ) Voor het gebruik van PNG in plaats van JPG-miniaturen voor Tiff-afbeeldingen
  • class={html class} — (MediaWiki 1.20+) Definieert classes (kaarten naar het HTML-attribuut class="..." van het gegenereerde ‎<span>...‎</span>-element om het ‎<img />-element heen).

Standaardgedrag sinds MediaWiki 1.40, facultatief sinds MediaWiki 1.36. Eerder werd de class rechtstreeks toegepast op het element ‎<img />.

• • lang={language code} — (MediaWiki 1.22+) Voor SVG bestanden die <switch> statements bevatten variërend op een attribuut systemLanguage, selecteert in welke taal het bestand moet worden weergegeven. De standaard is de paginataal (standaard wordt voor de meeste projecten de standaardtaal van het project).

Als een parameter niet overeenkomt met een van de andere mogelijkheden, wordt aangenomen dat het de tekst van de ondertitel is. Als er meer dan één niet-parameter string aanwezig is, wordt de laatste niet-parameter als ondertitel gebruikt. Ondertitel wordt onder de afbeelding weergegeven in de indelingen thumb en frame, of als knopinfotekst in een andere indeling. Ontertitel die wordt weergegeven in de formaten thumb en frame kan wikilinks en andere opmaak bevatten. MediaWiki extensies kunnen extra opties toevoegen.

Als 'alt' niet is opgegeven en er een ondertitel wordt gegeven, wordt de alternatieve tekst automatisch gemaakt op basis van de ondertitel, ontdaan van opmaak, behalve in de modus thumb of frame, aangezien het in dat geval al leesbaar is voor schermlezers.

Het standaardgedrag is het weergeven van het multimedia-bestand in de volledige grootte. Dit kan leiden tot responsieve problemen als de bestandsbreedte groter is dan de pagina. Zie de taak phab:T113101 voor meer details.

Formaat

De volgende tabel toont het effect van alle beschikbare formaten.

Beschrijving	U typt	U krijgt
geen formaat gespecificeerd Rendered as a floating block: no Rendered inline: yes Rendered caption: no	... text text text [[File:example.jpg|caption]] text text text ...	... text text text text text text ...
border geeft een zeer kleine grijze rand Rendered as a floating block: no Rendered inline: yes Rendered caption: no	... text text text [[File:example.jpg|border|caption]] text text text ...	... text text text text text text ...
frameless, als 'thumbnail', volgt de gebruikersvoorkeur voor de breedte van de afbeelding maar zonder 'border' en geen 'right float' Rendered as a floating block: no Rendered inline: yes Rendered caption: no	... text text text [[File:example.jpg|frameless|caption]] text text text ...	... text text text text text text ...
frameless en border Rendered as a floating block: no Rendered inline: yes Rendered caption: no	... text text text [[File:example.jpg|frameless|border|caption]] text text text ...	... text text text text text text ...
frame Rendered as a floating block: yes Rendered inline: no Rendered caption: yes	... text text text [[File:example.jpg|frame|caption]] text text text ...	... text text text caption text text text ...
thumb of thumbnail Rendered as a floating block: yes Rendered inline: no Rendered caption: yes	... text text text [[File:example.jpg|thumb|caption]] text text text ...	... text text text caption text text text ...

Wanneer de hoogte van een afbeelding in een miniatuur groter is dan de breedte (d.w.z. in portretoriëntatie in plaats van landschap) en u het te groot vindt, kunt u de optie upright=N proberen, waar N de aspectverhouding van de afbeelding is (de breedte gedeeld door de hoogte, standaard op 0,75). Het alternatief is om de gewenste maximale hoogte (in pixels) expliciet te specificeren.

U kunt door thumb={filename} te schrijven een andere afbeelding voor de miniatuur gebruiken.

Grootte en frame

Onder verschillende formaten kan het effect van de parameter 'size' verschillen, zoals hieronder wordt getoond.

• Voor hoe het wordt weergegeven wanneer de 'size' niet is opgegeven, zie Formaat hierboven.
• Wanneer het formaat niet is gespecificeerd of alleen met code>border, kan de grootte verkleind en vergroot worden tot een bepaalde grootte.
• In de onderstaande voorbeelden is de oorspronkelijke afbeelding 400×267 pixels.
• Een afbeelding met frame negeert altijd de specificatie van de 'size'; de originele afbeelding wordt verkleind als deze de maximale grootte overschrijdt die is gedefinieerd in de gebruikersvoorkeuren, en de pagina-informatie geeft een Linter-fout weer.
• De grootte van een afbeelding met thumb of frameless kan worden verminderd, maar kan niet worden vergroot boven de oorspronkelijke grootte van de afbeelding.

Formaat	Verminderd	Vergroot
(niet gespecificeerd)	[[File:example.jpg|50px]]	[[File:example.jpg|500px]]
border	[[File:example.jpg|border|50px]]	[[File:example.jpg|border|500px]]
frame	[[File:example.jpg|frame|50px]]	[[File:example.jpg|frame|500px]]
thumb	[[File:example.jpg|thumb|50px]]	[[File:example.jpg|thumb|500px]]
frameless	[[File:example.jpg|frameless|50px]]	[[File:example.jpg|frameless|500px]]

Horizontale uitlijning

Houd er rekening mee dat bij gebruik van de frame - of thumb[nail]-formaten, de standaard horizontale uitlijning rechts is voor talen die van links naar rechts worden geschreven en links voor talen die van rechts naar links worden geschreven.

Beschrijving	U typt	U krijgt
Geen horizontale uitlijning opgegeven, of standaarduitlijning Rendered as a floating block: no Rendered inline: yes	... text text text [[File:example.jpg|100px|caption]] text text text ...	... text text text text text text ...
specificeer horizontale uitlijning als: none Rendered as a floating block: no Rendered inline: no	... text text text [[File:example.jpg|none|100px|caption]] text text text ...	... text text text caption text text text ...
specificeer horizontale uitlijning als: center Rendered as a floating block: no Rendered inline: no	... text text text [[File:example.jpg|center|100px|caption]] text text text ...	... text text text caption text text text ...
specificeer horizontale uitlijning als: left Rendered as a floating block: yes Rendered inline: no	... text text text [[File:example.jpg|left|100px|caption]] text text text ...	... text text text caption text text text ...
specificeer horizontale uitlijning als: right Rendered as a floating block: yes Rendered inline: no	... text text text [[File:example.jpg|right|100px|caption]] text text text ...	... text text text caption text text text ...

Verticale uitlijning

De opties voor verticale uitlijning worden alleen van kracht als de afbeelding wordt weergegeven als een inline-element en de afbeelding niet zwevend (floating) is. Zij veranderen de manier waarop de 'inlined' afbeelding verticaal wordt uitgelijnd met de tekst die in hetzelfde blok voor en/of na deze afbeelding op dezelfde weergegeven regel aanwezig is.

Merk op dat de weergegeven tekstregel waar inline afbeeldingen worden ingevoegd (en de tekstregels die na de huidige worden weergegeven) naar beneden kan worden verplaatst (dit zal de lijnhoogte voorwaardelijk verhogen door extra regelspacing, net zoals het kan gebeuren met tekstregels met variabele lettergroottes, of met superscripts en subscripts) om de afbeeldingshoogte volledig te laten zien met deze uitlijningsvoorwaarde.

De broncode wel/niet weergeven

<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''top:''' [[File:Example.jpg|20px|top]] [[File:Example.jpg|40px|top]] [[File:Example.jpg|100px|top]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''text-top:''' [[File:Example.jpg|20px|text-top]] [[File:Example.jpg|40px|text-top]] [[File:Example.jpg|100px|text-top]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
<sup>super:</sup> [[File:Example.jpg|20px|super]] [[File:Example.jpg|40px|super]] [[File:Example.jpg|100px|super]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''baseline:''' [[File:Example.jpg|20px|baseline]] [[File:Example.jpg|40px|baseline]] [[File:Example.jpg|100px|baseline]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
<sub>'''sub:'''</sub> [[File:Example.jpg|20px|sub]] [[File:Example.jpg|40px|sub]] [[File:Example.jpg|100px|sub]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''default:''' [[File:Example.jpg|20px]][[File:Example.jpg|40px]] [[File:Example.jpg|100px]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''middle:''' [[File:Example.jpg|20px|middle]] [[File:Example.jpg|40px|middle]] [[File:Example.jpg|100px|middle]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''text-bottom:''' [[File:Example.jpg|20px|text-bottom]] [[File:Example.jpg|40px|text-bottom]] [[File:Example.jpg|100px|text-bottom]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''bottom:'' [[File:Example.jpg|20px|bottom]] [[File:Example.jpg|40px|bottom]] [[File:Example.jpg|100px|bottom]]
<del>text</del></u></span></p>

Om het resultaat van de uitlijning duidelijker te laten zien, worden de spans om de tekst overlijnd en onderstreept, wordt de lettergrootte verhoogd tot 200%, en wordt de alinea met een dunne rand omlijnd; daarnaast worden afbeeldingen van verschillende maten uitgelijnd:

text top: text

text text-top: text

text ^super: text

text baseline: text

text _sub: text

text default: text

text middle: text

text text-bottom: text

text bottom: text

Opmerkingen:

1. De verticale uitlijningspositie "middle" van de afbeelding (wat ook de standaard is) verwijst meestal naar het midden tussen de x-hoogte en de basislijn van de tekst (waarop het verticale midden van de afbeelding wordt uitgelijnd, en waarop de tekst meestal kan worden overstreept), maar niet naar het midden van de regelhoogte van de lettertypehoogte die verwijst naar de ruimte tussen de posities "text-top" en "text-bottom"; De hoogte van het lettertype is exclusief:
   • de extra regelscheidingsruimte wordt normaal gesproken gelijk verdeeld in twee regelmarges (hier 0,5em, volgens regelhoogte ingesteld op 200%) boven en onder de letterhoogte).
   • de extra regelruimte die door superscripts en subscripts kan worden toegevoegd.
2. Als de hoogte van de afbeelding ervoor zorgt dat de bovenste of onderste positie boven of onder de normale volledige regelhoogte van de tekst ligt, wordt de middelste positie aangepast na het verhogen van de bovenste en/of onderste regelmarges, zodat het beeld goed past en zich goed kan afstemmen, en worden alle afbeeldingen (inclusief die met kleinere hoogte) verticaal gecentreerd op de aangepaste middelste positie (voor de berekening van de effectieve regelhoogten wordt de tekst van elke weergegeven rij met de grotere letterhoogte in overweging genomen).
3. De "text-top" en "text-bottom" uitlijningsposities sluiten ook de extra regelruimte uit die door superscripts en subscripts wordt toegevoegd, maar niet de extra regelruimte die wordt gedefinieerd door de regelhoogte.

De "top" en "bottom" regelposities houden rekening met al deze extra regelruimtes (inclusief superscripts en subscripts, indien deze aanwezig zijn in een weergegeven regelspan). Wanneer de afbeelding uitgelijnd is op de afbeeldingen die boven of onder de normale regelruimte komen en de afbeeldingsvorm niet absoluut geplaatst is, zal de afbeeldingsaanpassing de positie "top" en "bottom" aanpassen (net als superscripts en subscripts), zodat de effectieve regelhoogte tussen de weergegeven tekstregels hoger is.

1. De "underline", "overline" en "overstrike" tekstdecoratie posities moeten ergens binnen deze twee limieten liggen en "kunnen" afhangen van het type en de hoogte van de gebruikte lettertypen (de superscript- en subscriptstijlen kunnen in sommige browsers in aanmerking worden genomen, maar meestal worden deze stijlen genegeerd en kan de positie van deze decoraties niet worden aangepast); Deze decoraties hebben dus normaal gesproken geen invloed op de verticale positie van afbeeldingen ten opzichte van de tekst.

Stoppen van de tekststroom

Soms is het wenselijk om tekst (of andere inline niet-vloeiende afbeeldingen) te stoppen met rond te gaan bij een vloeiende afbeelding (floating). Afhankelijk van de schermresolutie van de webbrowser en dergelijke, kan de tekststroom aan de rechterkant van een afbeelding ervoor zorgen dat een sectiekop (bijvoorbeeld == Mijn koptekst ==) rechts van de afbeelding verschijnt, in plaats van eronder, zoals een gebruiker mag verwachten. De tekststroom kan worden gestopt door <br clear=all> (of zo u wilt, <div style="clear: both"></div>) voor de tekst te plaatsen die onder de vloeiende (ook wel zwevende genoemd) afbeelding moet beginnen. (Dit kan ook zonder een lege regel worden gedaan door het gedeelte met de drijvende afbeeldingen te omhullen met <div style="overflow: hidden">…</div>, waardoor alle drijvende elementen binnen het div-element worden verwijderd.)

Alle afbeeldingen die als blokken worden weergegeven (inclusief niet-zwevende gecentreerde afbeeldingen, links, rechts, framed of thumbnailed zwevende afbeeldingen) breken impliciet de omringende tekstregels (beëindigen het huidige tekstblok voor de afbeelding en maken een nieuwe alinea voor de tekst erna). Ze worden dan verticaal gestapeld langs hun linker- of rechteruitlijningsmarge (of langs de middellijn tussen deze marges voor gecentreerde afbeeldingen).

Het standaard target van de link wijzigen

De volgende tabel toont hoe het target van de link (waarvan de standaard de afbeeldingsbeschrijvingspagina is) kan worden gewijzigd of verwijderd. Het aanpassen van de link verandert het in de voorgaande secties beschreven formaat niet.

Beschrijving	U typt	U krijgt
interne link	... text text text [[File:example.jpg|link=Main Page|caption]] text text text ...	... text text text text text text ...
externe link	... text text text [[File:example.jpg|link=http://wikipedia.org/wiki/Test|caption]] text text text ...	... text text text text text text ...
geen link (externe of bestandspagina)	... text text text [[File:example.jpg|link=|caption]] text text text ...	... text text text text text text ...

Waarschuwing:

Op grond van de licentievereisten op uw wiki kan het niet toestaan zijn om alle links naar de beschrijvingspagina te verwijderen, dit om de vereiste auteursvermeldingen, de auteursrechtverklaringen, de toepasselijke licentievoorwaarden of een meer volledige beschrijving van de weergegeven afbeelding (inclusief de geschiedenis van wijzigingen) te tonen.

Als u het target van een link van een afbeelding wijzigt of verwijdert, moet u op een andere plaats op uw pagina een expliciete link naar deze beschrijvingspagina geven, of de auteurs- en auteursverklaring en een link naar de toepasselijke licentie weergeven, indien deze verschillen van de elementen die van toepassing zijn op de huidige pagina zelf.

Uw wikibeleid kan het gebruik van de alternatieve parameters in de link beperken, of zelfs verbieden voor ingebedde mediabestanden (in dat geval wordt de parameter genegeerd) of kan ze alleen worden geaccepteerd na validering door gemachtigde gebruikers of beheerders.

Opbouwen van een galerij afbeeldingen

Galerij syntaxis

Het is makkelijk om een galerij van miniaturen te maken met de tag ‎<gallery>. De syntaxis:

<gallery>
File:file_name.ext|caption|alt=alt language
File:file_name.ext|caption|alt=alt language
{...}
</gallery>

De afbeeldingscode is niet tussen haakjes wanneer deze in gallery tags staat.

De ondertitels (captions) zijn optioneel en kunnen wiki-links of andere opmaak bevatten.

De woorden "center", "left" en "right" die als ondertitel worden gebruikt veroorzaken vals positieve Linterfouten. Zie taak T275074 voor details.

Sommige parameters die de thumb uitvoer controleren, kunnen ook hier worden gebruikt, met name die die het bestand wijzigen (in tegenstelling tot die die die controleren waar de afbeelding op de pagina komt). Bijvoorbeeld, met media met meer pagina's zoals PDF's, kunt u code gebruiken zoals page=4 en met video's kunt u thumbtime=10 gebruiken.

De prefix File: kan worden weggelaten. Het is echter handig om deze te gebruiken als hulpmiddel om snel afbeeldingsspecificaties te vinden in de wikitext (bijvoorbeeld bij het opschonen van de lay-out van de pagina).

Bijvoorbeeld:

<gallery>
File:Example.jpg|Item 1
File:Example.jpg|a link to [[Help:Contents]]
File:Example.jpg
File:Example.jpg|alt=An example image. It has flowers
File:Example.jpg|''italic caption''
File:Example.jpg|Links to external website|link=https://example.com
File:Example.jpg|link=w:Main_Page|Internal link
Example.jpg|on page "{{PAGENAME}}"
File:Using Firefox.pdf|page=72
</gallery>

is geformatteerd als volgt:

• 
  Item 1
• 
  a link to Help:Contents
• 
• 
• 
  italic caption
• 
  Links to external website
• 
  Internal link
• 
  on page "Images/nl"
• 

mode parameter

MediaWiki-versie:

≥ 1.22

Vanaf versie 1.22 is de parameter mode beschikbaar, waarbij de volgende opties zijn:

• traditional is het originele galerijtype dat wordt gebruikt door MediaWiki.
• nolines is vergelijkbaar met traditional, maar zonder borderlijnen.
• packed zorgt ervoor dat afbeeldingen dezelfde hoogte hebben, maar verschillende breedte, met weinig ruimte tussen de afbeeldingen. De regels in deze responsieve modus organiseren zich op basis van de breedte van het scherm.
• packed-overlay toont de onderstaande tekst over de afbeelding, in een half transparante wit veld.
• packed-hover is vergelijkbaar met packed-overlay, maar met de ondertekst en het witte veld alleen als men er met de muis overheen gaat.
• slideshow maakt een dia-show van de afbeeldingen.

Bijvoorbeeld:

<gallery mode="packed-hover">
Image:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar)
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (Salmon Larva)
Image:Georgia Aquarium - Giant Grouper.jpg|''[[commons:Epinephelus lanceolatus|Epinephelus lanceolatus]]'' (Giant grouper)
Image:Pterois volitans Manado-e.jpg|''[[commons:Pterois volitans|Pterois volitans]]'' (Red Lionfish)
Image:Macropodus opercularis - front (aka).jpg|''[[commons:Macropodus opercularis|Macropodus opercularis]]'' (Paradise fish)
Image:Canthigaster valentini 1.jpg|''[[commons:Canthigaster valentini|Canthigaster valentini]]'' (Valentinni's sharpnose puffer)
Image:Flughahn.jpg|[[Image:POTY ribbon 2007.svg|25px]] ''[[commons:Dactylopterus volitans|Dactylopterus volitans]]'' (Flying gurnard)
Image:Fishmarket 01.jpg|''[[commons:Semicossyphus pulcher|Semicossyphus pulcher]]'' (California Sheephead)
Image:Pseudorasbora parva(edited version).jpg|''[[commons:Category:Pseudorasbora parva|Pseudorasbora parva]]'' (Topmouth gudgeon)
Image:MC Rotfeuerfisch.jpg|''[[commons:Category:Pterois antennata|Pterois antennata]]'' (Antennata Lionfish)
Image:Cleaning station konan.jpg|''[[commons:Novaculichthys taeniourus|Novaculichthys taeniourus]]''
Image:Synchiropus splendidus 2 Luc Viatour.jpg|''[[commons:Synchiropus splendidus|Synchiropus splendidus]]'' (Mandarin fish)
File:Psetta maxima Luc Viatour.jpg|''[[commons:Psetta maxima|Psetta maxima]]'' (Turbot)
File:Australian blenny.jpg|''[[commons:Category:Ecsenius|Ecsenius axelrodi]]''
</gallery>

Geeft (modus: $over):

• 
  Astronotus ocellatus (Oscar)
• 
  Salmo salar (Salmon Larva)
• 
  Epinephelus lanceolatus (Giant grouper)
• 
  Pterois volitans (Red Lionfish)
• 
  Macropodus opercularis (Paradise fish)
• 
  Canthigaster valentini (Valentinni's sharpnose puffer)
• 
  Dactylopterus volitans (Flying gurnard)
• 
  Semicossyphus pulcher (California Sheephead)
• 
  Pseudorasbora parva (Topmouth gudgeon)
• 
  Pterois antennata (Antennata Lionfish)
• 
  Novaculichthys taeniourus
• 
  Synchiropus splendidus (Mandarin fish)
• 
  Psetta maxima (Turbot)
• 
  Ecsenius axelrodi

Voorbeelden van de andere modus:

mode="traditional"

• 
  Astronotus ocellatus (Oscar)
• 
  Salmo salar (Salmon Larva)
• 
  Epinephelus lanceolatus (Giant grouper)

mode="nolines"

• 
  Astronotus ocellatus (Oscar)
• 
  Salmo salar (Salmon Larva)
• 
  Epinephelus lanceolatus (Giant grouper)

mode="packed"

• 
  Astronotus ocellatus (Oscar)
• 
  Salmo salar (Salmon Larva)
• 
  Epinephelus lanceolatus (Giant grouper)

mode="packed-overlay"

• 
  Astronotus ocellatus (Oscar)
• 
  Salmo salar (Salmon Larva)
• 
  Epinephelus lanceolatus (Giant grouper)

mode="packed-hover"

• 
  Astronotus ocellatus (Oscar)
• 
  Salmo salar (Salmon Larva)
• 
  Epinephelus lanceolatus (Giant grouper)

MediaWiki-versie:

≥ 1.28

mode="slideshow"

• 
  Astronotus ocellatus (Oscar)
• 
  Salmo salar (Salmon Larva)
• 
  Epinephelus lanceolatus (Giant grouper)
• 
  Pterois volitans (Red Lionfish)
• 
  Macropodus opercularis (Paradise fish)
• 
  Canthigaster valentini (Valentinni's sharpnose puffer)
• 
  Dactylopterus volitans (Flying gurnard)
• 
  Semicossyphus pulcher (California Sheephead)
• 
  Pseudorasbora parva (Topmouth gudgeon)
• 
  Pterois antennata (Antennata Lionfish)
• 
  Novaculichthys taeniourus
• 
  Synchiropus splendidus (Mandarin fish)
• 
  Psetta maxima (Turbot)
• 
  Ecsenius axelrodi

Optionele eigenschappen galerij

De tag 'gallery' zelf heeft verschillende extra parameters, gespecificeerd als attribuutnaam waardeparen:

<gallery {parameters}>
{images}
</gallery>

• caption="{caption}": (ondertitel tussen dubbele aanhalingstekens voor meer dan een woord) stelt een ondertitel centraal boven de galerij. In de ondertitel mag alleen gewone tekst worden gebruikt; opmaak, sjablonen en dergelijke werken niet.
• widths={width}px: stelt de (max) breedte van de afbeeldingen in; De standaardwaarde is 120px. (Het heeft geen effect als de modus is ingesteld op een van de volgende: packed, packed-overlay, packed-hover, slideshow.) Let op het meervoud: widths.
• heights={heights}px: stelt de (max) hoogte van de afbeeldingen in; De standaardwaarde is 120px. (Het heeft geen effect als de modus is ingesteld op slideshow.)
• perrow={integer}: stelt het aantal afbeeldingen per regel in. (Het heeft geen effect als de modus is ingesteld op een van de volgende: packed, packed-overlay, packed-hover, slideshow.) 0 betekent automatisch aanpassen op basis van de breedte van het scherm.
• showfilename={anything}: toon de bestandsnamen van de afbeeldingen in de individuele ondertitels voor elke afbeelding (1.17+).
• mode={traditional|nolines|packed|packed-hover|packed-overlay|slideshow}: Zie bovenstaande sectie (1.22+; 1.28+ voor "slideshow").
• showthumbnails: Voor de modus "slideshow" alleen, toont de strip met miniaturen van afbeeldingen onder de slideshow standaard (1.29+).

De breedte- en hoogteparameters worden meer als suggesties beschouwd dan als strenge waarden voor 'packed' (en verwante) modus. De 'packed' modus zal de breedte van de afbeeldingen aanpassen zodat elke regel dezelfde lengte heeft.

Voorbeeld 1

Syntaxisː

<gallery widths=300px heights=200px>
File:Example.jpg|Lorem ipsum
File:Example.jpg|Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
</gallery>

Resultaat:

• 
  Lorem ipsum
• 
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut

Voorbeeld 2

Syntaxisː

<gallery widths=60px heights=60px perrow=7 caption="sunflowers are groovy">
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
</gallery>

Resultaat:

• sunflowers are groovy
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Rij met afbeeldingen die zal 'wrap' naar browserbreedte

Een manier om een rij afbeeldingen met verschillende breedtes te laten zien, is om geen "thumb", "left" of "none" te gebruiken. Als "thumb" niet wordt gebruikt (en dus geen ondertitels) zal een rij afbeeldingen zich op de breedte van de browser wikkelen. Vermindert u het browservenster, indien nodig, om te zien hoe de afbeeldingen naar de volgende rij worden gewikkeld.

[[File:Example.jpg|220px]]
[[File:Example.jpg|100px]]
[[File:Example.jpg|150px]]
[[File:Example.jpg|250px]]
[[File:Example.jpg|200px]]
[[File:Example.jpg|50px]]
[[File:Example.jpg|220px]]
[[File:Example.jpg|175px]]

Om afbeeldingen van verschillende breedtes te voorzien van ondertitels, is het noodzakelijk om div HTML te gebruiken voor een ongeordende lijst. Samen met style="display: inline-block;". Voor meer info en ideeën zie: deze pagina.

<div><ul> 
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|220px|Caption 1]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|100px|Caption 2]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|150px|Caption 3]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|250px|Caption 4]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|200px|Caption 5]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|50px|Caption 6]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|220px|Caption 7]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|175px|Caption 8]] </li>
</ul></div>

• 

  Caption 1

• 

  Caption 2

• 

  Caption 3

• 

  Caption 4

• 

  Caption 5

• 

  Caption 6

• 

  Caption 7

• 

  Caption 8

Als u de bovenrand van afbeeldingen wilt uitlijnen, voegt u de opdracht verticaal uitlijnen toe

<div><ul> 
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|220px|Caption 1]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|100px|Caption 2]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|150px|Caption 3]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|250px|Caption 4]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|200px|Caption 5]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|50px|Caption 6]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|220px|Caption 7]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|175px|Caption 8]] </li>
</ul></div>

• 

  Caption 1

• 

  Caption 2

• 

  Caption 3

• 

  Caption 4

• 

  Caption 5

• 

  Caption 6

• 

  Caption 7

• 

  Caption 8

Sommige wiki-farms hebben niet alle galerijopties (zoals "widths") beschikbaar. Soms wil men ook verschillende breedtes voor afbeeldingen in een rij. Buiten een galerij, of de div HTML, is het onmogelijk om individuele ondertitels te hebben voor afbeeldingen in een rij afbeeldingen die zich om de breedte van de browser heen zullen wikkelen. Probeer het eens. Niets anders met behulp van wikitext werkt correct. Afbeeldingen overlappen dingen aan de rechterkant of forceren het tonen van een horizontale scrollbalk.

Het gebruik van een linker float ("left") voor sommige afbeeldingen, gecombineerd met "none" voor sommige afbeeldingen, zal ook niet consistent werken, vooral als er ook een rechter zijbalk van afbeeldingen is. Er kunnen vreemde dingen gebeuren. Bij een smallere browser of schermbreedte kan een afbeelding van de rij ver onder de pagina verschijnen na het einde van de rechter zijbalk van afbeeldingen.

Link gedrag

Als standaard wordt een afbeelding gelinkt naar de pagina met de bestandsbeschrijving. De optie "link=" wijzigt dit gedrag om te koppelen naar een andere pagina of website, of om het linken van de afbeelding uit te schakelen.

Als alternatief kunt u een tekstlink maken naar een pagina met een bestandsbeschrijving of naar het bestand zelf. Zie Help:Linking to files .

Afbeelding weergeven, linken naar een andere pagina of website

Gebruik de optie "link=" om een afbeelding te linken naar een andere pagina of website:

Als u op de onderstaande afbeelding klikt, gaat u naar MediaWiki:

[[File:MediaWiki-2020-logo.svg|50px|link=MediaWiki]]

Als u op de onderstaande afbeelding klikt, gaat u naar example.com:

[[File:MediaWiki-2020-logo.svg|50px|link=http://example.com]]

Afbeelding weergeven, link uitschakelen

Gebruik de optie "link=" zonder toegewezen waarde om de link volledig uit te schakelen; de onderstaande afbeelding is geen link:

[[File:MediaWiki-2020-logo.svg|50px|link=]]

Linken naar een afbeelding

Voeg : toe als prefix aan de link die u moet maken.

[[:File:MediaWiki-2020-logo.svg]]

File:MediaWiki-2020-logo.svg

[[:File:MediaWiki-2020-logo.svg|Wiki]]

Wiki

Direct linken naar een afbeelding

De bovenstaande voorbeelden verwijzen naar de beschrijvingspagina van de afbeelding. Om direct naar een afbeelding te linken, kan de pseudo-namespace Media: gebruikt worden op MediaWiki pagina's:

[[Media:MediaWiki-2020-logo.svg]]

Media:MediaWiki-2020-logo.svg

Direct linken van externe sites

Een andere mogelijkheid is om de pagina Special:Redirect/file (of de alias Special:Filepath) te gebruiken. In tegenstelling tot het bovenstaande voorbeeld, kunt u ernaar linken vanuit externe websites en MediaWiki pagina's.

[[Special:Redirect/file/Wikipedia.png]]

De parameters height en width kunnen ook worden toegevoegd om een specifieke grootte van de afbeelding terug te geven. De afbeeldingsratio (verhouding lengte / breedte) blijft altijd gelijk.

https://www.mediawiki.org/w/index.php?title=Special:Redirect/file/Wikipedia.png&width=100&height=100

Het verkrijgen van de volledige URL van een afbeelding

Om het volledige pad van een afbeelding te verkrijgen (zonder door te gaan door de bovenstaande doorverwijzingen) kunnen wat Magische woorden worden gebruikt.

{{filepath:MediaWiki-2020-logo.svg}}

Wordt:

//upload.wikimedia.org/wikipedia/commons/d/dd/MediaWiki-2020-logo.svg

Als dit wordt gebruikt in een sjabloon waar het File: namespace verwijderd moet worden, kan {{PAGENAME}} dit doen:

{{filepath:{{PAGENAME:File:MediaWiki-2020-logo.svg}}}}

Wordt:

//upload.wikimedia.org/wikipedia/commons/d/dd/MediaWiki-2020-logo.svg

Bestanden op andere websites

U kunt een link naar een extern bestand maken dat online beschikbaar is met dezelfde syntaxis die wordt gebruikt voor het koppelen aan een externe webpagina. Met deze syntaxis wordt de afbeelding niet weergegeven, maar alleen de tekst van de link naar deze afbeelding.

[http://url.for/some/image.png]

Of met een andere tekst:

[http://url.for/some/image.png Link tekst hier]

Bijkomende MediaWiki-markering of HTML/CSS-formatering (voor inline-elementen) is toegestaan in deze weergegeven tekst (behalve voor ingebedde links die de omliggende link zouden breken):

[http://www.example.com/some/image.png Voorbeeld '''<del>rijke</del>''' ''<ins>linktekst</ins>'' hier.]

resultaat: Voorbeeld rijke linktekst hier.

Als het is ingeschakeld op uw wiki (zie Manual:$wgAllowExternalImages ), kunt u ook externe afbeeldingen inbedden. Om dat te doen, voeg gewoon de URL van de afbeeldingen in:

http://url.for/some/image.png

Ingebedde afbeeldingen kunnen worden aangepast door de CSS transform eigenschap. Ze kunnen ook worden geformatteerd door de omliggende MediaWiki-markering of HTML/CSS-code.

Als deze wiki-optie niet is ingeschakeld, wordt de afbeelding niet ingebed, maar wordt weergegeven als een tekstlink naar de externe site, net als hierboven, tenzij de Manual:$wgAllowExternalImagesFrom van de site een waarde heeft.

Zie ook

• Uitgebreide syntaxis afbeelding
• Categorie help afbeelding
• Tutorial afbeeldingen
• Tag gallery
• Manual:Adding support for new filetypes
• phab:T113101 - responsieve problemen
• Extensie PageImages Kan ik bepaalde pagina-afbeeldingen uitsluiten?