diff options
Diffstat (limited to '_drafts/2015-05-15-images.md')
-rw-r--r-- | _drafts/2015-05-15-images.md | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/_drafts/2015-05-15-images.md b/_drafts/2015-05-15-images.md new file mode 100644 index 0000000..6347918 --- /dev/null +++ b/_drafts/2015-05-15-images.md @@ -0,0 +1,45 @@ +--- +layout: post +title: a post with images +date: 2015-05-15 21:01:00 +description: this is what included images could look like +--- +This is an example post with image galleries. + +<div class="row mt-3"> + <div class="col-sm mt-3 mt-md-0"> + <img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/9.jpg"> + </div> + <div class="col-sm mt-3 mt-md-0"> + <img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/7.jpg"> + </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"> + <img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/8.jpg" data-zoomable> + </div> + <div class="col-sm mt-3 mt-md-0"> + <img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/10.jpg" data-zoomable> + </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"> + <img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/11.jpg" data-zoomable> + </div> + <div class="col-sm mt-3 mt-md-0"> + <img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/12.jpg" data-zoomable> + </div> + <div class="col-sm mt-3 mt-md-0"> + <img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/7.jpg" data-zoomable> + </div> +</div> |