Adds support for image zoom (alshedivat#296)

* Add image zoom * Minor improvements
Leo-YuLi · May 30, 2021 · 1318c80 · 1318c80
1 parent 016a01b
commit 1318c80
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 33 deletions.
diff --git a/_config.yml b/_config.yml
@@ -177,6 +177,7 @@ enable_navbar_social:       false  # enables displaying social links in the
                                    # navbar on the about page
 enable_project_categories:  true   # enables categorization of projects into
                                    # multiple categories
+enable_medium_zoom:         true   # enables image zoom feature (as on medium.com)
 
 # -----------------------------------------------------------------------------
 # Library versions
@@ -209,3 +210,6 @@ mdb:
 popper:
   version: "2.4.4"
   integrity: "sha512-eUQ9hGdLjBjY3F41CScH3UX+4JDSI9zXeroz7hJ+RteoCaY+GP/LDoM8AO+Pt+DRFw3nXqsjh9Zsts8hnYv8/A=="
+medium_zoom:
+  version: "1.0.6"
+  integrity: "sha256-EdPgYcPk/IIrw7FYeuJQexva49pVRZNmt3LculEr7zM="
diff --git a/_includes/head.html b/_includes/head.html
@@ -32,29 +32,27 @@
 <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>">
 {% endif %}
 <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
-
 <link rel="canonical" href="{{ page.url | replace:'index.html','' | relative_url }}">
 
 <!-- JQuery -->
 {% include scripts/jquery.html %}
 
 <!-- Theming-->
 {% if site.enable_darkmode %}
-  <script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
-  <!-- Load DarkMode JS -->
+<script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
 <script src="{{ '/assets/js/dark_mode.js' | relative_url }}"></script>
 {% endif %}
 
 {% if site.enable_google_analytics %}
-  <!-- Global site tag (gtag.js) - Google Analytics -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag() { dataLayer.push(arguments); }
-    gtag('js', new Date());
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag() { dataLayer.push(arguments); }
+  gtag('js', new Date());
 
-    gtag('config', '{{ site.google_analytics }}');
-  </script>
+  gtag('config', '{{ site.google_analytics }}');
+</script>
 {% endif %}
 
 {% if site.enable_panelbear_analytics %}

diff --git a/_includes/scripts/misc.html b/_includes/scripts/misc.html
@@ -5,6 +5,11 @@
 </script>
 {% endif %}
 
+{% if site.enable_medium_zoom %}
+<!-- Medium Zoom JS -->
+<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>
+<script src="{{ '/assets/js/zoom.js' | relative_url }}"></script>
+{% endif %}
 
 <!-- Load Common JS -->
 <script src="{{ '/assets/js/common.js' | relative_url }}"></script>
diff --git a/_posts/2015-05-15-images.md b/_posts/2015-05-15-images.md
@@ -4,40 +4,43 @@ title:  a post with images
 date: 2015-05-15 21:01:00
 description: this is what included images could look like
 ---
-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.
+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>
-<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/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">
+        <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">
+        <img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/10.jpg" data-zoomable>
     </div>
 </div>
 
-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.
+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">
+        <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">
+        <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">
+        <img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/7.jpg" data-zoomable>
     </div>
 </div>
+
diff --git a/_posts/2020-09-28-twitter.md b/_posts/2020-09-28-twitter.md
@@ -6,21 +6,13 @@ description: an example of a blog post with twitter
 ---
 A sample blog page that demonstrates the inclusion of Tweets/Timelines/etc.
 
-<br />
-
 # Tweet
-An example of displaying a tweet : 
+An example of displaying a tweet:
 {% twitter https://twitter.com/rubygems/status/518821243320287232 %}
-<br />
-<br />
-<br />
-<br />
+
 # Timeline
-An example of pulling from a timeline : 
+An example of pulling from a timeline:
 {% twitter https://twitter.com/jekyllrb maxwidth=500 limit=3 %}
-<br />
-<br />
-<br />
-<br />
+
 # Additional Details
-For more details on using the plugin visit : https://github.com/red-data-tools/jekyll-jupyter-notebook
+For more details on using the plugin visit: [jekyll-twitter-plugin](https://github.com/rob-murray/jekyll-twitter-plugin){:target="\_blank"}
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -8,6 +8,10 @@ p, h1, h2, h3, h4, h5, h6, em, div, span, strong {
   color: var(--global-text-color);
 }
 
+article div {
+  margin-bottom: 1rem;
+}
+
 a, table.table a {
   color: var(--global-theme-color);
   &:hover {

diff --git a/assets/js/zoom.js b/assets/js/zoom.js
@@ -0,0 +1,8 @@
+
+$(document).ready(function() {
+    mediumZoom('[data-zoomable]', {
+        margin: 100,
+        background: getComputedStyle(document.documentElement)
+            .getPropertyValue('--global-bg-color') + 'ee',
+    })
+});