Cet article propose quelques cas d’utilisation pour montrer comment redimensionner, recadrer, ajuster, remplir et aligner des images.
Redimensionner les images
Nous utilisons la requête URL de l’image pour redimensionner les images. Par exemple :
Spécifiez la largeur et conservez le rapport
1
Spécifiez la hauteur et le rapport de préservation
1
Spécifiez la largeur et la hauteur
1
Il peut être utilisé non seulement pour ressources des pages, mais aussi pour les images statiques et les images externes. Cependant, en plus des ressources de page, d’autres sont redimensionnées selon le style en ligne, c’est-à-dire que leur taille d’origine ne changera pas.
Alignement des images
Nous pouvons facilement aligner les images en ajoutant des fragments d’URL. Tels que #center, #float-start et #float-end représentent respectivement le centre d’alignement, le début flottant et la fin flottante.
Centre
Ajout du fragment #center pour aligner les images au centre.
Par exemple : @@P2@@.
Démarrage flottant
#float-start pour les images flottantes au début, nous devons l’envelopper dans le shortcode clearfix pour éviter de casser la mise en page.
Veuillez noter que vous utilisez %% au lieu de <> pour restituer entièrement le contenu au format Markdown.
Par exemple.
1{{/% clearfix %/}}
2 TEXTS AROUNDS THE IMAGE.
3{{/% /clearfix %/}}
Fin flottante
#float-end.
Par exemple.
1{{/% clearfix %/}}
2 TEXTS AROUNDS THE IMAGE.
3{{/% /clearfix %/}}
Légende
HBS permet d’utiliser le titre de l’image comme légende, cette fonctionnalité est désactivée par défaut, vous devez activer le paramètre post.imageTitleAsCaption :
params.toml
1['poste ']
2 'imageTitleAsCaption ' = 'vrai'
params.yaml
1poste :
2 imageTitleAsCaption : vrai
params.json
1{
2 "poste ": {
3 "imageTitleAsCaption ": "vrai"
4 }
5}
1
Recadrer les images
Recadrez une image pour qu’elle corresponde aux dimensions données sans la redimensionner. Vous devez fournir à la fois la largeur et la hauteur. Utilisez l’option Anchor[^1] pour modifier le point d’ancrage de la zone de recadrage.
1
- La taille
[width]x[height]est obligatoire. [anchor]est facultatif, le,sert à séparer la taille et l’ancre.
[^1] : lors de l’utilisation de la méthode Crop ou Fill, l’ancre détermine l’emplacement de la zone de recadrage. Vous pouvez spécifier TopLeft, Top, TopRight, Left, Center, Right, BottomLeft, Bottom, BottomRight ou Smart. La valeur par défaut est Smart.
| Exemples | ||
|---|---|---|
 |  |  |
 |  |  |
 |  |  |
Remplir les images
Recadrez et redimensionnez une image pour qu’elle corresponde aux dimensions données. Vous devez fournir à la fois la largeur et la hauteur. Utilisez l’option Anchor[^1] pour modifier le point d’ancrage de la zone de recadrage.
1
- La taille
[width]x[height]est obligatoire. [anchor]est facultatif, le,sert à séparer la taille et l’ancre.
| Exemples | ||
|---|---|---|
 |  |  |
 |  |  |
 |  |  |
Ajuster les images
Réduisez l’échelle d’une image pour l’adapter aux dimensions données tout en conservant les proportions. Vous devez fournir à la fois la largeur et la hauteur.
1
Filtres
Luminosité
Le brightness doit être dans la plage (-100, 100).
1
Balance des couleurs
ColorBalance crée un filtre qui modifie la balance des couleurs d’une image. Les paramètres de pourcentage pour chaque canal de couleur (rouge, vert, bleu) doivent être dans la plage (-100, 500).
1
Coloriser
Colorize crée un filtre qui produit une version colorisée d’une image. Le paramètre de teinte est l’angle sur la roue chromatique, généralement dans la plage (0, 360). Le paramètre de saturation doit être dans la plage (0, 100). Le paramètre pourcentage spécifie la force de l’effet, il doit être dans la plage (0, 100).
1
Contraste
Le contrast doit être dans la plage (-100, 100).
1
Gamma
Gamma crée un filtre qui effectue une correction gamma sur une image. Le paramètre gamma doit être positif. Gamma = 1 donne l’image originale. Un gamma inférieur à 1 assombrit l’image et un gamma supérieur à 1 l’éclaircit.
1
Flou gaussien
Applique un flou gaussien à une image.
1
Niveaux de gris
Grayscale crée un filtre qui produit une version en niveaux de gris d’une image.
1
Teinte
Hue crée un filtre qui fait pivoter la teinte d’une image. Le décalage de l’angle de teinte est généralement compris entre -180 et 180.
1
Inverser
Inverser crée un filtre qui annule les couleurs d’une image.
1
Pixeliser
Pixelate crée un filtre qui applique un effet de pixellisation à une image.
1
Saturation
Saturation crée un filtre qui modifie la saturation d’une image.
1
Sépia
Sépia crée un filtre qui produit une version sépia d’une image.
1
Sigmoïde
Sigmoïde crée un filtre qui modifie le contraste d’une image à l’aide d’une fonction sigmoïde et renvoie l’image ajustée. Il s’agit d’un changement de contraste non linéaire utile pour les réglages des photos car il préserve les détails des hautes lumières et des ombres.
1
Masque flou
UnsharpMask crée un filtre qui affine une image. Le paramètre sigma est utilisé dans une fonction gaussienne et affecte le rayon d’effet. Sigma doit être positif. Le rayon d’affûtage est à peu près égal à 3 * sigma. Le paramètre montant contrôle à quel point les bordures des bords deviennent plus sombres et plus claires. Généralement entre 0.5 et 1.5. Le paramètre de seuil contrôle le changement de luminosité minimum qui sera accentué. Généralement entre 0 et 0.05.
1
