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

Technical Q&A
1

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:

earthtoplanet_0-1646445427765.png

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!

2

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

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

suyash1_0-1646456585913.png
suyash1_0-1646456585913.png1366×768 118 KB

3

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:


{% if current_tags.size > 0 %}

{% if collection.products_count > 1 %}

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

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

{% else %}

# 

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

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

{% endif %}

{% else %}

# 
  {{ collection.title }}

{% endif %}
4

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

1 Like
5

That worked. Thanks, @suyash1 !

6

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:

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 %}
    	 
    {% else %}
    	
    {% endif %}
    
{% elsif template contains 'product' %}
    	
{% else %}
    	
{% endif %} 
    
{% if template contains 'collection' %}
    {% if current_tags.size > 0 %}
          
	{% else %}
      
    {% endif %} 
    
{% elsif template contains 'product' %}
      
{% else %}
      
{% endif %}
7

@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

suyash1_0-1646585543986.png
suyash1_0-1646585543986.png1366×768 120 KB

8

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?

9

@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

10

Bummer. Thank you for looking into it for me.