Help:Afbeeldingen

Voor de het plaatsen van een afbeelding op een pagina is hiervoor een opdracht in de wikicode nodig. Deze opdracht heeft de volgende algemene vorm:

[[Bestand:filename.extensie|opties|titel]]

In plaats van de optie Bestand: kan ook Afbeelding:, File: of Image: gebruikt worden, dit geeft hetzelfde resultaat. Door het meegeven van één of meerdere opties (na de extensie) kan de afbeelding gestyled worden. Bij gebruik van meerdere opties moeten deze van elkaar gescheiden worden door een |.

Afbeelding type: miniatuur

Standaard willen we aan een afbeelding een onderschrift meegeven en controle hebben over hoe groot de afbeelding op de pagina afgebeeld wordt. De afbeelding moet geschaald kunnen worden. Van de verschillende format opties is er één die dit heeft, dit is de miniatuur (in het Engels: thumbnail of thumb) optie. Hiermee wordt de voor Wouda's Wiki standaard sysntax:

[[Bestand:filename.extensie|miniatuur|opties|Onderschrift]]

Andere afbeeldingstypen:

border: zonder onderschrift, inline met de text met licht grijze omkadering.
frameless: zonder onderschrift en inline met de text.
frame: wel een onderschrift maar niet schaalbaar, afbeelding wordt afgebeeld in zijn orginele grote.

Horizontale uitlijning

Er zijn vier mogelijkheden voor het horizontaal uitlijnen van een afbeelding:

Rechts (right): afbeelding rechts uitgelijnd met tekst links ernaast. Dit is de default instelling zonder opgaaf van een uitlijnings optie wordt deze gekozen.
Links (left): afbeelding links uitgelijnd met tekst rechts ernaast.
Gecentreerd (center): afbeelding in het midden zonder tekst ernaast
Geen (none): afbeelding links uitgelijnd zonder tekst ernaast.

Voorbeeld, rechts en links uitlijnen

[[Bestand:Doc.nr. 14408-64763 - (16-05-2017).jpg|miniatuur|Interieur van de machinehal. Bron: RCE/14408-64763.]]
Lorem ipsum ... arcu. {Alinea 1}

In enim ... laoreet. {Alinea 2}

[[Bestand:Doc.nr. 14408-64770 - Interieur, stookketels (16-05-2017).jpg|miniatuur|links|Interieur van het ketelhuis. Bron: RCE/14408-64770.]]
Quisque rutrum. ... ipsum. {Alinea 3}

Nam quam ... libero. {Alinea 4}
<br clear=all>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.

Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.

Als er voldoende ruimte is zoals op een PC scherm zal in bovenstaand voorbeeld de tekst relatief weinig ruimte innemen, veel minder dan op een klein scherm zoals een telefoon. Dit zorgt ervoor dat alles als het waar omhoog kruipt, in bovenstaand voorbeeld leidt dit tot overlap van de afbeeldingen met tekst tussen beide afbeeldingen in. Het kan er ook voor zorgen dat een titel van een nieuw hoofdstuk ook naast een afbeelding geplaatst wordt. Wil je dit voorkomen gebruik dan <br clear=all>, door deze break in je wikicode op te nemen zal de browser weer op een verse regel beginnen na deze break. Als je een nieuw hoofdstuk zeker op een nieuwe regel wilt laten beginnen onder een afbeelding gebruik dan <br clear=all> net voor het nieuwe hoofdstuk. Als je niet wilt dat afbeeldigen elkaar gaan overlappen gebruik dan deze break net voor je afbeelding in de wikicode.

Afbeeldings grootte, schaling

De hierboven gebruikte afbeeldingen hebben geen schalings opdracht meegekregen. het afbeeldingstype miniatuur maakt de afbeeldingen dan standaard 300 pixels breed. Mits de resolutie van de afbeelding hiervoor groot genoeg is, als de afbeelding bijvoorbeeld maar 100 pixels breed is dan wordt deze ook met 100 pixels breedte afgebeeld. Dit leidt er toe dat standaard een portret afbeelding veel groter afgebeeld lijkt dan een afbeelding in landscape formaat omdat beide even breed worden afgebeeld. In het ene geval is dan de korte zijde 300 pixels en in het andere geval de lange zijde 300 pixels.

De genoemde afmetingen hebben overigens betrekking op de afbeelding zelf, het kader dat er om heen geplaatst wordt komt er nog bij. Het geheel met kader en onderschrift is daardoor nog iets groter.

Om een afbeelding op een ander formaat weer te geven zijn er een aantal mogelijkheden:

Opgeven van een schalingsfactor met rechtop=n (upright=n). de parameter n is de schalingsfactor ten opzichte van de normale 300 pixels breed. rechtop=0,5 zal de afbeelding op 50% van de normale afmetingen weergeven.
Opgeven van de breedte van de afbeelding in pixels door {breedte}px.
Opgeven van de hoogte van de afbeelding in pixels door x{hoogte}px.

Het opgeven van een schalingsfactor met rechtop=n is vaak het gemakkelijkst en ook gemakkelijk te begrijpen wat je doet. Het opgeven van de hoogte in pixels is handig als je afbeeldingen gelijk in hoogte wilt afbeelden als de hoogte/breedt verhouding van de afbeeldingen niet gelijk is.

Voor het vergroten van afbeeldingen geldt weer als eerder, alleen als de afbeelding voldoende resolutie heeft. Een afbeelding zal nooit verder vergroot worden dan de oorspronkelijke afmetingen. Bij het vergroten van een landscape afbeelding is 250% (rechtop=2,5) wel echt het maximum. Bij nog grotere vergrotingen komt de afbeelding op kleinere schermen "klem" te zitten. In onderstaand voorbeeld is de afbeelding tot 250% vergroot.

Voorbeeld, afbeelding geschaald naar 250%

[[Bestand:Doc.nr. 14408-64771 - Interieur, stookketels (16-05-2017).jpg|miniatuur|center|rechtop=2.5|Stoomketel 1 en 2 in het ketelhuis. Bron: RCE/14408-64771.]]

Link optie

Standaard is de afbeelding aanklikbaar, net als het kleine vergroten icoontje aan de rechterkant van de balk voor het bijschrift. Klikken op de afbeelding of het icoontje leidt je naar de pagina die bij die afbeelding hoort met een grotere versie van de afbeelding en andere informatie over de afbeelding. Deze pagina is overigens ook te editen zodat je er meer achtergrond informatie (zoals bronnen) kunt vermelden.

Dit aanklik gedrag is aan te passen door een andere bestemming voor de link mee te geven. Met link= is de afbeelding niet meer aanklikbaar, het vergroten icoontje rechts onder is dan nog wel aanklikbaar. Deze mogelijkheid is gedemonstreerd in het voorbeeld hieronder bij de afbeelding van het kantoortje in de machinehal. Om de aanklikbaarheid van de afbeelding te verwijderen lijkt me in dit geval niet echt nuttig maar het kan dus wel.

Een andere mogelijkheid, die wel nuttig lijkt, is gedemonstreerd in onderstaande afbeelding van het gemaal gezien vanaf zeezijde. Hier is er een link gemaakt naar de afbeelding in de originele resolutie. Normaal kom je hier door op de afbeeldingspagina weer op de afbeelding te klikken. Normaal dus in twee stappen, in dit voorbeeld nog maar in één stap.

Voorbeeld, aanpassen link gedrag

[[Bestand:Doc.nr. 14408-64761 - Interieur, kantoor in het midden van de pompruimte (16-05-2017).jpg|miniatuur|links|link=|Kantoortje in de machinehal Bron: RCE/14408-64761.]]

[[Bestand:Doc.nr. 14408-64773 - Woudagemaal vanaf landpunt (16-05-2017).jpg|miniatuur|rechts|link=https://wiki.woudagemaal.nl/w/images/f/f4/Doc.nr._14408-64773_-_Woudagemaal_vanaf_landpunt_%2816-05-2017%29.jpg|Woudagemaal gezien vanaf de "zeezijde". Bron: RCE/14408-64773.]]

<br clear=all>

Afbeeldingen naast elkaar (geavanceerd)

Onderstaande afbeeldingen tonen meerdere afbeeldingen naast elkaar. De techniek hiervoor is wat minder standaard en vraagt meer HTML codes. Om te laten zien dat ook dit mogelijk is is het hier op deze help pagina opgenomen.

Voorbeeld 1, twee maal landscape

<div style="margin: auto; text-align: center;"><ul style="margin: 0;><!--
--><li style="display: inline-block; margin: 0.5em; vertical-align: top;">[[Bestand:Doc.nr. 14408-64759 - Interieur, stoom condensator (16-05-2017).jpg|miniatuur|geen|upright=1.21|Condensatie inrichting. Bron: RCE/14408-64759.]]</li><!--
--><li style="display: inline-block; margin: 0.5em; vertical-align: top;">[[Bestand:Doc.nr. 14408-64760 - Interieur, stoom condensator (16-05-2017).jpg|miniatuur|geen|upright=1.21|Condensatie inrichting. Bron: RCE/14408-64760.]]</li>
</ul></div>

Condensatie inrichting. Bron: RCE/14408-64759.
Condensatie inrichting. Bron: RCE/14408-64760.

Voorbeeld 2, landscapen en portret

<div style="margin: auto; text-align: center;"><ul style="margin: 0;><!--
--><li style="display: inline-block; margin: 0.5em; vertical-align: top;">[[Bestand:Doc.nr. 14408-64754 - Interieur, machinehal (16-05-2017).jpg|miniatuur|geen|x340px|Interieur machinehal. Bron: RCE/14408-64754.]]</li><!--
--><li style="display: inline-block; margin: 0.5em; vertical-align: top;">[[Bestand:Doc.nr. 14408-64768 - Interieur, detail stoommachine (16-05-2017).jpg|miniatuur|geen|x340px|Detail stoommachine. Bron: RCE/14408-64768.]]</li>
</ul></div>

Interieur machinehal. Bron: RCE/14408-64754.
Detail stoommachine. Bron: RCE/14408-64768.

Voorbeeld 3, vier maal portret

<div style="margin: auto; text-align: center;"><ul style="margin: 0;><!--
--><li style="display: inline-block; margin: 0.5em; vertical-align: top;">[[Bestand:Doc.nr. 14408-64758 - Interieur, eerste Jaffapomp, detail (16-05-2017).jpg|miniatuur|geen|rechtop=0.55|Interieur machinehal. Bron: RCE/14408-64758.]]</li><!--
--><li style="display: inline-block; margin: 0.5em; vertical-align: top;">[[Bestand:Doc.nr. 14408-64757 - Interieur, eerste Jaffapomp vanaf de trap (16-05-2017).jpg|miniatuur|geen|rechtop=0.55|Interieur machinehal. Bron: RCE/14408-64757.]]</li><!--
--><li style="display: inline-block; margin: 0.5em; vertical-align: top;">[[Bestand:Doc.nr. 14408-64762 - Interieur, kast met oliekannetjes (16-05-2017).jpg|miniatuur|geen|rechtop=0.55|Kast met oliekannetjes. Bron: RCE/14408-64762.]]</li><!--
--><li style="display: inline-block; margin: 0.5em; vertical-align: top;">[[Bestand:Doc.nr. 14408-64765 - Interieur, gereedschapsbord (16-05-2017).jpg|miniatuur|geen|rechtop=0.55|Gereedschapsbord. Bron: RCE/14408-64765.]]</li>
</ul></div>

Interieur machinehal. Bron: RCE/14408-64758.
Interieur machinehal. Bron: RCE/14408-64757.
Kast met oliekannetjes. Bron: RCE/14408-64762.
Gereedschapsbord. Bron: RCE/14408-64765.

Voorbeeld 4, meerdere afbeeldingen in hetzelfde kader

De sjablonen hiervoor zijn speciaal gemaakt voor de weekrapporten en niet universeel bruikbaar.

{{Weekrapporten Bestek 6/Twee afbeeldingen in een kader
  | afb.1=Weekrapport No. 1.1..jpg
  | afb.2=Weekrapport No. 1.2..jpg
  | onderschrift=Weekrapport no. 1.}}
Lorem ipsum ... arcu. {Alinea 1}
<br clear=all>

Weekrapport no. 1.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Links