Head includes

Head includes allow formatters to bring their own scripts and stylesheets. We present a formatter for the demo article that uses some special script. In its formatter configuration we add this script as head include, moreover, we add some extra styles.

Related links

1 The result

Note: It is the article's head include alters the style of all headings on the page - that's intended in the example.
 

I use headincludes

Please click the button to refresh the date.

This article is restyled via head includes.

Also the date is fetched via an additional javascript.

 

2 Example resources and the interesting spots

The most interesting part of the example is the formatter configuration. Here the head includes for the formatter are added:

/system/modules/com.alkacon.opencms.documentation/formatters/demo/demo-article-head-includes.xml

Note that there are two ways to add head includes: either inline, as the styles are added, or as link, as the JavaScript is added. If offline, hover over the edit points at the includes to see that more includes, inline and link mixed, are possible.

Just to complete the example, here is the included JavaScript:

/system/modules/com.alkacon.opencms.documentation/resources/demo/js/head-includes.js
function displayDate() {
	document.getElementById("dateText").innerHTML=Date();
}

and the formatter from the above result, using the script to display the time:

/system/modules/com.alkacon.opencms.documentation/formatters/demo/demo-article-head-includes.jsp
<%@page buffer="none" session="false" trimDirectiveWhitespaces="true" taglibs="cms,c" %>
<cms:formatter var="content" val="value">
<%-- This simple example displays the current date on clicking the refresh button.
  The required javascript is loaded in the html <head> of the template dynamiccaly using <cms:headinclude>.
--%>
<div class="demo-article-headinclude">
	<div class="headline"><h3>${value.Title}</h3></div>
	<div class="paragraph">
		<%-- Use the displayDate from the imported script to refresh the date. --%>
		<p id="dateText">Please click the button to refresh the date.</p>
		<div><button type="button" onclick="displayDate();">Refresh date</button></div>
		<%-- Set the required variables for the image. --%>
		${value.Text}
	</div>
</div>
</cms:formatter>

What the example will show you:

Head includes always affect the whole page.

In the example this is apparent from the changed styles for the headings. To avoid such side effects, choose appropriate selectors, as done for example for the change of the text color in the demo article.

What the example does not show: Head includes must be enabled in the template of your page via <cms:headincludes>. Details are found here.