<p><strong>Regarding Problem 1</strong></p>

<p>The Twig function <code>{{ getHeadHtml() }}</code> 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: <a href="https://craftcms.stackexchange.com/questions/13898/getheadhtml-not-outputting-css-included-with-includecss">getHeadHtml() not outputting CSS included with {% includeCss %}</a></p>

<p><strong>Regarding Problem 2</strong></p>

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

CC BY-SA 3.0
2016-03-07T18:32:11.960Z
2016-03-07T18:44:04.363Z
2017-04-13T12:51:00.253Z
Tom Bauer
<p>I have two problems when it comes to working with <code>getHeadHtml()</code> and <code>getFootHtml()</code>.</p>

<p>But first things first. Here's my setup: </p>

<p>This is my stripped down <code>_main.twig</code> layout file:</p>

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

    &lt;!-- injected Js Files or Code should go here --&gt;
    {{ getFootHtml() }}
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>This is my stripped down <code>_entry.twig</code> file:</p>

<pre><code>{% extends "_layouts/_main" %}

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

<p>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 <code>includeCssFile</code>, <code>includeJsFile</code> and <code>includeJs</code> would be a perfect fit for this. </p>

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

{% 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 %}
</code></pre>

<p>OK. So far so good. It works rather well.</p>

<p><strong>Problem 1</strong></p>

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

<p>Anybody experienced this behaviour? </p>

<p><strong>Problem 2</strong></p>

<p>This concerns caching. </p>

<p>When I try to cache the content matrix the following way: </p>

<pre><code>{% 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 %}
</code></pre>

<p>NOTHING get's injected. Neither the CSS files, nor the JS files. </p>

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

<p>Any help appreciated! </p>

<cache><getheadhtml>
Problem with getHeadHtml(), getFootHtml() and caching
# Problem with getHeadHtml(), getFootHtml() and caching

(Asked by: username_0 on 2016-03-02)

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:



    
    {{ getHeadHtml() }}
    


    {% block content %}{% endblock %}

    
    {{ getFootHtml() }}



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 %}

    {%- for image in images -%}
        
    {%- endfor -%}


{% 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 </head> 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!

**Tags:** cache, getheadhtml

---

## 1 answers

### Answer by username_1 on 2016-03-07. Score: 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 %}](https://craftcms.stackexchange.com/questions/13898/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?](https://craftcms.stackexchange.com/questions/13335/is-it-possible-to-cache-variables-using-the-cache-tag/13338#13338)). 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).


---

