Dit artikel biedt enkele gebruiksscenario’s om te laten zien hoe u afbeeldingen kunt vergroten of verkleinen, bijsnijden, passen, vullen en uitlijnen.
Het formaat van afbeeldingen wijzigen
We gebruiken de URL-query van de afbeelding om het formaat van afbeeldingen te wijzigen. Bijvoorbeeld:
Specificeer de breedte en de behoudverhouding
1
Specificeer de hoogte en de behoudverhouding
1
Geef de breedte en hoogte op
1
Het kan niet alleen worden gebruikt voor pagina bronnen, maar ook voor de statische afbeeldingen en externe afbeeldingen. Naast de paginabronnen wordt het formaat van andere echter aangepast op basis van de inlinestijl, dat wil zeggen dat hun oorspronkelijke grootte niet verandert.
Afbeeldingen uitlijnen
We kunnen afbeeldingen eenvoudig uitlijnen door URL-fragmenten toe te voegen. Zoals #center, #float-start en #float-end staat respectievelijk voor uitlijningscentrum, zwevend begin en zwevend einde.
Centrum
Het #center-fragment toevoegen om afbeeldingen in het midden uit te lijnen.
Bijvoorbeeld: @@P2@@.
Zwevende start
#float-start fragment voor zwevende afbeeldingen aan het begin toevoegen, moeten we het in de clearfix shortcode plaatsen om te voorkomen dat de lay-out wordt verbroken.
Houd er rekening mee dat u %% gebruikt in plaats van <> om inhoud volledig als Markdown weer te geven.
Bijvoorbeeld.
1{{/% clearfix %/}}
2 TEXTS AROUNDS THE IMAGE.
3{{/% /clearfix %/}}
Zwevend einde
#float-end toe te voegen.
Bijvoorbeeld.
1{{/% clearfix %/}}
2 TEXTS AROUNDS THE IMAGE.
3{{/% /clearfix %/}}
Onderschrift
HBS staat het gebruik van de afbeeldingstitel als bijschrift toe. Deze functie is standaard uitgeschakeld. U moet de parameter post.imageTitleAsCaption inschakelen:
params.toml
1[bericht]
2 imageTitleAsCaption = 'waar'
params.yaml
1bericht:
2 imageTitleAsCaption: waar
params.json
1{
2 "bericht": {
3 "imageTitleAsCaption": "waar"
4 }
5}
1
Afbeeldingen bijsnijden
Snijd een afbeelding bij zodat deze overeenkomt met de opgegeven afmetingen, zonder het formaat te wijzigen. U moet zowel de breedte als de hoogte opgeven. Gebruik de optie anker1 om het ankerpunt van het bijsnijdvak te wijzigen.
1
- Het formaat
[width]x[height]is vereist. [anchor]is optioneel, de,wordt gebruikt om de maat en het anker te scheiden.
| Voorbeelden | ||
|---|---|---|
 |  |  |
 |  |  |
 |  |  |
Afbeeldingen vullen
Snijd een afbeelding bij en wijzig het formaat zodat deze overeenkomt met de opgegeven afmetingen. U moet zowel de breedte als de hoogte opgeven. Gebruik de optie anker1 om het ankerpunt van het bijsnijdvak te wijzigen.
1
- Het formaat
[width]x[height]is vereist. [anchor]is optioneel, de,wordt gebruikt om de maat en het anker te scheiden.
| Voorbeelden | ||
|---|---|---|
 |  |  |
 |  |  |
 |  |  |
Passende afbeeldingen
Verklein een afbeelding zodat deze binnen de gegeven afmetingen past, terwijl de beeldverhouding behouden blijft. U moet zowel de breedte als de hoogte opgeven.
1
Filters
Helderheid
brightness moet binnen het bereik (-100, 100) liggen.
1
Kleurbalans
ColorBalance maakt een filter dat de kleurbalans van een afbeelding verandert. De percentageparameters voor elk kleurkanaal (rood, groen, blauw) moeten binnen het bereik (-100, 500) liggen.
1
Inkleuren
Colorize maakt een filter dat een ingekleurde versie van een afbeelding produceert. De tintparameter is de hoek op het kleurenwiel, doorgaans binnen het bereik (0, 360). De verzadigingsparameter moet binnen het bereik (0, 100) liggen. De percentageparameter specificeert de sterkte van het effect, deze moet binnen het bereik (0, 100) liggen.
1
Contrast
contrast moet binnen het bereik (-100, 100) liggen.
1
Gamma
Gamma creëert een filter dat een gammacorrectie op een afbeelding uitvoert. De gammaparameter moet positief zijn. Gamma = 1 geeft het originele beeld. Gamma kleiner dan 1 maakt het beeld donkerder en gamma groter dan 1 maakt het lichter.
1
Gaussiaans vervagen
Past een Gaussiaanse vervaging toe op een afbeelding.
1
Grijstinten
Grijswaarden maakt een filter dat een grijswaardenversie van een afbeelding produceert.
1
Tint
Tint creëert een filter dat de tint van een afbeelding roteert. De kleurtoonhoekverschuiving ligt doorgaans binnen het bereik -180 tot 180.
1
Omkeren
Omkeren maakt een filter dat de kleuren van een afbeelding tenietdoet.
1
Pixelachtig
Pixelate maakt een filter dat een pixeleffect op een afbeelding toepast.
1
Verzadiging
Verzadiging creëert een filter dat de verzadiging van een afbeelding verandert.
1
Sepia
Sepia maakt een filter dat een sepiakleurige versie van een afbeelding produceert.
1
Sigmoïde
Sigmoid maakt een filter dat het contrast van een afbeelding verandert met behulp van een sigmoïdale functie en de aangepaste afbeelding retourneert. Het is een niet-lineaire contrastverandering die handig is voor fotoaanpassingen, omdat lichte en schaduwdetails behouden blijven.
1
Onscherp masker
UnsharpMask maakt een filter dat een afbeelding scherper maakt. De sigma-parameter wordt gebruikt in een gaussische functie en beïnvloedt de effectstraal. Sigma moet positief zijn. De verscherpingsradius is ongeveer gelijk aan 3 * sigma. De parameter ‘hoeveelheid’ bepaalt hoeveel donkerder en hoeveel lichter de randranden worden. Meestal tussen 0.5 en 1.5. De drempelparameter regelt de minimale helderheidsverandering die wordt verscherpt. Meestal tussen 0 en 0.05.
1
