Skip to content

Optimize Statamic script loading with the use of Antlers stacks

October 12th, 2023 Statamic A deer with an antler in the tall grass

Creating dynamic and engaging websites can be both challenging and rewarding. For this website I am using Statamic, with Static Site Generation and some of my posts require extra scripts and CSS to be displayed correctly. Since I do not want to load these scripts when they are not needed, I looked for a solution.

Today, I discovered an ingenious way to achieve this using Antlers stacks, allowing me to include scripts selectively for certain posts while using picture galleries.

The power of Antlers stacks

Antlers is the default templating language used in Statamic. It offers a straightforward and elegant way to customize the presentation of data on your website. One of the powerful features is the ability to create stacks, a concept that allows you to inject content into predefined sections of your templates. For the WordPress devs out there, this works like how a hook works in WordPress.

For this project, I wanted to include scripts in some of my blog posts to enhance the user experience. However, I didn't want to load these scripts for every post, as that could affect performance and load times. Antlers stacks provided the perfect solution.

Selectively adding scripts

1. Define a Stack

To begin, I created an Antlers stack named gallery_scripts in my base layout template, /resources/views/layout.antlers.html. This stack acts as a designated place for including scripts. To include the stack in the head section of the HTML I added the following code between the <head>..</head> tags:

{{ stack:gallery_scripts }}

Edit the component template

To trigger the insertion of the desired scripts and CSS, I needed to change the template that was used for a gallery. This way, every gallery automatically gets the rights scripts included in the page. The template location is /resources/views/components/_gallery.antlers.html.

Using the following code the desired scripts get added to the head section of the page, because of using the right stack identifier gallery_scripts. Oh, I’m using cdnjs for fast delivery of the desired scripts.

{{ push:gallery_scripts }}
<script src="" integrity="sha512-DUC8yqWf7ez3JD1jszxCWSVB0DMP78eOyBpMa5aJki1bIRARykviOuImIczkxlj1KhVSyS16w2FSQetkD4UU2w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="" integrity="sha512-RcpE0ybOapw3Pl77Nz/la9grsKWw3MQXBoeiCg1y+psaqTNcSIQ8JYn4p3wG5XakxdyEYl/r22NLp3EYsX4SXg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="" integrity="sha512-aiphM8HYk085AcAAQwRkx5AcM9HvzCMjsaUirRoLEIdFCj6pkXgUgz73UNcG8Rr4CdvMOo7ApDDVNjpZOKx+CA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
{{ /push:gallery_scripts }}

By using Antlers stacks, I could customize the behavior of my posts dynamically. For posts which include a gallery, the specified scripts were loaded automatically, enhancing the content's interactivity.

This approach not only improved the user experience but also optimized performance by loading scripts only when needed, ultimately resulting in faster page load times and less used energy.


Antlers stacks offer an elegant and versatile solution for creating customized posts in a content-rich website. By selectively including scripts and showcasing galleries as required, I was able to create a more engaging and responsive web experience for my audience. If you're looking to tailor your content presentation, don't hesitate to explore the power of Antlers stacks in your web development projects.

Photo by Will Bolding

About Marcel Bootsman

Marcel discovered the web in 1995. Since then he has paid attention to and worked with lots of technologies and founded his own WordPress oriented business in 2009.

Currently Marcel is Business Development Manager Dutch & DACH Markets at Kinsta where he helps Kinsta's client base grow with Managed WordPress, Application, Database and Static site hosting.

You can contact Marcel on a diverse range of online platforms. Please see the Connect section on the homepage for the details.