Skip to content

Commit f638fd2

Browse files
alshedivatpecey
alshedivat
authored and
pecey
committed
Add support for responsive images (alshedivat#439)
1 parent 361ccc8 commit f638fd2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+111
-62
lines changed

‎Gemfile

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ group :jekyll_plugins do
66
gem 'jekyll-feed'
77
gem 'jekyll-github-metadata'
88
gem 'jekyll-paginate-v2'
9+
gem 'jekyll-responsive-image'
910
gem 'jekyll-scholar'
1011
gem 'jekyll-sitemap'
1112
gem 'jekyll-target-blank'

‎_config.yml

+19
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@ plugins:
140140
- jekyll-feed
141141
- jekyll-github-metadata
142142
- jekyll-paginate-v2
143+
- jekyll-responsive-image
143144
- jekyll-sitemap
144145
- jekyll-target-blank
145146
- jekyll-twitter-plugin
@@ -177,6 +178,24 @@ scholar:
177178

178179
query: "@*"
179180

181+
182+
# -----------------------------------------------------------------------------
183+
# Jekyll Responsive Images
184+
# -----------------------------------------------------------------------------
185+
186+
responsive_image:
187+
template: _includes/responsive_img.html
188+
# Quality to use when resizing images.
189+
default_quality: 80
190+
sizes:
191+
- width: 480
192+
- width: 800
193+
- width: 1400
194+
quality: 90
195+
# Strip EXIF and other JPEG profiles. Helps to minimize JPEG size.
196+
strip: true
197+
198+
180199
# -----------------------------------------------------------------------------
181200
# Jekyll Diagrams
182201
# -----------------------------------------------------------------------------

‎_includes/projects.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@
66
{% endif %}
77
<div class="card hoverable">
88
{% if project.img %}
9-
<img src="{{ project.img | relative_url }}" alt="project thumbnail">
9+
{% responsive_image_block %}
10+
path: {{ project.img }}
11+
alt: "project thumbnail"
12+
{% endresponsive_image_block %}
1013
{% endif %}
1114
<div class="card-body">
1215
<h2 class="card-title text-lowercase">{{ project.title }}</h2>

‎_includes/projects_horizontal.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@
88
<div class="row g-0">
99
{% if project.img %}
1010
<div class="card-img col-md-6">
11-
<img src="{{ project.img | relative_url }}" alt="project thumbnail">
11+
{% responsive_image_block %}
12+
path: {{ project.img }}
13+
alt: "project thumbnail"
14+
{% endresponsive_image_block %}
1215
</div>
1316
<div class="col-md-6">
1417
{% else %}

‎_includes/responsive_img.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{% assign largest = resized | sort: 'width' | last %}
2+
{% capture srcset %}
3+
{% for i in resized %}
4+
{{ i.path | relative_url }} {{ i.width }}w,
5+
{% endfor %}
6+
{% endcapture %}
7+
8+
<img {% if class %}class="{{ class }}"{% endif %} src="{{ largest.path | relative_url }}" srcset="{{ srcset | strip_newlines }}/ {{ path }} {{ original.width }}w" {% if alt %}alt="{{ alt }}"{% endif %} {% if title %}title="{{ title }}"{% endif %} {% if zoomable %}data-zoomable{% endif %}/>

‎_layouts/about.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ <h1 class="post-title">
1515
{% if page.profile %}
1616
<div class="profile float-{% if page.profile.align == 'left' %}left{% else %}right{% endif %}">
1717
{% if page.profile.image %}
18-
<img class="img-fluid z-depth-1 rounded" src="{{ page.profile.image | prepend: '/assets/img/' | relative_url }}">
18+
{% responsive_image_block %}
19+
path: {{ page.profile.image | prepend: 'assets/img/' }}
20+
class: "img-fluid z-depth-1 rounded"
21+
{% endresponsive_image_block %}
1922
{% endif %}
2023
{% if page.profile.address %}
2124
<div class="address">

‎_posts/2015-05-15-images.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ This is an example post with image galleries.
88

99
<div class="row mt-3">
1010
<div class="col-sm mt-3 mt-md-0">
11-
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/9.jpg">
11+
{% responsive_image path: assets/img/9.jpg class: "img-fluid rounded z-depth-1" %}
1212
</div>
1313
<div class="col-sm mt-3 mt-md-0">
14-
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/7.jpg">
14+
{% responsive_image path: assets/img/7.jpg class: "img-fluid rounded z-depth-1" %}
1515
</div>
1616
</div>
1717
<div class="caption">
@@ -23,23 +23,23 @@ Simply add `data-zoomable` to `<img>` tags that you want to make zoomable.
2323

2424
<div class="row mt-3">
2525
<div class="col-sm mt-3 mt-md-0">
26-
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/8.jpg" data-zoomable>
26+
{% responsive_image path: assets/img/8.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
2727
</div>
2828
<div class="col-sm mt-3 mt-md-0">
29-
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/10.jpg" data-zoomable>
29+
{% responsive_image path: assets/img/10.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
3030
</div>
3131
</div>
3232

3333
The rest of the images in this post are all zoomable, arranged into different mini-galleries.
3434

3535
<div class="row mt-3">
3636
<div class="col-sm mt-3 mt-md-0">
37-
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/11.jpg" data-zoomable>
37+
{% responsive_image path: assets/img/11.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
3838
</div>
3939
<div class="col-sm mt-3 mt-md-0">
40-
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/12.jpg" data-zoomable>
40+
{% responsive_image path: assets/img/12.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
4141
</div>
4242
<div class="col-sm mt-3 mt-md-0">
43-
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/7.jpg" data-zoomable>
43+
{% responsive_image path: assets/img/7.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
4444
</div>
4545
</div>

‎_projects/1_project.md

+11-9
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
layout: page
33
title: project 1
44
description: a project with a background image
5-
img: /assets/img/12.jpg
5+
img: assets/img/12.jpg
66
importance: 1
77
category: work
88
---
@@ -22,21 +22,21 @@ To give your project a background in the portfolio page, just add the img tag to
2222

2323
<div class="row">
2424
<div class="col-sm mt-3 mt-md-0">
25-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.jpg' | relative_url }}" alt="" title="example image"/>
25+
{% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
2626
</div>
2727
<div class="col-sm mt-3 mt-md-0">
28-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/3.jpg' | relative_url }}" alt="" title="example image"/>
28+
{% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
2929
</div>
3030
<div class="col-sm mt-3 mt-md-0">
31-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
31+
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
3232
</div>
3333
</div>
3434
<div class="caption">
3535
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
3636
</div>
3737
<div class="row">
3838
<div class="col-sm mt-3 mt-md-0">
39-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
39+
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
4040
</div>
4141
</div>
4242
<div class="caption">
@@ -50,10 +50,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
5050

5151
<div class="row justify-content-sm-center">
5252
<div class="col-sm-8 mt-3 mt-md-0">
53-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
53+
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
5454
</div>
5555
<div class="col-sm-4 mt-3 mt-md-0">
56-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
56+
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
5757
</div>
5858
</div>
5959
<div class="caption">
@@ -66,13 +66,15 @@ Just wrap your images with `<div class="col-sm">` and place them inside `<div cl
6666
To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
6767
Here's the code for the last row of images above:
6868

69+
{% raw %}
6970
```html
7071
<div class="row justify-content-sm-center">
7172
<div class="col-sm-8 mt-3 mt-md-0">
72-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
73+
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
7374
</div>
7475
<div class="col-sm-4 mt-3 mt-md-0">
75-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
76+
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
7677
</div>
7778
</div>
7879
```
80+
{% endraw %}

‎_projects/2_project.md

+11-9
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
layout: page
33
title: project 2
44
description: a project with a background image
5-
img: /assets/img/3.jpg
5+
img: assets/img/3.jpg
66
importance: 2
77
category: work
88
---
@@ -22,21 +22,21 @@ To give your project a background in the portfolio page, just add the img tag to
2222

2323
<div class="row">
2424
<div class="col-sm mt-3 mt-md-0">
25-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.jpg' | relative_url }}" alt="" title="example image"/>
25+
{% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
2626
</div>
2727
<div class="col-sm mt-3 mt-md-0">
28-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/3.jpg' | relative_url }}" alt="" title="example image"/>
28+
{% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
2929
</div>
3030
<div class="col-sm mt-3 mt-md-0">
31-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
31+
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
3232
</div>
3333
</div>
3434
<div class="caption">
3535
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
3636
</div>
3737
<div class="row">
3838
<div class="col-sm mt-3 mt-md-0">
39-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
39+
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
4040
</div>
4141
</div>
4242
<div class="caption">
@@ -50,10 +50,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
5050

5151
<div class="row justify-content-sm-center">
5252
<div class="col-sm-8 mt-3 mt-md-0">
53-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
53+
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
5454
</div>
5555
<div class="col-sm-4 mt-3 mt-md-0">
56-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
56+
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
5757
</div>
5858
</div>
5959
<div class="caption">
@@ -66,13 +66,15 @@ Just wrap your images with `<div class="col-sm">` and place them inside `<div cl
6666
To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
6767
Here's the code for the last row of images above:
6868

69+
{% raw %}
6970
```html
7071
<div class="row justify-content-sm-center">
7172
<div class="col-sm-8 mt-3 mt-md-0">
72-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
73+
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
7374
</div>
7475
<div class="col-sm-4 mt-3 mt-md-0">
75-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
76+
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
7677
</div>
7778
</div>
7879
```
80+
{% endraw %}

‎_projects/3_project.md

+11-9
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
layout: page
33
title: project 3
44
description: a project that redirects to another website
5-
img: /assets/img/7.jpg
5+
img: assets/img/7.jpg
66
redirect: https://unsplash.com
77
importance: 3
88
category: work
@@ -23,21 +23,21 @@ To give your project a background in the portfolio page, just add the img tag to
2323

2424
<div class="row">
2525
<div class="col-sm mt-3 mt-md-0">
26-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.jpg' | relative_url }}" alt="" title="example image"/>
26+
{% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
2727
</div>
2828
<div class="col-sm mt-3 mt-md-0">
29-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/3.jpg' | relative_url }}" alt="" title="example image"/>
29+
{% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
3030
</div>
3131
<div class="col-sm mt-3 mt-md-0">
32-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
32+
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
3333
</div>
3434
</div>
3535
<div class="caption">
3636
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
3737
</div>
3838
<div class="row">
3939
<div class="col-sm mt-3 mt-md-0">
40-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
40+
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
4141
</div>
4242
</div>
4343
<div class="caption">
@@ -51,10 +51,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
5151

5252
<div class="row justify-content-sm-center">
5353
<div class="col-sm-8 mt-3 mt-md-0">
54-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
54+
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
5555
</div>
5656
<div class="col-sm-4 mt-3 mt-md-0">
57-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
57+
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
5858
</div>
5959
</div>
6060
<div class="caption">
@@ -67,13 +67,15 @@ Just wrap your images with `<div class="col-sm">` and place them inside `<div cl
6767
To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
6868
Here's the code for the last row of images above:
6969

70+
{% raw %}
7071
```html
7172
<div class="row justify-content-sm-center">
7273
<div class="col-sm-8 mt-3 mt-md-0">
73-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
74+
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
7475
</div>
7576
<div class="col-sm-4 mt-3 mt-md-0">
76-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
77+
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
7778
</div>
7879
</div>
7980
```
81+
{% endraw %}

‎_projects/4_project.md

+10-8
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,21 @@ To give your project a background in the portfolio page, just add the img tag to
2222

2323
<div class="row">
2424
<div class="col-sm mt-3 mt-md-0">
25-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.jpg' | relative_url }}" alt="" title="example image"/>
25+
{% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
2626
</div>
2727
<div class="col-sm mt-3 mt-md-0">
28-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/3.jpg' | relative_url }}" alt="" title="example image"/>
28+
{% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
2929
</div>
3030
<div class="col-sm mt-3 mt-md-0">
31-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
31+
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
3232
</div>
3333
</div>
3434
<div class="caption">
3535
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
3636
</div>
3737
<div class="row">
3838
<div class="col-sm mt-3 mt-md-0">
39-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
39+
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
4040
</div>
4141
</div>
4242
<div class="caption">
@@ -50,10 +50,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
5050

5151
<div class="row justify-content-sm-center">
5252
<div class="col-sm-8 mt-3 mt-md-0">
53-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
53+
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
5454
</div>
5555
<div class="col-sm-4 mt-3 mt-md-0">
56-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
56+
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
5757
</div>
5858
</div>
5959
<div class="caption">
@@ -66,13 +66,15 @@ Just wrap your images with `<div class="col-sm">` and place them inside `<div cl
6666
To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
6767
Here's the code for the last row of images above:
6868

69+
{% raw %}
6970
```html
7071
<div class="row justify-content-sm-center">
7172
<div class="col-sm-8 mt-3 mt-md-0">
72-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
73+
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
7374
</div>
7475
<div class="col-sm-4 mt-3 mt-md-0">
75-
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
76+
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
7677
</div>
7778
</div>
7879
```
80+
{% endraw %}

0 commit comments

Comments
 (0)