CMS Development

castaneda_j
Member

blog listings page - custom H1 by topic

SOLVE

Hello, I'm working on the blog listings page. I want the blog to behave as follows: 

 

If the page is

   * Listings page for topics, the H1 should be “Topic Posts”

   else
   * Main listings page - the H1 should be the main blog title

 

I thought the following code would work, the end result looks like the code is looping somehow.

 

{% if is_listing_view %}
   {% for t in contents_tags %}
      {% if t.slug == topic %}
         <h1 class="blog-title">{{t.name}}</h1>
     {% else %}
         <h1 class="blog-title">{{ group.public_title }}</h1>
     {% endif %}
   {% endfor %}
{% endif %} 

 

End Result

Main Page

blog name

blog name

blog name

blog name

blog name

blog name

 

Topics Page

blog name

blog name

blog name

Topic

blog name

blog name

blog name

 

Can someone help me figure out what I'm doing wrong?

 

Thanks!

 

Jeannette

0 Upvotes
1 Accepted solution
castaneda_j
Solution
Member

blog listings page - custom H1 by topic

SOLVE

Thanks so much @JasonRosa

I especially appreciate you commenting on the various loops. It made it easier to understand. 

 

You were missing an endfor, but that was easy to spot and correct. Below is the solution I implemented. Thanks again!

 

<!-- Checks to See If This Is a Listing Page --> 
   {% if is_listing_view %}
      <!-- Checks to See If This Is a Topic Listing --> 
      {% if topic %}
         <!-- Pulls the Topic Page HTML Title --> 
         {% set string_to_split = content.title %}
         <!-- Removes the Beginning Part of the HTML Title So You Are Just Left With the Topic Name--> 
         {% set newArray = string_to_split|split('|', 2) %}

         {% for item in newArray %}
            {% if loop.last %}
               <!-- Displays Topic Name --> 
               <h1 class="blog-title">{{ item }}</h1>
            {% endif %}
         {% endfor %}

<!-- If Not a Topic Listing --> {% else %} <h1 class="blog-title">{{ group.public_title }}</h1> {% endif %} <!-- END Checks to See If This Is a Topic Listing -->
{% else %} <!-- if not a listing page, use the blog title -->
<h1 class="blog-title">{{ group.public_title }}</h1> {% endif %} <!-- END Checks to See If This Is a Listing Page -->

View solution in original post

4 Replies 4
JasonRosa
HubSpot Employee
HubSpot Employee

blog listings page - custom H1 by topic

SOLVE

Hey @castaneda_j

 

Could you give this a try: 

<!-- Checks to See If This Is a Listing Page --> 
{% if is_listing_view %}
      <!-- Checks to See If This Is a Topic Listing --> 
      {% if topic %}
        <!-- Pulls the Topic Page HTML Title --> 
        {% set string_to_split = content.title %}
        <!-- Removes the Beginning Part of the HTML Title So You Are Just Left With the Topic Name--> 
	      {% set newArray = string_to_split|split('|', 2) %}
	      {% for item in newArray %}
		      {% if loop.last %}
             <!-- Displays Topic Name --> 
			       <h1 class="blog-title">{{ item }}</h1>
		      {% endif %}
     <!-- If Not a Topic Listing --> 
     {% else %}
         <h1 class="blog-title">{{ group.public_title }}</h1>
     {% endif %}
{% endif %} 

I added some HTML tags to explain some of the different parts. Basically, you'd want to use if topic to see if you're on a topic page as referenced here.  Then you'd want to pull in the topic name using the HTML title (as the topic name is referenced there) and you'd want to strip the rest of the HTML title that isn't the topic name (similar to the example in the topic documentation linked above. Let me know if you're still having issues!

castaneda_j
Solution
Member

blog listings page - custom H1 by topic

SOLVE

Thanks so much @JasonRosa

I especially appreciate you commenting on the various loops. It made it easier to understand. 

 

You were missing an endfor, but that was easy to spot and correct. Below is the solution I implemented. Thanks again!

 

<!-- Checks to See If This Is a Listing Page --> 
   {% if is_listing_view %}
      <!-- Checks to See If This Is a Topic Listing --> 
      {% if topic %}
         <!-- Pulls the Topic Page HTML Title --> 
         {% set string_to_split = content.title %}
         <!-- Removes the Beginning Part of the HTML Title So You Are Just Left With the Topic Name--> 
         {% set newArray = string_to_split|split('|', 2) %}

         {% for item in newArray %}
            {% if loop.last %}
               <!-- Displays Topic Name --> 
               <h1 class="blog-title">{{ item }}</h1>
            {% endif %}
         {% endfor %}

<!-- If Not a Topic Listing --> {% else %} <h1 class="blog-title">{{ group.public_title }}</h1> {% endif %} <!-- END Checks to See If This Is a Topic Listing -->
{% else %} <!-- if not a listing page, use the blog title -->
<h1 class="blog-title">{{ group.public_title }}</h1> {% endif %} <!-- END Checks to See If This Is a Listing Page -->
Woodsy
Top Contributor

blog listings page - custom H1 by topic

SOLVE

Hi

If I want to call the blog author as the H1 when listing out blogs that the author has written how do I add that to the code? I would also want the H1 to change if topic was selected as well having the main generic blog H1 if neither topic or author are selected.

 

Thanks

0 Upvotes
JasonRosa
HubSpot Employee
HubSpot Employee

blog listings page - custom H1 by topic

SOLVE

Ahh sorry about that @castaneda_j good catch! I'm happy to hear that this is working for you. 

0 Upvotes