Afgeronde afbeelding in WordPress

Op zoek naar een manier om een afgeronde afbeelding te maken in Gutenberg? Gutenberg is de standaard WordPress editor die zoveel mogelijkheden en functionaliteiten biedt om webpagina’s te ontwerpen. Je kunt je blog- of postpagina’s eenvoudig aanpassen met de Gutenberg-editor.

De Gutenberg editor wordt geleverd met een verschillend aantal elementen die blokken worden genoemd. Het afbeeldingsblok is een van de belangrijke blokken die je helpen om afbeeldingen toe te voegen aan je webpagina’s of posts.

Afgeronde afbeelding of ronde foto maken in Page builders

Vergeleken met andere paginabouwers zoals Elementor, biedt Gutenberg minder functies, maar het afbeeldingsblok heeft een aantal unieke afbeeldingsstijlopties. Afgeronde afbeeldingsfuncties zijn er daar één van. Elementor en andere paginabouwers hebben een optie om de randradius van de afbeeldingen te regelen. Met de border-radius instellingen kun je een afgeronde afbeelding instellen met Elementor.

Maar de Gutenberg paginabouwers worden geleverd met twee voorgestileerde afbeeldingsvormen. De standaard afbeeldingsvorm toont de afbeelding zoals hij is en de afgeronde vorm toont de afbeelding in een ronde vorm.

In dit artikel laten we je zien hoe je het gemakkelijkst een afgeronde afbeeldingsvorm kunt maken met de standaard Gutenberg editor voor WordPress.

Een afgeronde afbeelding maken in Gutenberg

Om een ronde afbeelding te maken met de Gutenberg paginabouwer moet je geüploade afbeelding een vierkante vorm hebben. Je kunt de functies voor het bewerken van afbeeldingen in Gutenberg gebruiken om je afbeelding vierkant te maken. Open een pagina met Gutenberg editor waar je de afgeronde afbeelding wilt toevoegen en klik op de “+” knop om een blok toe te voegen. Voeg nu het afbeeldingsblok toe en upload de afbeelding vanaf je computer.

Klik na het toevoegen van je afbeelding op de optie bijsnijden.

Klik nu bij de optie Aspectratio op de optie vierkant om de afbeelding vierkant bij te snijden.

Nadat het bijsnijden is voltooid, ga je naar het instellingenpaneel van het rechter dashboard en ga je naar de tab Blok. Hier zie je in het menu Stijlen de optie Standaardvorm en de optie Afgeronde vorm.

Klik gewoon op de afgeronde vorm en er wordt een afgeronde vorm van je afbeelding gemaakt.

Ronde afbeeldingen maken met border-radius

De CSS eigenschap border-radius voegt afgeronde hoeken toe aan afbeeldingen. Je kunt alle hoeken van de afbeelding afronden of alleen geselecteerde hoeken, de straal variëren op verschillende hoeken of een afbeelding weergeven in de vorm van een ovaal of een cirkel.

Ronde afbeeldingen kun je maken zoals in dit voorbeeld. Je kan dit oplossen door CSS toe te voegen aan je thema in je thema customizer:

.uagb-post-grid .uagb-post__image img {
border-radius: 50%;
object-fit: cover;
aspect-ratio: 1/1;
padding:1em;
}

Meer handleidingen over afgeronde hoeken en CSS

Meer handleidingen over afgeronde hoeken, CSS en border-radius instellen: