Deze maand besteden we extra aandacht aan WordPress én het Handboek WordPress 5. We praten (weer) met schrijver Dirkjan van Ittersum. Deze keer over de vernieuwingen in WordPress 5 en de mogelijkheden van WordPress. We laten je kennis maken met het boek door wat voorproefjes uit het boek op dit WordPress-blog (Computer Creatief) te plaatsen. Daarnaast vertellen we over onze eigen ervaringen met WordPress. We beginnen de voorproefjes met de beschrijving van de nieuwe visuele editor Gutenberg, de opvolger van de ‘klassieke’ editor. Dit is deel 2 van het gebruik van de visuele editor: Afbeeldingen toevoegen. Deel 1 vind je HIER. (H.F.)

Afbeeldingen toevoegen

Er zijn meerdere mogelijkheden om een afbeelding toe te voegen aan een bericht. We zagen al even de mogelijkheid om een beeld inline toe te voegen aan een tekstblok. Die optie biedt weinig mogelijkheden om de positie van het beeld te bepalen en is daarom van beperkt nut. Veel beter is het om de afbeelding als blok toe te voegen. Er zijn drie opties: afbeelding, omslagafbeelding en galerij. We bespreken ze in de volgende paragrafen.

Bestandsformaten voor afbeeldingen

Voor beelden kunt u de bestandsformaten JPG, GIF en PNG gebruiken. Al deze bestandsformaten maken gebruik van compressie. Ze tasten de kwaliteit dus enigszins aan, maar daardoor zijn de bestanden wel veel kleiner en verschijnen ze sneller op het scherm. Ieder bestandsformaat heeft voor- en nadelen.

• JPG Geschikt voor foto’s. Met een goed beeldbewerkingsprogramma kunt u kiezen hoeveel detail u verliest. Wanneer u weinig kwaliteit wilt verliezen, zit u vast aan grotere bestanden. De JPG-bestanden worden soms ook opgeslagen met de extensie .jpeg, maar ze zijn verder hetzelfde.
• GIF Niet geschikt voor foto’s, maar wel voor beelden met strakke lijnen, grote kleurvlakken of logo’s. Vlakken met een egale kleur worden goed weergegeven door GIF-bestanden. Bij JPG-bestanden vormen die een probleem.
• PNG Geschikt voor zowel foto’s als strakke lijnen, vlakken en logo’s. Het kwaliteitsverlies is minder dan bij JPG, maar de bestanden zijn wel wat groter. Stokoude browsers kunnen niet zo goed overweg met PNG, maar die worden nauwelijks nog gebruikt. Inmiddels is PNG een prima keuze.

Afbeelding

Door een blok in te voegen voor een afbeelding voegt u een losse afbeelding toe.U kunt het formaat en de uitlijning na het plaatsen van het bericht bepalen. Zo kunt u bijvoorbeeld een afbeelding links of rechts naast een alinea plaatsen.

1. Klik op het plusje om een blok toe te voegen.
2. Kies Afbeelding.
3. Om een afbeelding vanaf uw computer te uploaden klikt u op de knop Uploaden. Dit beeld komt in de mediabibliotheek te staan.
4. Als het bestand is geüpload plaatst WordPress de afbeelding over de volle tekstbreedte. Voeg eventueel een onderschrift toe.
5. In de kolom rechts (Documentopties) voegt u een alt-tekst toe. Dit is een omschrijving van wat er op het beeld te zien is. Het wordt gebruikt door voorleessoftware voor blinden en slechtzienden, maar ook door zoekmachines om op te slaan wat er te zien is.
6. Wilt u de afbeelding niet over de volle tekstbreedte? Versleep de blauwe bolletjes rechts of beneden om het beeld te verkleinen.
7. Als de afbeelding is geselecteerd (door er op te klikken) staan erboven pictogrammen. Gebruik ze om de verkleinde afbeelding links of rechts van de tekst te zetten.
8. Links van de foto staan pijltjes die omhoog en omlaag wijzen. Daarmee verplaatst u de afbeelding naar een vorige of volgende paragraaf.

TIP • Let op de grootte van afbeeldingen Wanneer u een groot aantal beelden naar WordPress kopieert, kan er een melding verschijnen dat u de uploadlimiet hebt bereikt. Allereerst is het belangrijk dat u niet te grote beelden uploadt naar WordPress. Maak er een gewoonte van beelden te verkleinen naar bijvoorbeeld 1024 pixels breed of hoog. Dat is voor de meeste websites groot genoeg. Krijgt u toch een waarschuwing dat u te grote beelden wilt uploaden? U kunt de maximale uploadgrootte aanpassen in het bestand php.ini. Dit bestand is in sommige gevallen te vinden via het control panel van uw hostingprovider of via FTP in de map php-bin. Verander in dit bestand het aantal MB’s bij upload_max_filesize. Lukt het u zelf niet? Vraag dan uw hostingprovider de limiet te verhogen.

Omslagafbeelding

Door het blok Omslagafbeelding te kiezen voegt u een afbeelding in met tekst eroverheen. Om de tekst leesbaar te houden wordt er een kleurvlak over het beeld heen gelegd.

1. Klik op de zojuist geüploade afbeelding. Klik daarna op Wijzig bloktype.
2. Verander het bloktype in Omslagafbeelding.
3. U ziet dat de afbeelding veel donkerder wordt. Er knippert ook een cursor. Typ een tekst over de foto.

TIP • Blokopties Bij de blokopties ziet u een paar nuttige keuzemogelijkheden. Zo ziet u onder ‘focuspunt kiezer‘ een miniatuurweergave van het beeld. Verschuif het rondje over de afbeelding om te bepalen welk deel zichtbaar is. Wat verder naar beneden vindt u de bedekkingskleur. Er staan al enkele kleuren: klik erop om te zien wat dit doet. Vindt u dat de achtergrondkleur teveel overheerst? Door het schuifje onder Achtergronddekking te verplaatsen past u het aan.

Hans Frederiks

Hans Frederiks is journalist en fotograaf en hoofdredacteur van blog.computercreatief.nl. Hij schrijft over ontwikkelingen op het gebied van computers, van vormgeving op het web en print, en fotografeert al zijn hele leven lang. Zijn specialisaties zijn panorama’s, landschappen en podiumfotografie. Zijn blog vind je HIER, zijn boeken vind je HIER.