Dit artikel biedt gebruiksvoorbeelden voor het vergroten/verkleinen, bijsnijden, passend maken, vullen en uitlijnen van afbeeldingen.
Afbeeldingen Verkleinen
We gebruiken de URL-query van een afbeelding voor het aanpassen van de grootte. Bijvoorbeeld:
Breedte opgeven en verhouding behouden
1
Hoogte opgeven en verhouding behouden
1
Breedte en hoogte opgeven
1
Dit werkt niet alleen voor paginabronnen, maar ook voor statische afbeeldingen en externe afbeeldingen. Voor andere bronnen dan paginabronnen wordt de grootte echter aangepast via inline stijl; de werkelijke bestandsgrootte verandert niet.
Afbeeldingen Uitlijnen
We kunnen afbeeldingen eenvoudig uitlijnen door URL-fragmenten toe te voegen, zoals #center, #float-start en #float-end voor respectievelijk gecentreerd uitlijnen, zweven naar links en zweven naar rechts.
Gecentreerd
Voeg het fragment #center toe om afbeeldingen te centreren.
Bijvoorbeeld: .
Zweven naar links
#float-start toe om afbeeldingen naar links te laten zweven. Omsluit de afbeelding in de clearfix-shortcode om de lay-out te bewaren.
Gebruik %% in plaats van <> om inhoud volledig als Markdown te renderen.
Voorbeeld:
1{{/% clearfix %/}}
2 TEKST RONDOM DE AFBEELDING.
3{{/% /clearfix %/}}
Zweven naar rechts
#float-end toe te voegen.
Voorbeeld:
1{{/% clearfix %/}}
2 TEKST RONDOM DE AFBEELDING.
3{{/% /clearfix %/}}
Onderschrift
HBS staat toe de afbeeldingstitel als onderschrift te gebruiken. Deze functie is standaard uitgeschakeld; schakel de parameter post.imageTitleAsCaption in:
params.toml
1[post]
2 imageTitleAsCaption = true
params.yaml
1post:
2 imageTitleAsCaption: true
params.json
1{
2 "post": {
3 "imageTitleAsCaption": true
4 }
5}
1
Afbeeldingen Bijsnijden
Snij een afbeelding bij op de opgegeven afmetingen zonder te verkleinen. Breedte en hoogte zijn verplicht. Gebruik de ankeroptie1 om het ankerpunt van het bijsnijdkader te wijzigen.
1
- De grootte
[width]x[height]is verplicht. [anchor]is optioneel; gebruik,als scheidingsteken tussen grootte en anker.
| Voorbeelden | ||
|---|---|---|
 |  |  |
 |  |  |
 |  |  |
Afbeeldingen Vullen
Snij een afbeelding bij en pas de grootte aan op de opgegeven afmetingen. Breedte en hoogte zijn verplicht. Gebruik de ankeroptie1 om het ankerpunt van het bijsnijdkader te wijzigen.
1
- De grootte
[width]x[height]is verplicht. [anchor]is optioneel; gebruik,als scheidingsteken tussen grootte en anker.
| Voorbeelden | ||
|---|---|---|
 |  |  |
 |  |  |
 |  |  |
Afbeeldingen Passend Maken
Verklein een afbeelding zodat deze past binnen de opgegeven afmetingen met behoud van de beeldverhouding. Breedte en hoogte zijn verplicht.
1
Filters
Helderheid
De brightness moet in het bereik (-100, 100) liggen.
1
Kleurbalans
ColorBalance maakt een filter dat de kleurbalans van een afbeelding aanpast. De percentageparameters voor elk kleurkanaal (rood, groen, blauw) moeten in het bereik (-100, 500) liggen.
1
Inkleuren
Colorize maakt een filter dat een gekleurde versie van een afbeelding produceert. De tintparameter is de hoek op het kleurenwiel, doorgaans in het bereik (0, 360). De verzadigingsparameter moet in het bereik (0, 100) liggen. De percentageparameter geeft de sterkte van het effect aan en moet in het bereik (0, 100) liggen.
1
Contrast
Het contrast moet in het bereik (-100, 100) liggen.
1
Gamma
Gamma maakt een filter dat een gammacorrectie uitvoert op een afbeelding. De gammaparameter moet positief zijn. Gamma = 1 geeft de originele afbeelding. Gamma kleiner dan 1 maakt de afbeelding donkerder; gamma groter dan 1 maakt hem lichter.
1
Gaussiaans vervagen
Past een gaussiaanse vervaging toe op een afbeelding.
1
Grijswaarden
Grayscale maakt een filter dat een grijswaardenversie van een afbeelding produceert.
1
Tint
Hue maakt een filter dat de tint van een afbeelding roteert. De tinthoekverplaatsing ligt doorgaans in het bereik -180 tot 180.
1
Omgekeerde kleuren
Invert maakt een filter dat de kleuren van een afbeelding negeert.
1
Pixeleren
Pixelate maakt een filter dat een pixelatie-effect toepast op een afbeelding.
1
Verzadiging
Saturation maakt een filter dat de verzadiging van een afbeelding aanpast.
1
Sepia
Sepia maakt een filter dat een sepia-getinte versie van een afbeelding produceert.
1
Sigmoid
Sigmoid maakt een filter dat het contrast van een afbeelding aanpast via een sigmoïde functie. Het is een niet-lineaire contrastaanpassing die nuttig is voor fotobewerkingen, omdat het de details in hoge lichten en schaduwen behoudt.
1
Verscherpingsmasker
UnsharpMask maakt een filter dat een afbeelding verscherpt. De sigmaparameter wordt gebruikt in een gaussiaanse functie en beïnvloedt de straal van het effect. Sigma moet positief zijn. De verscherpingsstraal is ruwweg gelijk aan 3 × sigma. De hoeveelheidsparameter bepaalt hoeveel donkerder en lichter de randen worden. Doorgaans tussen 0.5 en 1.5. De drempelparameter bepaalt de minimale helderheidsverandering die wordt verscherpt. Doorgaans tussen 0 en 0.05.
1
