Merge pull request #244 from honeylogic-io/add-zoom-in-for-imges

feat(blog): Add zoomin for images

Author: adinhodovic

Dockerfile

@@ -25,8 +25,7 @@ EOF
 
 WORKDIR /app/
 
-# hadolint ignore=DL3013
-RUN pip install pip poetry==1.4.2 #!COMMIT
+RUN pip install pip poetry==1.8.3
 COPY pyproject.toml poetry.lock /app/
 RUN poetry config virtualenvs.create false && poetry install --no-interaction #!COMMIT
 

django_wtf/templates/wagtail_code_blog/blog_page.html

@@ -10,3 +10,25 @@
         {% include "wagtail_code_blog/blog_page_body.html" %}
     </div>
 {% endblock content %}
+{% block js %}
+    {{ block.super }}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/medium-zoom/1.0.6/medium-zoom.min.js"
+            integrity="sha512-N9IJRoc3LaP3NDoiGkcPa4gG94kapGpaA5Zq9/Dr04uf5TbLFU5q0o8AbRhLKUUlp8QFS2u7S+Yti0U7QtuZvQ=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"></script>
+    <script>
+        const images = Array.from(document.querySelectorAll(".prose img"));
+        console.log(images)
+        images.forEach(img => {
+            mediumZoom(img, {
+                margin: 0,
+                /* The space outside the zoomed image */
+                scrollOffset: 40,
+                /* The number of pixels to scroll to close the zoom */
+                container: null,
+                /* The viewport to render the zoom in */
+                template: null /* The template element to display on zoom */
+            });
+        });
+    </script>
+{% endblock js %}