blob: 8f05df107c3a12a5d0f1726363d6479dd888c245 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
---
title: "Controlling Images"
date: "2024-10-11"
summary: "Controlling Images parameters"
description: "Controlling Images parameters"
toc: false
readTime: false
autonumber: true
math: false
showTags: false
---
## Dark and Light Mode Images
Sometimes images don't look good in both light and dark mode. You can annotate the import path with a special tag to ensure an image is only shown on a specific color scheme.
```md
```
In the above example, the light image is a transparent background with dark lines, while the dark one has light ones.
If you omit the `#dark` or `#light` tags an image is always shown.
## Images Sizing
There exist two tags to control sizing:
- `#small`: the image takes 80% of the original scale.
- `#full`: the image takes up all the available screen width.
You can also specify a caption using the following form:
```
```
I understand everyone could want a different scale for small images, you can override the default small class in your custom CSS:
```css
.img-small img {
scale: 80%;
}
```
[Here](https://tomfran.github.io/posts/hugo-images/) you can find a blog post showing different tags combinations.
## Adding new Image Tags
All tags are assumed to be related to an image class, which applies styling for the figure environment.
You can add a new one, provided you add a class named `img-<tag_name>`.
Feel free to have a look at existing ones to have a grasp on how they work.
|
