-
Notifications
You must be signed in to change notification settings - Fork 4
/
page.haml
48 lines (38 loc) · 1.25 KB
/
page.haml
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
:ruby
Markdown = import("../Markdown")
%article
%Markdown
:plain
# Images
To load an image, you use the `image()`-method which
validates that the resource is an image.
```haml
:ruby
Image = image("./río_amazonas.jpeg")
%img{src: Image.src}
```
A more complete example:
```haml
:ruby
Image = image("./río_amazonas.jpeg")
%img{
src: Image.src,
sizes: Image.sizes,
srcset: Image.srcset,
width: Image.original.width,
height: Image.original.height,
}(alt="Amazon river")
:css
img {
width: 100%;
height: auto;
}
```
Images also come with a `blur` attribute which contains a small
base64-encoded PNG that you can blur for fancy loading effects.
[Source code for the Image component on this site](https://github.com/mayu-live/framework/blob/main/example/app/components/UI/Image.haml)
## SVGs
Scalable Vector Graphics are fantastic,
and they are really easy to use.
You can load them using `svg()`.
[Source code for the Icon component on this site](https://github.com/mayu-live/framework/blob/main/example/app/components/UI/Icon/Icon.haml)