Skip to content

Commit 1318c80

Browse files
alshedivatalshedivat
authored
Adds support for image zoom (alshedivat#296)
* Add image zoom * Minor improvements
1 parent 016a01b commit 1318c80

File tree

7 files changed

+47
-33
lines changed

7 files changed

+47
-33
lines changed

‎_config.yml

+4
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,7 @@ enable_navbar_social: false # enables displaying social links in the
177177
# navbar on the about page
178178
enable_project_categories: true # enables categorization of projects into
179179
# multiple categories
180+
enable_medium_zoom: true # enables image zoom feature (as on medium.com)
180181

181182
# -----------------------------------------------------------------------------
182183
# Library versions
@@ -209,3 +210,6 @@ mdb:
209210
popper:
210211
version: "2.4.4"
211212
integrity: "sha512-eUQ9hGdLjBjY3F41CScH3UX+4JDSI9zXeroz7hJ+RteoCaY+GP/LDoM8AO+Pt+DRFw3nXqsjh9Zsts8hnYv8/A=="
213+
medium_zoom:
214+
version: "1.0.6"
215+
integrity: "sha256-EdPgYcPk/IIrw7FYeuJQexva49pVRZNmt3LculEr7zM="

‎_includes/head.html

+9-11
Original file line numberDiff line numberDiff line change
@@ -32,29 +32,27 @@
3232
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>{{ site.icon }}</text></svg>">
3333
{% endif %}
3434
<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
35-
3635
<link rel="canonical" href="{{ page.url | replace:'index.html','' | relative_url }}">
3736

3837
<!-- JQuery -->
3938
{% include scripts/jquery.html %}
4039

4140
<!-- Theming-->
4241
{% if site.enable_darkmode %}
43-
<script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
44-
<!-- Load DarkMode JS -->
42+
<script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
4543
<script src="{{ '/assets/js/dark_mode.js' | relative_url }}"></script>
4644
{% endif %}
4745

4846
{% if site.enable_google_analytics %}
49-
<!-- Global site tag (gtag.js) - Google Analytics -->
50-
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
51-
<script>
52-
window.dataLayer = window.dataLayer || [];
53-
function gtag() { dataLayer.push(arguments); }
54-
gtag('js', new Date());
47+
<!-- Global site tag (gtag.js) - Google Analytics -->
48+
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
49+
<script>
50+
window.dataLayer = window.dataLayer || [];
51+
function gtag() { dataLayer.push(arguments); }
52+
gtag('js', new Date());
5553

56-
gtag('config', '{{ site.google_analytics }}');
57-
</script>
54+
gtag('config', '{{ site.google_analytics }}');
55+
</script>
5856
{% endif %}
5957

6058
{% if site.enable_panelbear_analytics %}

‎_includes/scripts/misc.html

+5
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@
55
</script>
66
{% endif %}
77

8+
{% if site.enable_medium_zoom %}
9+
<!-- Medium Zoom JS -->
10+
<script src="https://cdn.jsdelivr.net/npm/medium-zoom@{{ site.medium_zoom.version }}/dist/medium-zoom.min.js" integrity="{{ site.medium_zoom.integrity }}" crossorigin="anonymous"></script>
11+
<script src="{{ '/assets/js/zoom.js' | relative_url }}"></script>
12+
{% endif %}
813

914
<!-- Load Common JS -->
1015
<script src="{{ '/assets/js/common.js' | relative_url }}"></script>

‎_posts/2015-05-15-images.md

+12-9
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,43 @@ title: a post with images
44
date: 2015-05-15 21:01:00
55
description: this is what included images could look like
66
---
7-
Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptown vinyl kitsch. Fingerstache four loko meh 8-bit, tousled banh mi tilde forage Schlitz dreamcatcher twee 3 wolf moon. Chambray asymmetrical paleo salvia, sartorial umami four loko master cleanse drinking vinegar brunch.
7+
This is an example post with image galleries.
88

99
<div class="row mt-3">
1010
<div class="col-sm mt-3 mt-md-0">
1111
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/9.jpg">
1212
</div>
13-
</div>
14-
<div class="row mt-3">
1513
<div class="col-sm mt-3 mt-md-0">
1614
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/7.jpg">
1715
</div>
1816
</div>
1917
<div class="caption">
2018
A simple, elegant caption looks good between image rows, after each row, or doesn't have to be there at all.
2119
</div>
20+
21+
Images can be made zoomable.
22+
Simply add `data-zoomable` to `<img>` tags that you want to make zoomable.
23+
2224
<div class="row mt-3">
2325
<div class="col-sm mt-3 mt-md-0">
24-
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/8.jpg">
26+
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/8.jpg" data-zoomable>
2527
</div>
2628
<div class="col-sm mt-3 mt-md-0">
27-
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/10.jpg">
29+
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/10.jpg" data-zoomable>
2830
</div>
2931
</div>
3032

31-
Slow-carb four dollar toast Helvetica pop-up. Kale chips next level literally trust fund Pitchfork. Jean shorts Pinterest beard, farm-to-table irony craft beer swag tofu 8-bit Banksy. Quinoa forage fanny pack, pug hashtag Echo Park heirloom Schlitz tote bag artisan Neutra mumblecore 90's shabby chic raw denim.
33+
The rest of the images in this post are all zoomable, arranged into different mini-galleries.
3234

3335
<div class="row mt-3">
3436
<div class="col-sm mt-3 mt-md-0">
35-
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/11.jpg">
37+
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/11.jpg" data-zoomable>
3638
</div>
3739
<div class="col-sm mt-3 mt-md-0">
38-
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/12.jpg">
40+
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/12.jpg" data-zoomable>
3941
</div>
4042
<div class="col-sm mt-3 mt-md-0">
41-
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/7.jpg">
43+
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/7.jpg" data-zoomable>
4244
</div>
4345
</div>
46+

‎_posts/2020-09-28-twitter.md

+5-13
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,13 @@ description: an example of a blog post with twitter
66
---
77
A sample blog page that demonstrates the inclusion of Tweets/Timelines/etc.
88

9-
<br />
10-
119
# Tweet
12-
An example of displaying a tweet :
10+
An example of displaying a tweet:
1311
{% twitter https://twitter.com/rubygems/status/518821243320287232 %}
14-
<br />
15-
<br />
16-
<br />
17-
<br />
12+
1813
# Timeline
19-
An example of pulling from a timeline :
14+
An example of pulling from a timeline:
2015
{% twitter https://twitter.com/jekyllrb maxwidth=500 limit=3 %}
21-
<br />
22-
<br />
23-
<br />
24-
<br />
16+
2517
# Additional Details
26-
For more details on using the plugin visit : https://github.com/red-data-tools/jekyll-jupyter-notebook
18+
For more details on using the plugin visit: [jekyll-twitter-plugin](https://github.com/rob-murray/jekyll-twitter-plugin){:target="\_blank"}

‎_sass/_base.scss

+4
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ p, h1, h2, h3, h4, h5, h6, em, div, span, strong {
88
color: var(--global-text-color);
99
}
1010

11+
article div {
12+
margin-bottom: 1rem;
13+
}
14+
1115
a, table.table a {
1216
color: var(--global-theme-color);
1317
&:hover {

‎assets/js/zoom.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
$(document).ready(function() {
3+
mediumZoom('[data-zoomable]', {
4+
margin: 100,
5+
background: getComputedStyle(document.documentElement)
6+
.getPropertyValue('--global-bg-color') + 'ee',
7+
})
8+
});

0 commit comments

Comments
 (0)