Newer
Older
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
{% comment %}
The image file is expected in the site.directory.large_images folder.
Downscaled copies should be put in the subfolders "phone, "tablet" and
"desktop" respectively.
Parameters:
file_name: The file name including extension.
alt_text: An alternative text for the image.
A NOTE ON PIXEL VALUES:
While CSS is fixed to assuming 96dpi (especially in the context of media
queries) for rendering measurements, the pixel values here correspond to
actual physical pixels. As a consequence, phones or tablets may chose a
much larger image file than it seems at first glance due to retina displays.
{% endcomment %}
{% assign bp_phone = 600 %}
{% assign bp_tablet = 1200 %}
{% assign bp_desktop = 1800 %}
{% assign bp_disp_2k = 2400 %}
{% assign phone_img_url = site.directory.large_images
| append: "phone/"
| append: include.file_name
| strip
| relative_url %}
{% assign tablet_img_url = site.directory.large_images
| append: "tablet/"
| append: include.file_name
| strip
| relative_url %}
{% assign desktop_img_url = site.directory.large_images
| append: "desktop/"
| append: include.file_name
| strip
| relative_url %}
{% assign disp_2k_img_url = site.directory.large_images
| append: "display_2k/"
| append: include.file_name
| strip
| relative_url %}
{% assign default_img_url = site.directory.large_images
| append: include.file_name
| strip
| relative_url %}
<img
sizes="
(max-width: {{ bp_phone }}px ) {{ bp_phone }}px,
(min-width: {{ bp_phone }}px)
and (max-width: {{ bp_tablet }}px) {{ bp_tablet }}px,
(min-width: {{ bp_tablet }}px)
and (max-width: {{ bp_desktop }}px) {{ bp_desktop }}px,
(min-width: {{ bp_desktop }}px)
and (max-width: {{ bp_disp_2k }}px) {{ bp_disp_2k }}px,
100vw
"
srcset="
{{ phone_img_url }} {{ bp_phone }}w,
{{ tablet_img_url }} {{ bp_tablet }}w,
{{ desktop_img_url }} {{ bp_desktop }}w,
{{ disp_2k_img_url }} {{ bp_disp_2k }}w,
{{ default_img_url }}"
src="{{ default_img_url }}"
alt="{{ include.alt_text}}"
class="bg-jumbotron"
>