How can I capitalize all words in 'current_tags' for my Dawnsite theme title?

[earthtoplanet]

Theme: Dawn

site: www.earthtoplanet.com

On my default collection page I've put in some dynamic content that reflects the filter value (in this case, the product tag). For example, this page shows products with the tag "whale jump":

https://earthtoplanet.com/collections/all/whale-jump

For the H1 title, I'm using the following to try and capitalize the words:

{{ current_tags | join: '' | capitalize }}

However, that only capitalizes the first word (i.e., the "W" in whale) instead of both words: Whale Jump cartoon:

I believe because the current_tags value is an array and not a string? I'm such an amateur that I have no idea how to convert that array into a string of if there's a simpler way for the title to show as Whale Jump cartoon (with both a capital W and a capital J).

Thank you for your help!

[suyash1]

@earthtoplanet - using this css it can be like screenshot below

.collection-hero__title{text-transform: capitalize;}

[earthtoplanet]

Thanks for your help @suyash1. 

Where do I input that CSS? For example, the full custom liquid I'm using on this page looks like this:

<div class="collection-hero">
<div class="collection-hero__inner page-width">
<div class="collection-hero__text-wrapper">

{% if current_tags.size > 0 %}

{% if collection.products_count > 1 %}

<h1 class="collection-hero__title">
{{ current_tags | join: '' | capitalize }} Cartoons
</h1>

<div class="collection-hero__description rte">

Ask for comics about {{ current_tags }}, and {{ current_tags }}{{"-related"}} comics you shall receive. I found {{ collection.products_count }} you can check out:
</div>

{% else %}

<h1 class="collection-hero__title">

{{ current_tags | join: '' | capitalize }} cartoon
</h1>

<div class="collection-hero__description rte">

Good news, my friend. I found one  {{ current_tags }}{{"-related"}} comic:
</div>

{% endif %}

{% else %}

<h1 class="collection-hero__title">
  {{ collection.title }}
</h1>
{% endif %}

</div>
</div>
</div>

[suyash1 · Accepted solution]

@earthtoplanet - please add this CSS to the very end of base.css file

[earthtoplanet]

That worked. Thanks, @suyash1 !

[earthtoplanet]

Hey @suyash1, I'll throw a related question your way since you're so knowledgeable about this stuff.

I'm using the same current_tags variable to dynamically set my HTML title and Meta Description for SEO purposes. I'm currently having the same issue where product tags with two words are only capitalizing the first word. 

Here's an example for the collection filtered for the product tag advanced technology https://earthtoplanet.com/collections/all/advanced-technology 

Looking at the current HTML of the page, I'm hoping to get "technology" capitalized, as well:

<title>Advanced technology Cartoons &amp; Products | Earth To Planet Comics</title> 
    
<meta name="description" content="Advanced technology Cartoons &amp; Products by Earth To Planet Comics. Buy prints, digital licenses, and good times from an independent cartoonist.">

I don't believe I can use CSS to capitalize the HTML Title and Meta Description. Here's the code I'm using in my theme.liquid file. Thanks for your insight!

{% if template contains 'collection' %}
    {% if current_tags.size > 0 %}
    	<title>{{ current_tags | join: '' | capitalize }} {{ page_title }} | Earth To Planet Comics</title> 
    {% else %}
    	<title>{{ page_title | append: " | Earth To Planet Comics" | escape }}</title>
    {% endif %}
    
{% elsif template contains 'product' %}
    	<title>{{ product.title | append: " | Earth To Planet Comics" | strip_html | escape }}</title>
{% else %}
    	<title>{{ page_title | append: " | Earth To Planet Comics" | escape }}</title>
{% endif %} 
    
{% if template contains 'collection' %}
    {% if current_tags.size > 0 %}
      <meta name="description" content="{{ current_tags | join: '' | capitalize }} {{ page_title }} by Earth To Planet Comics. Buy prints, digital licenses, and good times from an independent cartoonist.">    
	{% else %}
      <meta name="description" content="{{ page_description | escape }}">
    {% endif %} 
    
{% elsif template contains 'product' %}
      <meta name="description" content="This Earth To Planet cartoon is appropriately titled, {{ product.title | escape }}. Some will see it and laugh, others will become stark raving mad.">
{% else %}
      <meta name="description" content="{{ page_description | escape }}">
{% endif %}  

[suyash1]

@earthtoplanet - I checked on browser and I can see that title is capitalized, please check title name I believe j in jump is smaller in title, please check 

[earthtoplanet]

You're correct that the second word in the product tag is not capitalized and that's what I'm hoping to fix for the HTML Title and Meta Description. Is there a way to force capitalize each word even if the original current_tags value is not capitalized?

[suyash1]

@earthtoplanet - unfortunately it can not be forced, CSS can be set for the page content but on title it do not work, you will need to manually edit titles of the products

[earthtoplanet]

Bummer. Thank you for looking into it for me.