
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
1.7 KiB
1.7 KiB
layout | title | date | description | tags | categories |
---|---|---|---|---|---|
post | a post with images | 2015-05-15 21:01:00 | this is what included images could look like | formatting images | sample-posts |
This is an example post with image galleries.
{% include figure.html path="assets/img/9.jpg" class="img-fluid rounded z-depth-1" %}
{% include figure.html path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" %}
A simple, elegant caption looks good between image rows, after each row, or doesn't have to be there at all.
Images can be made zoomable.
Simply add data-zoomable
to <img>
tags that you want to make zoomable.
{% include figure.html path="assets/img/8.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 %}
The rest of the images in this post are all zoomable, arranged into different mini-galleries.
{% include figure.html path="assets/img/11.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 %}
{% include figure.html path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}