exampleSite/content/posts/2017/images.md


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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

---
title: Images
date: 2017-03-11T10:15:01+02:00
categories: ["writing"]
tags: ["images", "lightbox"]
language: en
slug: images
images: [/images/image-1.jpg]
---

Use markdown to display an image.

```markdown
![Alt text](/media/image-1.jpg "Photo by Ales Krivec on Unsplash")
```

Result:

![Alt text](/media/image-1.jpg "Photo by Ales Krivec on Unsplash")

You can use ```image``` shortcode to insert an image which automatically generates additional five sizes of image for various display sizes.

Example code:

```html
{{</* image src="media/image-1.jpg" */>}}
```

Result:

{{< image src="media/image-1.jpg" >}}

You can insert image with caption.

Example code:

```html
{{</* image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" */>}}
```

Result:

{{< image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" >}}

You can add ```lightbox="true"``` parameter to use lightbox plugin.

Example code:

```html
{{</* image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" lightbox="true" */>}}
```

Result (click on the image):

{{< image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" lightbox="true" >}}

You can add ```round="50"``` parameter to round the corners from 0% to 50%(full circle).

Example code:

```html
{{</* image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" lightbox="true" round="50" */>}}
```

Result (you can still click on it):

{{< image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" lightbox="true" round="50" >}}


You can add `full="true"` parameter to display image with full width.

Example code:

```html
{{</* image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" full="true" */>}}
```

Result:

{{< image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" full="true" >}}

Add `resize=false` parameter to display original image without resizing (useful for animated GIFs).

```html
{{</* image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" resize="false" */>}}
```

Result:

{{< image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" resize="false" >}}