Capitalize first letter of each word with liquid syntax?

Question

I am trying to set up SEO in a LocomotiveCMS installation using liquid syntax. I'm trying to code it so that the page title is pulled dynamically using {{ page.title }} and then forcing it to capitalize the first letter of each word.

I tried this:

<title>
      {{ page.title | camelcase }} | {{ site.name }}
</title>

Based on the liquid syntax documentation here: http://docs.shopify.com/themes/liquid-basics/output#camelize

But it's not working. Using capitalize works, but it only capitalizes the first letter of the first word.

Thanks!

I tried using `camelize` in place of `camelcase` as well but that didn't work either. — APAD1, Jan 23 '14 at 17:52
`camelcase` is a [Shopify filter, not a Liquid filter](https://github.com/Shopify/liquid/issues/434) - so it won't work in Locomotive CMS. — Luke, Oct 25 '18 at 00:20

score 37 · Answer 1 · edited Sep 23 '21 at 17:41

37

There is a way to achieve this using only Liquid syntax. No need for any plugins.

Break down your string of words into an array and use a for loop combined with the capitalize filter to capitalize the first letter of each word. If you appropriately encapsulate this inside a capture statement you are left with the first character in every word capitalized.

{% assign words = "Hi, how are you today?" | split: ' ' %}

{% capture titlecase %}
  {% for word in words %}
    {{ word | capitalize }}
  {% endfor %}{% endcapture %}
{{ titlecase }}

Output:

Hi, How Are You Today?

Notice that all of this is on a single line and there is only one occurrence of whitespace within the entire capture statement!

edited Sep 23 '21 at 17:41

theQuestionMan

1,270
2
18
29

answered Jun 09 '16 at 17:44

taky2

825
1
10
15

3

I'm pretty sure this only the solution despite of using [a custom plug-in](http://stackoverflow.com/a/23453152/4058484) or [css-capitalize](http://stackoverflow.com/a/21315850/4058484). – eQ19 Jun 17 '16 at 06:21
This is the only thing that has worked for me. Great thinking! – tonysepia May 28 '20 at 16:15
jesus christ what an awful language – Fed Aug 17 '23 at 15:58

score 29 · Accepted Answer · edited Feb 06 '20 at 04:46

29

I would suggest to use a plugin to obtain this behavior

_plugins/_capitalize_all.rb:

require 'liquid'
require 'uri'

# Capitalize all words of the input
module Jekyll
  module CapitalizeAll
    def capitalize_all(words)
      return words.split(' ').map(&:capitalize).join(' ')
    end
  end
end

Liquid::Template.register_filter(Jekyll::CapitalizeAll)

Usage:

{{ "mein text" | capitalize_all }}

edited Feb 06 '20 at 04:46

Conor Livingston

905
1
8
17

answered May 04 '14 at 06:01

AsTeR

7,247
14
60
99

Thanks for the answer! May I ask how to add plugin file in the liquid theme folder? – Yaoyu Yang Apr 02 '16 at 03:24
1

@YaoyuYang as far as I remember you just drop it in the `_plugins` directory of your jekyll site and it works – AsTeR Apr 02 '16 at 16:17
I see. I am not using Jekyll, I am working on a shopify site, not sure where to add it. – Yaoyu Yang Apr 02 '16 at 17:44
@YaoyuYang No experience on that, sorry. – AsTeR Apr 02 '16 at 18:32

Ty Kayn · Answer 3 · 2014-02-11T12:54:00.420

14

how about setting this up with CSS ?

title {
    text-transform:capitalize;
}

edit: i did a typo about text-transform, now it is fixed;

edited Feb 11 '14 at 12:54

answered Jan 23 '14 at 17:54

Ty Kayn

719
7
24

1

That is not what he wants. He wants that all the words from his title start with a capital letter. – taxicala Jan 23 '14 at 17:56
sorry, i meant: text-transform:capitalize; – Ty Kayn Feb 11 '14 at 12:53
This actually did what I wanted to do, which was title case categories in Jekyll. Thanks for the reminder. – Merovex Jan 31 '16 at 19:00
Great idea... and luckily capitalize in CSS is not as broken as in Liquid ;-) – Manfred Moser Dec 14 '16 at 21:09

score 2 · Answer 4 · answered Jan 23 '14 at 17:52

Regarding to the link you have posted, the camel case works as follows:

{{ 'coming-soon' | camelcase }}

It takes a string with its words separated with '-' and camelcases it. I have only one question: How are your 'page.title' coming? are its words separated with '-'? or do you have a text like this: "this is the title of my page"? if thats the case, you should replace it with: "this-is-the-title-of-my-page"

Hope this helps.

score 1 · Answer 5 · answered Jan 23 '14 at 17:58

1

Thanks for the responses, I actually figured out a workaround right after posting this. Instead of calling page.title I am now pulling page.seo_title which can be manually entered through the LocomotiveCMS backend with the correct capitalization.

answered Jan 23 '14 at 17:58

APAD1

13,509
8
43
72

score 1 · Answer 6 · answered Sep 06 '16 at 01:51

This series of filters has been working for me. You would run into problems if your title had 5 consecutive dashes or dashes where you didn't want the following letter to be capitalized, however.

{% assign headerTitle = page.title | split: " " | join: "-----" | camelcase | split: "-----" | join: " " %}

score 0 · Answer 7 · answered Jan 06 '16 at 07:58

0

This works for me: {{ page.title | capitalize }}

It capitalizes only the first word in the sentence.

My first instinct was that this would capitalize every word but it doesnt.

Source: https://docs.shopify.com/themes/liquid-documentation/filters/string-filters#capitalize

answered Jan 06 '16 at 07:58

Sentry.co

5,355
43
38

Yeah, this was mentioned in my OP – APAD1 Jan 06 '16 at 15:23
1

I actually had the oposite problem. I didnt want every word in the title to be capitalized. In my case i pull the title from the filename not the front-mater title. And when I do this every word gets capitalized. This is probably a bug from Jekyll. Since its its a surprising convention. The expected title would be the title as it is written in the filename. Im looking into how I can get the actual filename title though. In your case you could just write a liquid loop and have it included if you dont want to clutter up your post code. Or do as I do and just extract the title from the filename. – Sentry.co Jan 07 '16 at 14:06

score 0 · Answer 8 · answered Jun 08 '22 at 06:26

0

{{ page.title | capitalize }} | {{ site.name }}

Capitalize now works directing

https://liquidjs.com/filters/capitalize.html

answered Jun 08 '22 at 06:26

Salim K

11
1

Capitalize first letter of each word with liquid syntax?

8 Answers8