trilbymedia / grav-plugin-page-toc

Grav TOC Plugin with new independent Anchor generation to compliment the existing Table-of-Contents support.
MIT License
14 stars 12 forks source link

Page-level Twig conflict #21

Open petira opened 2 years ago

petira commented 2 years ago

If the Page Toc Plugin is enabled, then page-level Twig cannot be processed, specifically links ...<a href="{{ page.url|e }}">... and resources ...<img src="{{ img.url|e }}">.... The escaped code is returned instead of the URL.

Edit 06/16/2022: Markdown syntax is not processed either, specifically [{{ page.title|e }}]({{ page.url|e }}) and ![{{ img.title|e }}]({{ img.url|e }}).

More info: https://github.com/getgrav/grav/issues/3589.

pboguslawski commented 10 months ago

Same problem in grav 1.7.42 + grav-plugin-page-toc 3.2.2 (both installed from sources); with page content

{% for p in page.collection %}
<div class="column col-4 col-md-6 col-sm-12">
<a href="{{ p.url }}" class="u-url" style="display: block; text-decoration: none; color: inherit;">
    <div style="margin: 0; padding: 0; text-align: center;">
        {% set image = p.media.images|first %}
        {% if image %}
        <div>{{ image.cropZoom(200,200).html|raw }}</div>
        {% endif %}
        <div>{{ p.title }}</div>
    </div>
</a>
</div>
{% endfor %}

when toc plugin disabled globally or Anchors generated for this page is No on page level or Process Twig First is Yes on page level, then correct content is rendered:

<a href="/aaa/bbb" class="u-url" style="display: block; text-decoration: none; color: inherit;">
    <div style="margin: 0; padding: 0; text-align: center;">
                        <div><img alt="" src="/images/3/f/7/a/4/3f7a48681ee1d76fcb7e654e0d527534872902b1-myimage.jpg"></div>
                <div>mytitle</div>
    </div>
</a>

When toc plugin is enabled for page and Process Twig First is not enabled, then incorrect href is rendered:

<a href="%7B%7B%20p.url%20%7D%7D" class="u-url" style="display: block; text-decoration: none; color: inherit;">
    <div style="margin: 0; padding: 0; text-align: center;">
                        <div><img alt="" src="/images/3/f/7/a/4/3f7a48681ee1d76fcb7e654e0d527534872902b1-myimage.jpg"></div>
                <div>mytitle</div>
    </div>
</a>