Creating variables in Liquid for use in a Jekyll-generated page.

jekyll liquid websites

I wondered how to create variables within a single HTML page. Why? I am working on a refactor of parts of my website, and in the process I want to make it easier to refer to paths in general. For example, I have a directory of images for a page, say, and instead of having to retype or copy-paste that thing again and again, I have one variable declared once. Then, if that path changes, I just change the variable.

Assuming the website is generated with Jekyll, you can declare page-level variables using Liquid docs. To do so, declare the variable in the front matter. So for this page I declared

image_path: /til/2021-06-06-images/

Then, I can reference this path as follows by using the image_path variable, but because it is a page-level variable, is page.image_path:

<img src="{{ page.image_path }}acra-swiss-top.jpg" alt="An acra plate on a super telephoto lens" align = "left" style="width:750px; padding: 0px 10px 10px 0px"/> 

Which looks like this:

An acra plate on a super telephoto lens

OR I could use Markdown and do this:

![Markdown version of the image]({{ page.image_path }}acra-swiss-top.jpg)

Which looks like this:

Markdown version of the image

© Amy Tabb 2018 - 2023. All rights reserved. The contents of this site reflect my personal perspectives and not those of any other entity.