Image zoomable in distill post template

[wuyoscar]

Hi, there.
Idk why this code (data-zoomable) is not working on my page.

{% include figure.html path="assets/img/image.png" class="img-fluid rounded z-depth-1" zoomable=true %}

But it is going well if layout: post instead of layout: distill
How can I enable my distil post to zoom image as well?

Best regards

[phber]

I have the same trouble, it works in other posts, but not in distill posts.

[george-gca]

Something seems to be blocking the zoom feature, but idk why. Maybe something inside distill javascript is overriding it.

[Charlie-XIAO]

@wuyoscar @phber Adding {% include scripts/misc.html %} to _layouts/distill.html should solve this issue. Most other layouts specified layout: default in which misc.html is already included, so they work already.

To minimize the effect on the current distill layout, you can alternatively just do

    {%- if site.enable_medium_zoom %}
      <!-- Medium Zoom JS -->
      <script defer 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 defer src="{{ '/assets/js/zoom.js' | relative_url | bust_file_cache }}"></script>
    {%- endif -%}

Including the whole misc.html will, for instance, change the table styles in distill.