Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use WebP responsive images #498

Merged
merged 8 commits into from
Dec 22, 2021
Merged

Use WebP responsive images #498

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e5ce6eb
Update _config.yml: remove `jekyyl-responive-images` add `jekyll-imag…
rohandebsarkar Dec 8, 2021
a2bc5f9
Update Gemfile: remove `jekyyl-responive-images` add `jekyll-imagemag…
rohandebsarkar Dec 8, 2021
b5ad1f4
Add figure.html
rohandebsarkar Dec 8, 2021
22fd3fd
Fix about.html
rohandebsarkar Dec 8, 2021
3aa8ae7
Fix projects.html
rohandebsarkar Dec 8, 2021
f812bd8
Fix blog post: 2015-05-15-images.md
rohandebsarkar Dec 8, 2021
b80c766
Fix demo project pages
rohandebsarkar Dec 8, 2021
27980f1
FIx projects.html
rohandebsarkar Dec 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Gemfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ group :jekyll_plugins do
gem 'jekyll-email-protect'
gem 'jekyll-feed'
gem 'jekyll-github-metadata'
gem 'jekyll-imagemagick'
gem 'jekyll-paginate-v2'
gem 'jekyll-responsive-image'
gem 'jekyll-scholar'
gem 'jekyll-sitemap'
gem 'jekyll-target-blank'
Expand Down
31 changes: 17 additions & 14 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,8 +144,8 @@ plugins:
- jekyll-email-protect
- jekyll-feed
- jekyll-github-metadata
- jekyll-imagemagick
- jekyll-paginate-v2
- jekyll-responsive-image
- jekyll/scholar
- jekyll-sitemap
- jekyll-target-blank
Expand Down Expand Up @@ -208,21 +208,24 @@ scholar:


# -----------------------------------------------------------------------------
# Jekyll Responsive Images
# Responsive WebP Images
# -----------------------------------------------------------------------------

responsive_image:
template: _includes/responsive_img.html
# Quality to use when resizing images.
default_quality: 80
sizes:
- width: 480
- width: 800
- width: 1400
quality: 90
# Strip EXIF and other JPEG profiles. Helps to minimize JPEG size.
strip: true

imagemagick:
enabled: true
widths:
- 480
- 800
- 1400
input_directories:
- assets/img
input_formats:
- ".jpg"
- ".jpeg"
- ".png"
- ".tiff"
output_formats:
webp: "-quality 75%"

# -----------------------------------------------------------------------------
# Jekyll Diagrams
Expand Down
17 changes: 17 additions & 0 deletions _includes/figure.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{% assign path = include.path | remove: ".jpg" | remove: ".jpeg" | remove: ".png" | remove: ".tiff" %}

<figure>

<picture>
{% for i in site.imagemagick.widths %}
<source media="(max-width: {{ i }}px)" srcset="{{ path | relative_url }}-{{ i }}.webp">
{% endfor %}

<!-- Fallback to the original file -->
<img {% if include.class %}class="{{ include.class }}"{% endif %} src="{{ include.path | relative_url }}" {% if include.alt %}alt="{{ alt }}"{% endif %} {% if include.title %}title="{{ title }}"{% endif %} {% if include.zoomable %}data-zoomable{% endif %} />

</picture>

{% if include.caption %}<figcaption class="caption">{{ include.caption }}</figcaption>{% endif %}

</figure>
7 changes: 3 additions & 4 deletions _includes/projects.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,9 @@
{% endif %}
<div class="card hoverable">
{% if project.img %}
{% responsive_image_block %}
path: {{ project.img }}
alt: "project thumbnail"
{% endresponsive_image_block %}
{% include figure.html
path=project.img
alt="project thumbnail" %}
{% endif %}
<div class="card-body">
<h2 class="card-title text-lowercase">{{ project.title }}</h2>
Expand Down
9 changes: 4 additions & 5 deletions _layouts/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,10 @@ <h1 class="post-title">
{% if page.profile %}
<div class="profile float-{% if page.profile.align == 'left' %}left{% else %}right{% endif %}">
{% if page.profile.image %}
{% responsive_image_block %}
path: {{ page.profile.image | prepend: 'assets/img/' }}
class: "img-fluid z-depth-1 rounded"
alt: {{ page.profile.image }}
{% endresponsive_image_block %}
{% assign profile_image_path = page.profile.image | prepend: 'assets/img/' %}
{% include figure.html
path=profile_image_path
class="img-fluid z-dept-1 rounded"%}
{% endif %}
{% if page.profile.address %}
<div class="address">
Expand Down
14 changes: 7 additions & 7 deletions _posts/2015-05-15-images.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ This is an example post with image galleries.

<div class="row mt-3">
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/9.jpg class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/9.jpg" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/7.jpg class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" %}
</div>
</div>
<div class="caption">
Expand All @@ -25,23 +25,23 @@ Simply add `data-zoomable` to `<img>` tags that you want to make zoomable.

<div class="row mt-3">
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/8.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
{% include figure.html path="assets/img/8.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
</div>
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/10.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
{% include figure.html path="assets/img/10.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
</div>
</div>

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

<div class="row mt-3">
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/11.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
{% include figure.html path="assets/img/11.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
</div>
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/12.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
{% include figure.html path="assets/img/12.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
</div>
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/7.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
{% include figure.html path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
</div>
</div>
16 changes: 8 additions & 8 deletions _projects/1_project.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,21 @@ To give your project a background in the portfolio page, just add the img tag to

<div class="row">
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
</div>
<div class="caption">
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.
</div>
<div class="row">
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
</div>
<div class="caption">
Expand All @@ -50,10 +50,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r

<div class="row justify-content-sm-center">
<div class="col-sm-8 mt-3 mt-md-0">
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm-4 mt-3 mt-md-0">
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
</div>
<div class="caption">
Expand All @@ -70,10 +70,10 @@ Here's the code for the last row of images above:
```html
<div class="row justify-content-sm-center">
<div class="col-sm-8 mt-3 mt-md-0">
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm-4 mt-3 mt-md-0">
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
</div>
```
Expand Down
16 changes: 8 additions & 8 deletions _projects/2_project.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,21 @@ To give your project a background in the portfolio page, just add the img tag to

<div class="row">
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
</div>
<div class="caption">
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.
</div>
<div class="row">
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
</div>
<div class="caption">
Expand All @@ -50,10 +50,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r

<div class="row justify-content-sm-center">
<div class="col-sm-8 mt-3 mt-md-0">
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm-4 mt-3 mt-md-0">
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
</div>
<div class="caption">
Expand All @@ -70,10 +70,10 @@ Here's the code for the last row of images above:
```html
<div class="row justify-content-sm-center">
<div class="col-sm-8 mt-3 mt-md-0">
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm-4 mt-3 mt-md-0">
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
</div>
```
Expand Down
16 changes: 8 additions & 8 deletions _projects/3_project.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,21 +23,21 @@ To give your project a background in the portfolio page, just add the img tag to

<div class="row">
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
</div>
<div class="caption">
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.
</div>
<div class="row">
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
</div>
<div class="caption">
Expand All @@ -51,10 +51,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r

<div class="row justify-content-sm-center">
<div class="col-sm-8 mt-3 mt-md-0">
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm-4 mt-3 mt-md-0">
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
</div>
<div class="caption">
Expand All @@ -71,10 +71,10 @@ Here's the code for the last row of images above:
```html
<div class="row justify-content-sm-center">
<div class="col-sm-8 mt-3 mt-md-0">
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm-4 mt-3 mt-md-0">
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
</div>
```
Expand Down
16 changes: 8 additions & 8 deletions _projects/4_project.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,21 @@ To give your project a background in the portfolio page, just add the img tag to

<div class="row">
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
</div>
<div class="caption">
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.
</div>
<div class="row">
<div class="col-sm mt-3 mt-md-0">
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
</div>
<div class="caption">
Expand All @@ -50,10 +50,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r

<div class="row justify-content-sm-center">
<div class="col-sm-8 mt-3 mt-md-0">
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm-4 mt-3 mt-md-0">
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
</div>
<div class="caption">
Expand All @@ -70,10 +70,10 @@ Here's the code for the last row of images above:
```html
<div class="row justify-content-sm-center">
<div class="col-sm-8 mt-3 mt-md-0">
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm-4 mt-3 mt-md-0">
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
</div>
```
Expand Down
Loading