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!

Answer 1

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!

Answer 2

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 }}

Answer 3

how about setting this up with CSS ?

title {
    text-transform:capitalize;
}

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

Answer 4

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.

Answer 5

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.

Answer 6

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

Answer 7

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