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 </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!
