Manipulating Text Strings and Arrays in Liquid for Jekyll
My goal was to simplify putting travel photos in my web site. I wanted to have a travel directory with subdirectories for some photos of places I have visited in the past. The initial idea was to have a markdown doc that would create an index page in each directory and just display the pictures in a page. One page per location with a main travel page the linked to each of the location pages.
Only having used basic Liquid tags in the past, I didn’t see where this would be a problem to do. However, after trying some test pages I realized there are a few areas that are different from how most scripting languages operate. Specifically, using strings and arrays. The Liquid documentation for arrays says that its not possible to create an array using Liquid templates. After searching some I found a number of people struggled with the need to create an array. While Liquid doesn’t support creating array structures with the assign tag, it is possible to create a string then use the split tag to turn the string into an array.
My next problem was creating a string from the front matter info assigned to the static pages from the Jekyll configuration. Seems there were some issues in the version of Jekyll I was using that were fixed after an update.
The way I created my array was using the capture tag inside a for loop to build a string of file paths separated by a :.
In Java this would be
citystr = citystr + pathlist[3] + ":"
or more commonly
citystr += pathlist[3] + ":".
It is not possible to append text to a string. This requires using capture to output the existing text in the string, then output the value you want to add completing with an endcapture.
The result is a string that looks something like:
city1:city2:city3:
One thing to note, is that if you separate the capture statement on different lines, it will create an array with each value on a line.
If your intention is to create an array of lines, then this format will do that.
Now that the string is created from the parts of the file path, its simple enough to turn this into an array that can be used in loops.
city1:city2:city3:
Here is an example that I put in a markdown doc in Jekyll.
city1:city2:city3: <br/>
3 <br/>
mycity: city1 <br/>
mycity: city2 <br/>
mycity: city3 <br/>
And this is the output it generated.
city1:city2:city3:
3
mycity: city1
mycity: city2
mycity: city3
Things to watch out for are extra spaces when you are making the string concatenation. These can be used with the strip tag. The other thing to be aware of is getting an empty string when doing a split where the character your are splitting on starts the string. Paths are a good example where the string is similar to /dir1/dir2/file.ext and you do a split with /. This can result in an empty item in your array that you may need to skip.
I find it helpful to make a simple loop for testing and just print out the values to see what your array has. It is especially helpful when you are accessing items by index so you can get the correct index.
Reference
https://github.com/Shopify/liquid/wiki/Liquid-for-Designers
http://heliumdev.com/blog/create-an-array-in-shopifys-liquid