The {% placeholder %} tag will render a placeholder section which is generally used inside Layouts. This tag will return any placeholder contents that have been added using the {% put %} tag, or any default content that is defined (optional).
{% placeholder name %}Content can then be injected into the placeholder in any subsequent page or partial.
{% put name %}
<p>Place this text in the name placeholder</p>
{% endput %}By default, the {% put %} will append the content to the placeholder. Use the replace attribute to replace the contents instead.
{% put name replace %}
<p>Replace all the content inside with this</p>
{% endput %}In some cases you may call the {% put %} tag inside a partial to include some assets on the pages. Then, when including that partial multiple times on the same page, it can cause the script to be inserted twice. Including the once attribute will ensure the content is only set once per template. The cache key uses the CMS template filename to determine if it has already been inserted.
{% put scripts once %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
{% endput %}Placeholders can have default content that can be either replaced or complemented by a page. If the {% put %} tag for a placeholder with default content is not defined on a page, the default placeholder content is displayed. Example placeholder definition in the layout template:
{% placeholder sidebar default %}
<p><a href="/contacts">Contact us</a></p>
{% endplaceholder %}The page can inject more content to the placeholder. The {% default %} tag specifies a place where the default placeholder content should be displayed. If the tag is not used the placeholder content is completely replaced.
{% put sidebar %}
<p><a href="/services">Services</a></p>
{% default %}
{% endput %}In a layout template you can check if a placeholder content exists by using the hasPlaceholder() function. This lets you to generate different markup depending on whether the page provides a placeholder content. Example:
{% if hasPlaceholder('sidemenu') %}
<!-- Markup for a page with a sidebar -->
<div class="row">
<div class="col-md-3">
{% placeholder sidemenu %}
</div>
<div class="col-md-9">
{% page %}
</div>
</div>
{% else %}
<!-- Markup for a page without a sidebar -->
{% page %}
{% endif %}Placeholders can be useful for setting inherited variables, such as the active link in page navigation. The {% put %} tag allows you to set values directly. For example, setting the activeNav value to home inside a page template.
{% put activeNav = 'home' %}The variable can be accessed inside the layout template using the placeholder() function. From this, we can determine the active link based on the value set by the page.
{% set active = placeholder('activeNav') %}
<ul>
<li class="{{ active == 'home' ? 'active' }}">Home</li>
<li class="{{ active == 'blog' ? 'active' }}">Blog</li>
<li class="{{ active == 'contact' ? 'active' }}">Contact</li>
</ul>A default value (second argument) can be supplied as a fallback.
{% set active = placeholder('activeNav', 'home') }} %}October CMS defines static placeholders that are used by the system. Packages will use these placeholders to inject their dependencies to the page, either using the PHP or Twig interface.
The {% scripts %} tag inserts JavaScript file references to scripts injected by the application. The tag is commonly defined before the closing BODY tag.
<body>
...
{% scripts %}
</body>Note: This tag should appear once only in a given page cycle to prevent duplicated references.
Links to JavaScript files can be programmatically injected in PHP either by components or pages.
function onStart()
{
$this->addJs('assets/js/app.js');
}You can also inject raw markup to the {% scripts %} tag by using the scripts anonymous placeholder in the layout. Use the {% put %} tag in pages or layouts to add content to the placeholder.
{% put scripts %}
<script type="text/javascript" src="/themes/demo/assets/js/menu.js"></script>
{% endput %}The {% styles %} tag renders CSS links to stylesheet files injected by the application. The tag is commonly defined in the HEAD section of a page or layout.
<head>
...
{% styles %}
</head>Note: This tag should appear once only in a given page cycle to prevent duplicated references.
Links to StyleSheet files can be programmatically injected in PHP either by components or pages.
function onStart()
{
$this->addCss('assets/css/hello.css');
}You can also inject raw markup to the {% styles %} tag by using the styles anonymous placeholder in the layout. Use the {% put %} tag in pages or layouts to add content to the placeholder.
{% put styles %}
<link href="/themes/demo/assets/css/page.css" rel="stylesheet" />
{% endput %}The {% meta %} tag renders meta content, such as open graph information. The tag is commonly defined in the HEAD section of a page or layout, placed before the styles and scripts.
<head>
{% meta %}
...
</head>Note: This tag should appear once only in a given page cycle to prevent duplicated references.
You can inject raw markup to the {% meta %} tag by using the meta anonymous placeholder in the layout. Use the {% put %} tag in pages or layouts to add content to the placeholder.
{% put meta %}
<meta name="turbo-visit-control" content="error">
{% endput %}The placeholder tag accepts two optional attributes — title and type. The title attribute is not used by the CMS itself, but could be used by other plugins. The type attribute manages the placeholder type. There are two types supported at the moment — text and html. The content of text placeholders is escaped before it's displayed. The title and type attributes should be defined after the placeholder name and the default attribute, if it's presented. Example:
{% placeholder ordering title="Ordering information" type="text" %}Example of a placeholder with a default content, title and type attributes.
{% placeholder ordering default title="Ordering information" type="text" %}
There is no ordering information for this product.
{% endplaceholder %}