Use WebP responsive images (#498)
This PR replaces the jekyll-responsive-images with jekyll-imagemagick for responsive WebP images. WebP images are much smaller compared to PNG and JPEG, faster to load and most of the modern browsers recommend it. More information about WebP images: https://developers.google.com/speed/webp
This commit is contained in:
Rohan Deb Sarkar
GitHub
parent
1e4e147d8f
commit
0e3cff9137
2
Gemfile
2
Gemfile
@ -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'
|
||||
|
||||
31
_config.yml
31
_config.yml
@ -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
|
||||
@ -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
|
||||
|
||||
17
_includes/figure.html
Normal file
17
_includes/figure.html
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -15,11 +15,10 @@ layout: default
|
||||
{% 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">
|
||||
|
||||
@ -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">
|
||||
@ -25,10 +25,10 @@ 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>
|
||||
|
||||
@ -36,12 +36,12 @@ The rest of the images in this post are all zoomable, arranged into different mi
|
||||
|
||||
<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>
|
||||
|
||||
@ -22,13 +22,13 @@ 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">
|
||||
@ -36,7 +36,7 @@ To give your project a background in the portfolio page, just add the img tag to
|
||||
</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">
|
||||
@ -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">
|
||||
@ -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>
|
||||
```
|
||||
|
||||
@ -22,13 +22,13 @@ 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">
|
||||
@ -36,7 +36,7 @@ To give your project a background in the portfolio page, just add the img tag to
|
||||
</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">
|
||||
@ -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">
|
||||
@ -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>
|
||||
```
|
||||
|
||||
@ -23,13 +23,13 @@ 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">
|
||||
@ -37,7 +37,7 @@ To give your project a background in the portfolio page, just add the img tag to
|
||||
</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">
|
||||
@ -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">
|
||||
@ -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>
|
||||
```
|
||||
|
||||
@ -22,13 +22,13 @@ 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">
|
||||
@ -36,7 +36,7 @@ To give your project a background in the portfolio page, just add the img tag to
|
||||
</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">
|
||||
@ -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">
|
||||
@ -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>
|
||||
```
|
||||
|
||||
@ -22,13 +22,13 @@ 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">
|
||||
@ -36,7 +36,7 @@ To give your project a background in the portfolio page, just add the img tag to
|
||||
</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">
|
||||
@ -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">
|
||||
@ -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>
|
||||
```
|
||||
|
||||
@ -22,13 +22,13 @@ 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">
|
||||
@ -36,7 +36,7 @@ To give your project a background in the portfolio page, just add the img tag to
|
||||
</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">
|
||||
@ -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">
|
||||
@ -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>
|
||||
```
|
||||
|
||||
Loading…
Reference in New Issue
Block a user