feat: make images zoomable in the single post page (#345)

* feat: make images zoomable in the single post page

* fix: img selector

* feat: allow customizing medium-zoom

* docs: update

docs/pages/CHANGELOG.md

@@ -7,9 +7,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Add `imageZoomableInPost` param to control the zoomable of images in the single post page [#345](https://github.com/g1eny0ung/hugo-theme-dream/pull/345)
+
 ### Changed
 
-- Make TOC scrollable when it is too long
+- Make TOC scrollable when it is too long [#340](https://github.com/g1eny0ung/hugo-theme-dream/pull/340)
 
 ## [3.9.0] - 2024-11-17
 
@@ -179,7 +183,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 
-- Support image optimization for summary images. See [Image Optimization](https://g1en.site/hugo-theme-dream/summary-images#image-optimization) for more details.
+- Support image optimization for summary images. See [Image Optimization](https://g1en.site/hugo-theme-dream/summary-images#image-optimization) for more details
 
 ### Changed
 

docs/pages/params-configurations.mdx

@@ -53,6 +53,7 @@ stickyNav = true
 # noDefaultSummaryCover = true
 showTableOfContents = true
 showSummaryCoverInPost = true
+imageZoomableInPost = true
 showPrevNextPost = true
 # reorderShares = ["x", "facebook", "whatsapp"]
 
@@ -262,6 +263,28 @@ Show table of contents in the single post page.
 
 Show summary cover image in the single post page.
 
+### imageZoomableInPost
+
+Make images zoomable in the single post page. This feature uses [medium-zoom](https://github.com/francoischalifour/medium-zoom) under the hood.
+
+<Callout type="info">
+For advanced usage, you may want to customize the medium-zoom options. Dream allows you to
+create a partial file named `medium-zoom.html` in the `layouts/partials` folder to replace the
+default behavior. For example, you can put the following code in the `medium-zoom.html` file:
+
+```html
+<script type="module">
+  import mediumZoom from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
+  mediumZoom('#dream-single-post-content img', {
+    // Put your custom options here.
+  }) // #dream-single-post-content is the id of the post content.
+
+  // You can also further control the logic of zooming images.
+  // Like zooming lazy-loaded images.
+</script>
+```
+</Callout>
+
 ### showPrevNextPost
 
 Show previous and next post links in the single post page.

hugo.example.toml

@@ -54,6 +54,7 @@ siteStartYear = 2016
 # noDefaultSummaryCover = true
 # showTableOfContents = true
 # showSummaryCoverInPost = true
+# imageZoomableInPost = true
 # showPrevNextPost = true
 # reorderShares = ["x", "facebook", "whatsapp"]
 

layouts/_default/single.html

@@ -64,11 +64,13 @@ <h1 itemprop="headline">{{ .Title }}</h1>
         </div>
       </header>
 
-      {{ if and .Params.Cover site.Params.showSummaryCoverInPost }}
-      <img src="{{ .Params.Cover }}" alt="{{ .Title }}" />
-      {{ end }}
+      <section id="dream-single-post-content" itemprop="articleBody">
+        {{ if and .Params.Cover site.Params.showSummaryCoverInPost }}
+        <img src="{{ .Params.Cover }}" alt="{{ .Title }}" />
+        {{ end }}
 
-      {{ .Content | emojify }}
+        {{ .Content | emojify }}
+      </section>
 
       {{ if site.Params.showPrevNextPost }}
       <div class="divider"></div>
@@ -149,4 +151,15 @@ <h1 itemprop="headline">{{ .Title }}</h1>
 </script>
 {{ end }}
 
+{{ if site.Params.imageZoomableInPost }}
+  {{ if fileExists "layouts/partials/medium-zoom.html" }}
+    {{ partialCached "medium-zoom.html" . }}
+  {{ else }}
+    <script type="module">
+      import mediumZoom from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
+      mediumZoom('#dream-single-post-content img')
+    </script>
+  {{ end }}
+{{ end }}
+
 {{ end }}