23

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!

2
  • I tried using camelize in place of camelcase as well but that didn't work either.
    – APAD1
    Jan 23, 2014 at 17:52
  • 1
    camelcase is a Shopify filter, not a Liquid filter - so it won't work in Locomotive CMS.
    – Luke
    Oct 25, 2018 at 0:20

8 Answers 8

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!

4
  • 3
    I'm pretty sure this only the solution despite of using a custom plug-in or css-capitalize.
    – eQ19
    Jun 17, 2016 at 6:21
  • This is the only thing that has worked for me. Great thinking!
    – tonysepia
    May 28, 2020 at 16:15
  • jesus christ what an awful language
    – Fed
    Aug 17 at 15:58
  • If you want to avoid ruining intentionally uppercase words, e.g. "HTML", you should change the core of the loop to {{ word | slice: 0 | upcase -}}{{- word | slice: 1, 999 }} [not pretty but it works] Oct 23 at 6:51
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 }}
4
  • Thanks for the answer! May I ask how to add plugin file in the liquid theme folder?
    – Yaoyu Yang
    Apr 2, 2016 at 3: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 2, 2016 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 2, 2016 at 17:44
  • @YaoyuYang No experience on that, sorry.
    – AsTeR
    Apr 2, 2016 at 18:32
15

how about setting this up with CSS ?

title {
    text-transform:capitalize;
}

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

4
  • 1
    That is not what he wants. He wants that all the words from his title start with a capital letter.
    – taxicala
    Jan 23, 2014 at 17:56
  • sorry, i meant: text-transform:capitalize;
    – Ty Kayn
    Feb 11, 2014 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, 2016 at 19:00
  • Great idea... and luckily capitalize in CSS is not as broken as in Liquid ;-) Dec 14, 2016 at 21:09
2

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.

0
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.

1

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: " " %}
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

2
  • Yeah, this was mentioned in my OP
    – APAD1
    Jan 6, 2016 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 7, 2016 at 14:06
0

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

Capitalize now works directing

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.