0e3cff9137
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
48 lines
1.7 KiB
Markdown
48 lines
1.7 KiB
Markdown
---
|
|
layout: post
|
|
title: a post with images
|
|
date: 2015-05-15 21:01:00
|
|
description: this is what included images could look like
|
|
tags: formatting images
|
|
categories: sample-posts
|
|
---
|
|
This is an example post with image galleries.
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-sm mt-3 mt-md-0">
|
|
{% 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">
|
|
{% include figure.html path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" %}
|
|
</div>
|
|
</div>
|
|
<div class="caption">
|
|
A simple, elegant caption looks good between image rows, after each row, or doesn't have to be there at all.
|
|
</div>
|
|
|
|
Images can be made zoomable.
|
|
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">
|
|
{% 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">
|
|
{% 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">
|
|
{% 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">
|
|
{% 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">
|
|
{% include figure.html path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
|
|
</div>
|
|
</div>
|