Afbeeldingen aanpassen met WordPress duotoonfilters

Bron

door schaduwen of hooglichten onder de voorbeeldbalk te selecteren, worden themakleuren weergegeven

In versie 5.8 zijn WordPress duotoonfilters gelanceerd. Met Duotone-filters kunnen makers van inhoud een unieke uitstraling aan hun foto’s toevoegen zonder de fotobestanden te bewerken.

Hier zult u willen overwegen hoe klanten deze kleuren kunnen gebruiken. Welke opties wilt u direct beschikbaar hebben voor klanten om te selecteren bij het toevoegen van een afbeelding? Lees verder om te leren hoe u WordPress duotoonfilters gebruikt en configureert.

Hub-aanmelding

Wat is duotoon?

Duotoon verwijst naar het gebruik van twee contrasterende kleuren, of een dubbele toon. Net als bij het gebruik van grijswaarden op afbeeldingen, is het gebruik van een duotooneffect het gebruik van twee kleuren voor donkere en lichte kleuren op een afbeelding.

Met WordPress duotoonfilters kunt u unieke kleuren selecteren voor de schaduwen en hooglichten van een foto. U kunt een voorinstelling, kleuren uit het palet van uw thema of een aangepaste kleur naar keuze gebruiken.

Originele afbeeldingen zijn veilig met het duotoonfilter. Het duotooneffect werkt met behulp van SVG-filters en de CSS-filtereigenschap , maar wordt niet weergegeven in RSS-feeds of plaatsen die rechtstreeks gebruikmaken van de afbeeldings-URL.

Hoe WordPress duotoonfilters te gebruiken

Het creëren van artistieke effecten in uw afbeeldingen is mogelijk binnen de blokeditor zonder uw afbeeldingsbestand te overschrijven. Laten we eens kijken hoe u duotone-afbeeldingen kunt gebruiken.

1. Voeg een afbeelding toe aan je bericht

Door een afbeelding met een hoog contrast toe te voegen, zullen duotoonafbeeldingen echt opvallen. In de afbeeldingsblokwerkbalk kun je de duotoonknop selecteren.

2. Kies uit de duotoonfilteropties

Vanaf hier kunt u kiezen uit standaardopties.

selecteer de duotoonoptie in de afbeeldingsblokwerkbalk

3. Pas aan met behulp van de kleurenkiezer

Als u op de cirkels in de voorbeeldbalk klikt, kunt u elke gewenste kleur selecteren of handmatig een kleurwaarde invoeren.

WordPress duotoon filtervoorbeeld kleurkiezer

Als u de optie Schaduwen of Hooglichten selecteert, worden kleuren weergegeven die deel uitmaken van het kleurenpalet van uw thema. Dit is een geweldige manier om de vooraf gedefinieerde ontwerpitems op uw site te volgen.

door schaduwen of hooglichten onder de voorbeeldbalk te selecteren, worden themakleuren weergegeven

Opmerking: met de knop Wissen worden alle effecten verwijderd.

WordPress duotoon thema-opties maken

Thema-ontwikkelaars en degenen die websites voor klanten bouwen, willen misschien wat meer controle over welke duotone-opties beschikbaar zijn voor klanten. Daarvoor moeten we naar Theme.json kijken.

Theme.json is een nieuwe methode om alle beschikbare opties te beheren voor degenen die uw thema (of kindthema) gebruiken. Hiermee kunt u bepalen welke keuzes gebruikers hebben bij het stylen van hun websites.

Bekijk het voorbeeld van de WordPress Developer Documentation om een voorbeeld van specifieke theme.json-code te zien:

{ "versie 1, "instellingen": { "kleur": { "duotoon": [ { "kleuren": [ "#000", "#FFF"], "slug": "zwart-wit", "naam": "Zwart-wit" } ] } }
}

Zie ook de documentatie voor Ondersteunt kleur in het Block Editor Handbook om opties in specifieke blokken op te maken.

Bekijk deze tutorial van FullSiteEditing voor een uitgebreidere duik in het ontwikkelen van duotoonconfiguratie-opties. Hier kun je een manier vinden om ondersteuning toe te voegen voor alle blokken op je site, of de duotoonopties te isoleren voor specifieke bloktypes, of zelfs duotoonopties uit te schakelen.

In Anne’s tutorial kun je zien hoe WordPress duotoonfilters worden toegepast op specifieke bloktypes. Anne is een developer relations manager, gesponsord door Automattic, om het WordPress Full Site Editing Outreach-programma te leiden .

Het bericht Afbeeldingen aanpassen met WordPress duotoonfilters verscheen eerst op GoDaddy Blog .