Voeg een afbeelding toe

Bij het onderstaande antwoord wordt ervan uitgegaan dat de tekstverwerker TinyMCE is geïnstalleerd. Zie hier voor een beschrijving van deze tekstverwerker.

Voor het toevoegen of wijzigen van een afbeelding zijn er twee zaken van belang:

  • de afbeelding moet op deze of een andere website aanwezig zijn.
  • de plaats van de afbeelding in de tekst.

Onder afbeelding worden foto’s, plaatjes, gescande bladzijden, enz. bedoeld.

Als de afbeelding nog een bijschrift bevat is de pagina „een afbeelding met begeleidende tekst” wellicht interessant. Op de pagina „Voeg een Word tekst met afbeelding toe - stappenplan” is een handleiding met een andere insteek te vinden.

1. De afbeelding moet op deze of een andere website aanwezig zijn

Als de afbeelding op een andere website staat hoeft u hier verder nog niets te doen. Over het algemeen is het minder/niet verstandig om direct naar een dergelijke afbeelding te verwijzen omdat u er nooit vanuit kunt gaan dat deze afbeelding op dit adres beschikbaar blijft. Als de afbeelding beschermd is met auteursrechten en u kunt het afbeeldingsrecht niet overnemen, dan is dit een optie. U kunt vaak een afbeelding vanaf een andere website op uw eigen computer opslaan door rechts te klikken op de afbeelding en dan de optie „Afbeelding opslaan als” of een vergelijkbare tekst te kiezen. Op sommige websites is het opslaan van afbeeldingen geblokkeerd: ofwel de tekst „Afbeelding opslaan als” is niet aanwezig, ofwel het opslaan lijkt gelukt te zijn, maar de afbeelding wordt niet op de harde schijf gezet. In deze situaties is het via een omweg toch mogelijk de afbeelding op te slaan: kopieer de afbeelding naar het klembord en plak de afbeelding in een fotobewerkingsprogramma (zie de pagina: „Verkleinen van een afbeelding”).

Om een afbeelding vanaf de eigen computer op de website te zetten gaat u als volgt te werk: bij het toevoegen/wijzigen van een (boek-)pagina kunt u in het onderdeel „Bestandsbijlages” afbeeldingen bijvoegen. Het is verstandig om voor het vullen van de inhoud van de pagina de bijlages eerst bij te voegen en daarna de pagina op te slaan. De afbeelding kan dan daarna in de tekst meteen zichtbaar worden en goed worden gepositioneerd.

2. De plaats van de afbeelding in de tekst

Onderstaand wordt ervan uitgegaan dat u de tekstverwerker TinyMCE gebruikt.

Om de afbeelding toe te voegen voert u de volgende stappen uit:

  1. Ga naar de juiste plaats in de tekst en zet de cursor op deze plaats.
  2. Klik op het afbeeldingsicoonafbeeldings-knop in de knoppenbalk van de editor om een afbeelding in te voegen.
  3. Vul in het extra scherm dat nu wordt geopend de gegevens van de afbeelding in. Dit scherm bestaat uit een aantal tabbladen: Algemeen, Beeld en Geavanceerd.

Om een bestaande afbeelding te wijzigen, klik dan met de rechtermuisknop op de afbeelding zelf en kies in het keuzemenu: „Eigenschappen van afbeelding”. U krijgt dan een extra scherm, zoals in punt 3. hierboven is beschreven.

Aangezien TinyMCE niet altijd (geheel) vertaald is, wordt de Nederlandse vertaling gebruikt en staan de corresponderende Engelse woorden in de paragraaftitels er achter.

3. Tabblad Algemeen/ General

Bestandsbijlagesa. Afbeelding

Als het een eigen afbeelding is, zet deze dan eerst bij het onderdeel „Bestandsbijlages” op de website. Na het uploaden van de afbeelding staat op de regel, onder de naam zoals die op de harde schijf van de pc staat, een regel met de naam waaronder deze op de website is opgeslagen. De naam is ofwel: www.example.com/files/afbeeldingsnaam.xxx ofwel www.example.com/system/files/afbeeldingsnaam.xxx (dus met of zonder „system”). Tevens kan het woord „files” anders zijn. Beide zijn afhankelijk van de instellingen in Drupal (vraag dit na bij uw webmaster). Als de naam: afbeeldingsnaam.xxx op de website al bestond, dan zal de naam afwijken van de naam op de pc.

Over het algemeen is het verstandig om eerst de bijlages toe te voegen, dan de pagina op te slaanen vervolgens de tekst aan te vullen met de afbeelding.

Achter Afbeelding vult u de websitenaam van de afbeelding in: alleen het deel dat begint met „/files/”, zoals hiervoor beschreven. Voorbeeld: u hebt de afbeelding „font.gif” uit de map „C:\Afbeeldingen" op uw website gezet. De naam die u achter Afbeelding moet plaatsen is dan: /files/font.gif.
Staat er een spatie in de bestandsnaam op de pc, dan wordt de spatie in de Drupal-bestandsnaam vervangen door een + teken of %20. Na het plakken van de Drupal-bestandsnaam moet het + teken of de %20 weer vervangen worden door een spatie, anders is de afbeelding niet zichtbaar. Beter is het om nooit bestandsnamen met een spatie te gebruiken.

Staat de afbeelding op een andere website, en wilt u hiernaar verwijzen, zet dan de volledige URL (= webadres) van de afbeelding in het vak Afbeelding, inclusief „http://”. Voorbeeld van een volledige naam: „http://drupalhandboek.nl/files/font.gif”.

Nadat u de naam hebt ingevuld en op de tabtoets hebt gedrukt (of de cursor in een ander vakje hebt gezet), zal de afbeelding in het grote kader, het „Voorbeeld”, verschijnen. Is dat niet het geval, dan is de naam die u hebt opgegeven onjuist of is de afbeelding nog niet opgeslagen op uw website: bij Bestandsbijlages moet(en) de afbeelding(en) voor deze pagina zijn bijgevoegd.

Attentie

Als de originele naam van een afbeelding een spatie of speciaal teken bevat, dan kan de Drupal-bestandsnaam onjuiste tekens bevatten. Als de afbeelding niet zichtbaar wordt nadat deze in de tekst is gezet en de pagina is opgeslagen, controleer dan of dit de oorzaak is. Een spatie wordt vervangen door een plusteken. Speciale tekens vallen ofwel weg of worden vaak in de Drupalnaam vervangen door een serie tekens, beginnend met een &.
Conclusie: probeer spaties en speciale tekens in de bestandsnaam te vermijden!

b. Beschrijving en Titel

U kunt de beschrijving leeg laten. Als u dit doet krijgt u een waarschuwing die u kunt negeren. Het is verstandig om de beschrijving wel in te vullen: niet iedereen kan de afbeeldingen zien die op een webpagina staan, maar wel de naam van de afbeelding lezen of horen. Denk hierbij o.a. aan visueel gehandicapten.

De titel (title) die u invult zal in een extra kader zichtbaar zijn als de muis even boven de afbeelding blijft staan (zie de foto hieronder).

Het is verstandig zowel Beschrijving als Title in te vullen, eventueel met dezelfde tekst.

4. Tabblad Beeld / Appearance

Het effect van alle wijzigingen op dit tabblad kunt u direct in het voorbeeld rechtsboven zien in het venster met dit tabblad.

a. Uitlijning / Aligment

Hier kan de positionering van een afbeelding binnen de tekst worden opgegeven.De afbeelding kan op de volgende manieren in de tekst komen:

1. „— standaard —”, Basislijn, Onder of Onderkant tekst (— not set —, Baseline, Bottom of Absolute Bottom)

De afbeelding zal altijd op de opgegeven plaats staan. Het laatste deel van de tekst voor de afbeelding staat links naast de afbeelding. Voor zover er rechts naast de afbeelding nog plaats is wordt deze regel vervolgd aan de onderkant ervan. De resterende regels komen onder de tekst te staan. DuinovergangDe exacte plaatsing is mede afhankelijk van de positie van de afbeelding op de regel en de grootte ervan. Ook de instelling van de gebruikte browser is hierop van invloed. De hoogte van de regel wordt dus gelijk aan de hoogte van de afbeelding.

2. Boven of Bovenkant tekst (Top of Texttop)

Ook hier wordt de hoogte van de regel gelijk aan de hoogte van de afbeelding. Het eerste deel van de tekst wordt rechts bovenaan de afbeelding vervolgd en het restant onder de afbeelding.

3. Midden of Absoluut Midden (Middle of Absolute middle)

Hetzelfde als ad 1 en 2, maar de tekst wordt rechts in het midden van de afbeelding vervolgt. Zie bovenstaande foto.

4. Links resp. Rechts

De afbeelding wordt links resp. rechts van de tekst gezet. In het gehele veld naast de afbeelding komt tekst.

b. Afmetingen / Dimensions

Hier wordt de breedte resp. hoogte van de afbeelding in pixels opgegeven. Normaal worden deze gegevens automatisch afgeleid van de afbeelding zelf. U kunt de maten zelf aanpassen. Als „Verhoudingen behouden” aangevinkt is (dit is de standaard), dan wordt automatisch, bij aanpassing van de maat, de hoogte afgeleid van de breedte of de breedte van de hoogte. Na het uitvinken van „Verhoudingen behouden” is dit automatisme uitgeschakeld.

Als de afbeelding wordt verkleind, door de breedte resp. hoogte te wijzigen, is het over het algemeen verstandig om de afbeelding te verkleinen naar het gewenste formaat voordat deze op de website wordt gepubliceerd daar het versturen van een te grote afbeelding extra tijd kost voor het versturen ervan naar de site. Hierdoor zal het langer duren dan nodig voordat de pagina in de browser wordt weergegeven. De kijker zal dan eerder beslissen om de website vaarwel te zeggen omdat de wachttijd te groot is.
Een foto uit een digitale fotocamera is al snel 1.500 tot 3.000 Kb groot, terwijl deze op een website vaak verkleind wordt getoond in een grootte van 640 x 480 pixels of kleiner en dan slechts 50 tot 125 Kb behoet te zijn, dus met een factor 30 kleiner.
Dit effect is zeer merkbaar bij websites waar veel afbeeldingen per pagina worden getoond.
U bespaart zelf ook geld door de afbeeldingen zo klein als nodig te houden daar u bijna bij iedere hostingprovider betaalt voor onder andere het aantal verzonden tekens per periode.
Zie de pagina „Verkleinen van een afbeelding” voor een beschrijving.

Als de afbeelding wordt vergroot op de site, dan kan dit de kwaliteit ervan negatief beïnvloeden.

Als de breedte en hoogte van een afbeelding niet is opgegeven weet een browser van te voren niet hoe groot de afbeelding wordt. Een browser moet dan eerst de afbeelding laden en bekijken voordat het weet hoeveel ruimte er gereserveerd moet worden op de pagina. In de tussentijd kan de browser dus niet veel anders doen dan wachten. Als de hoogte en breedte van de afbeelding worden gegeven in de html code kan een browser gewoon verder met het opbouwen van een pagina terwijl het op de achtergrond de afbeeldingen laadt.

c. Verticale marge / vertical space

De afbeelding kan verticaal naar beneden worden verplaatst. U kunt hier het hoogteverschil in pixels opgeven. Zowel boven als onder de afbeelding wordt ruimte vrijgehouden ter grootte van het opgegeven aantal pixels.

d. Horizontale marge / Horizontal space

Hetgeen voor de „verticale marge” geldt is ook van toepassing op de horizontale as. Het opgegeven aantal pixels wordt aan beide zijden van de afbeelding vrijgehouden van de tekst.

e. Rand / Border

Als u een rand om de afbeelding wilt plaatsen, kan dit perfect met „Rand”. De dikte van de rand wordt weer in pixels opgegeven.

f. Klasse / Class

De beschikbare CSS-klassen worden in het afrolmenu weergegeven. Een klasse wordt gebruikt om de opmaak te definiëren. De te gebruiken klassen zijn volledig afhankelijk van het gebruikte sjabloon (template) en de invulling die de webbouwer heeft gekozen bij de aanmaak van het template voor de website. Tevens maken diverse Drupal-modules zelf ook nieuwe klassen aan. Neem contact hierover op met de Drupal-webmaster van uw site.
In het algemeen wordt hier niets ingevuld.

f. Stijl / Style

In de „Stijl” (Engels: „Style”) worden door TinyMCE de HTML-codes geplaatst voor de verticale- en horizontale ruimte en de rand, zoals hierboven door u is gedefiniëerd. In dit vak kunt u de HTML-codes verder verfijnen.
Voorbeeld: de gedefinieerde horizontale ruimte om de afbeelding is 5 pixels. In „Stijl” staat dan: „margin-left: 5px; margin-right: 5px;”. Als de ruimte alleen aan de linkerkant van de afbeelding moet staan kan in „Stijl” „margin-right: 5px;” worden verwijderd.

5. Tabblad Geavanceerd / Advanced

a. Afbeeldingen wisselen / Swap image

Het is mogelijk de afbeelding op een website te wijzigen, afhankelijk van de positie van de cursor. Deze mogelijkheid wordt o.a. veel gebruikt bij inhoudsopgaven (met hyperlinks) om aan te geven welke keuze actief wordt als de link wordt aangeklikt.
Door het aanvinken van „Alternatieve afbeelding” geeft u aan dat u de afbeelding afhankelijk van de cursorpositie wilt wijzigen.
Bij „voor muis-over” kunt u de afbeelding opgeven die wordt weergegeven als de cursor boven de afbeelding staat.
Bij „voor muis-uit” geeft u de afbeelding die wordt getoond als de cursor de afbeelding verlaat.
Een voorbeeld ziet u bij bovenstaande foto.

In totaal kunnen 3 verschillende afbeeldingen worden weergegeven. De afbeelding die op het tabblad „Algemeen” wordt benoemd wordt als eerste getoond. De afbeelding bij „muis-over” alleen zolang de muis er boven staat. Als de muis van de afbeelding af wordt geschoven, dan volgt de afbeelding uit „muis-uit”. Als het de bedoeling is de originele afbeelding te laten zien nadat de muis niet meer boven de afbeelding staat, geef dan bij „muis-uit” de originele afbeelding op.

b. Diversen / Miscellaneous

Het is ons niet gelukt om al deze opties te laten werken. Hieronder volgt de beschrijving zoals wij verwachten dat de bedoeling is.

c. Id

Hier kunt u de afbeelding een identificatie meegeven. Deze is onder meer relevant als binnen CSS en/of Javascript de afbeelding herkend moet worden.

d. Taal richting / Language direction

Hier wordt opgegeven of de richting waarin de tekst wordt „geschreven” wijzigt. „— geen —” betekent dat de huidige richting wordt vervolgd.
„Links naar rechts” is de normale schrijfrichting voor o.a. de West-Europese talen en „Rechts naar links” voor o.a. Arabische talen en Hebreeuws.

e. Taalcode / Language code

Hiermee kan de taal(-versie) worden opgegeven (waarschijnlijk van de afbeelding). Voor Nederlands is dit nl-NL resp. nl-BE. Voor Amerikaans is het en-US. De taalcode hoeft alleen te worden opgegeven als deze afwijkt van de gebruikte standaard in uw Drupal-website.

f. Afbeelding opdelen en Link naar lange omschrijving / Image map en Long description link

Dit is niet bekend.

randomness