1

I have two problems when it comes to working with getHeadHtml() and getFootHtml().

But first things first. Here's my setup:

This is my stripped down _main.twig layout file:

<!DOCTYPE html>
<html lang="{{ craft.locale }}">
<head>
    <!-- injected Css Files or Styles should go here -->
    {{ getHeadHtml() }}
    <link rel="stylesheet" media="all" href="/assets/scss/styles.css" />
</head>
<body>
    {% block content %}{% endblock %}

    <!-- injected Js Files or Code should go here -->
    {{ getFootHtml() }}
</body>
</html>

This is my stripped down _entry.twig file:

{% extends "_layouts/_main" %}

{% block content %}
    {% for block in entry.cf_content_matrix %}
        {#
            Include all blocks
        #}
        {% include "_blocks/_block_" ~ block.type ignore missing %}
    {% endfor %}
{% endblock %}

This is the Matrix block that is causing the problems I have. Basically it is a jQuery slider plugin. I only want the JS and CSS files injected when this block is actually used. So I thought that using includeCssFile, includeJsFile and includeJs would be a perfect fit for this.

{% set images = block.images %}
<div id="screenshot-slider">
    {%- for image in images -%}
        <div><img src="{{ image.getUrl({ width: 680 }) }}" /></div>
    {%- endfor -%}
</div>

{% includeCssFile "/assets/javascripts/slick/slick.css" %}
{% includeCssFile "/assets/javascripts/slick/slick-theme.css" %}
{% includeJsFile "/assets/javascripts/slick/slick.min.js" %}
{% set owlJs %}
    $(document).ready(function() {
      $("#screenshot-slider").slick();
    });
{% endset %}
{% includeJs owlJs %}

OK. So far so good. It works rather well.

Problem 1

The {{ getHeadHtml() }} in the _main.twig file is somehow ignored. Instead of injecting the CSS files BEFORE my styles.css files, they are injected just before the &lt;/head&gt; tag. As if it wasn't there.

Anybody experienced this behaviour?

Problem 2

This concerns caching.

When I try to cache the content matrix the following way:

{% extends "_layouts/_main" %}

{% block content %}
    {% cache %}
        {% for block in entry.cf_content_matrix %}
            {#
                Include all blocks
            #}
            {% include "_blocks/_block_" ~ block.type ignore missing %}
        {% endfor %}
    {% endcache %}
{% endblock %}

NOTHING get's injected. Neither the CSS files, nor the JS files.

Does anybody know why this is the case, and if there is a solution to it?

Any help appreciated!

2

Regarding Problem 1

The Twig function {{ getHeadHtml() }} does only work with JS/CSS that are included before this tag. I had the same problem... you can find the answer/explanation of Brandon Kelly here: getHeadHtml() not outputting CSS included with {% includeCss %}

Regarding Problem 2

The {% cache %} does only cache the output HTML, no variables (see Is it possible to cache variables using the {% cache %} tag?). As a workaround you could cache the {{ getFootHtml() }} as well: in the first request it process the complete Twig code and stores the getFootHtml content correct. With this solution, you need to delete the cache manually (or with the onAfterSave event) after (re)saving, and adding/deleting an entry that could affect the cache. Note: This does not work with {{ getHeadHtml() }} (see Problem 1).

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.