Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-03-07T18:32:11.960Z
Answers.LastActivityDate: 2016-03-07T18:44:04.363Z
Answers.LastEditDate: 2017-04-13T12:51:00.253Z
Answers.UserDisplayName: Tom Bauer
Body: <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>
  
Tags: <cache><getheadhtml>
Title: Problem with getHeadHtml(), getFootHtml() and caching
ThreadText: # 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:
  
  ```
  <!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!
  
  **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).
  
  
  ---
  
  