CMS Development

dbarbara
Contributor

Blog listing topics with featured posts

We are building a blog listing template with a featured post area at the top of the page. The plan was to display the most recent post with the topic "Featured."

 

Have started building this with help provided on this thread. But just received an additional request to change the featured post based on the topic selected.

 

So 1) a topic from a Topics List is selected and 2) a featured post with that topic plus "Featured" displays above the posts. 

 

Need to provide feedback on if this is possible. The team has just moved their blog over to HubSpot from WordPress. I am just starting with HubL, and also have a WordPress background.

 

Any ideas, or input on how, or if, this can be done is much appreciated. The mockup illustrates what's being requested.

 

Screen Shot 2017-01-24 at 10.46.23 PM.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

0 Upvotes
16 Replies 16
Jsum
Key Advisor

Blog listing topics with featured posts

I'm going to jump in here:

 

You can break of your loop by targeting the index

 

 

{% for content in contents %}
    
    {% if loop.index <= 1 %}
       
         {# place your featured markup here and the 
         first blog (most recent if order is default) will be 
         displayed in featured markup #}

    {% elif loop.index > 1 %}

         {# place your regular blog list mark up here  #}

    {% endif %}
{% endfor %}

 

This will cause the most recent post on the page to use the featured markup. If you are on a topic specific page, the most recent blog under that topic would use the featured markup. 

 

*Note: if you can change "1" to any number and that many posts will be looped using the featured markup.

 

You want to to use blogs labeled featured as the featured post though. You can use this same concept but apply it to a loop of blogs under the topic featured:

 

 

{% set topic_posts = blog_recent_topic_posts('{{ content.parent_blog.id }}', 'featured-post', 1 ) %}
{% for topic_post in topic_posts %}
{% if loop.index <= 1 %}

{# Place your featured markup here #}

{% endif %}
{% endfor %}

{% for content in contents %}

{# Place your regular list markup here #}

{% endfor %}

 

 

The first loop will find the most recently posted item from all blogs with the topic "featured". The amount of blogs retrieved is limited in the blog search funtion (find "1") and the output is also limited by only looping through the first. to increase the out put you would need to change both "1"s to whatever number. 

 

The second loop is your normal loop. Keep in mind that your featured blog will still show within its place in the sequence inside the normal list because their is nothing keeping it out of the for content in contents loop. If your first blog is always featured then you dont need the first custom loop so the first code example would work as it makes the first blog featured and does not show the first blog in the regualar list. 

 

Also keep in mind that while the "for content in contents" loop will filter based on the topic page you are on (i.e. default_blog page shows all blogs, default_blog#topic page shows posts with that topic), the custom loop that find the featured topic blogs is pulling from the full list of blogs from the defined blog group regardless of the page it's on. You could place this loop on the home page and it would still output the most recent post with the topic of "featured" out of the defined blog group.

 

Luckily you can use the {{ topic }} variable to cross check the post. The topic variable works on the listing page as a variable that stores the selected topic of blogs that are being displayed. 

 

You want to create to variable assigned functions. The first will be create an array of blogs with {{ topic }}, the second would create an array with blogs having the topic "featured".

 

 

{% set topic_posts = blog_recent_topic_posts('{{ content.parent_blog.id }}', topic, 1 ) %}

{% set topic_posts = blog_recent_topic_posts('{{ content.parent_blog.id }}', 'featured-post', 1 ) %}

 

note the lack of quotations around topic in the first funciton. topic is a variable while "featured-post" is a string. Be sure to reference the topic as a variable not a string. 

 

Now you just need to write some conditionals that:

1. allow the featured post to show on the general listing page

2. allow the featured post to show on topic specific pages

 

 

 {% set main_topic = blog_recent_topic_posts('{{ content.parent_blog.id }}', topic, 1 ) %}

{% set featured_topic = blog_recent_topic_posts('{{ content.parent_blog.id }}', 'featured-post', 1 ) %}

{% if topic is defined %}

{% set related_posts = (main_topic + featured_topic)|sort(true, false, 'publish_date')|unique('name') %}

{% for rp in related_posts %}

{% if 'featured-post' in rp.topic_list|map('name') %}

{% if loop.index <= 1 %}

{# featured post markup #}

{% endif %}

{% endif %}

{% endfor %}

{% else %}

{% for feature in featured_topic %}

{# featured post markup #}

{% endfor %}

{% endif %}

{% for content in contents %}

{# markup for the rest of your list #}

{% endfor %}

 

Here we have condition statement. If the variable topic is defined (by being on a topic specific listing page) then we combine both arrays into one then loop through the combined array. We check if the post contains "featured-post" as a topic because the combine loop combines all recent posts that have EITHER the topic "featured-post" OR the topic of the page. 

 

if the post has "featured-post" as a topic we then limit the loop to 1. This will display the markup for the most recent post containing the page topic and "featured" as a topic. 

 

If you are on the general listing page (not filtered by topic) it will only run the featured loop.

 

This may not be the most graceful of solutions but I think it does exactly what you need. I would love to get some feed back from other developers.

dbarbara
Contributor

Blog listing topics with featured posts

Thanks so much for mapping this out. I am getting to work on it today, will post on progress.

0 Upvotes
dbarbara
Contributor

Blog listing topics with featured posts

This is my original featured post markup that depended on a topic being set, but it would display the same featured (most recent) post for all topic views.

 

I can't seem to modify it to work with your markup without breaking it.

 {# featured post markup #}
{% if is_listing_view %}<div class="row-fluid clearfix featured-post-wrapper">
    <div class="featured-post">
       
	    <div class="span6">        		
		    {% set topic_posts = blog_recent_topic_posts('{{ content.parent_blog.id }}', 'cloud-101', 1 ) %}
		    {% for topic_post in topic_posts %}
		        
		        {% if topic_post.post_list_summary_featured_image %}
		        <span>
		            <img src="{{ topic_post.post_list_summary_featured_image }}" class="hs-featured-image featured-post-image-1">
		        </span>
		        {% endif %}
		</div> 
         
        <div class="span6">  
           <div class="featured">	          
	          
	           <span>
	            {% if topic_post.topic_list %}
	            <div id="hubspot-topic_data" class="list-topics"><h4>
		        {% for topic in topic_post.topic_list %}
		            <span class="topic-link">{{ topic.name }}</span>
		        {% endfor %}
		        </h4></div>
		        {% endif %}
		        		        
	           <h3>{{ topic_post.name }}</h3>
	           
	           {{ topic_post.post_list_content|truncatehtml(150, "...", false) }}
	           
	           <a class="more-link-featured" href="{{topic_post.absolute_url}}">Read More</a>
	           </span>  
	       
           </div>
        </div>    
               	              
    {% endfor %}
	</div>
 </div>{% else %}{% endif %}</div>

 

0 Upvotes
Jsum
Key Advisor

Blog listing topics with featured posts

@dbarbara I took the relevant parts of your code and merged it with mine. I also updated my code a little. 

 

Pay attention to the colored text as the colors are related parts

 

 

{# featured post markup #}

{% if is_listing_view %}

    {% set main_topic = blog_recent_topic_posts('{{ content.parent_blog.id }}', topic, 10 ) %}
    
    {% set featured_topic = blog_recent_topic_posts('{{ content.parent_blog.id }}', 'featured', 1 ) %}
    
    <div class="row-fluid clearfix featured-post-wrapper">
    
        {% if topic is defined %}
        
        {% set counter = 0 %}
                   
             {% for rp in main_topic|sort(true, false, 'publish_date')|unique('name') %}
                 
                {% if 'featured' in rp.topic_list|map('name') %}  
                
                    {% set counter = counter + 1 %}
                
                    {% if counter <= 1 %}
                 
                            <div class="featured-post">
                                <div class="span6">            	
                        		        
                        		        {% if rp.post_list_summary_featured_image %}
                        		        <span>
                        		            <img src="{{ rp.post_list_summary_featured_image }}" class="hs-featured-image featured-post-image-1">
                        		        </span>
                        		        {% endif %}
                        		</div>  
                                <div class="span6">  
                                   <div class="featured">	          
                        	          
                        	           <span>
                        	            {% if rp.topic_list %}
                                        {{ rp.publish_date_localized }}
                        	            <div id="hubspot-topic_data" class="list-topics"><h4>
                        		        {% for topic in rp.topic_list %}
                        		            <span class="topic-link">{{ topic.name }}</span>
                        		        {% endfor %}
                        		        </h4></div>
                        		        {% endif %}
                        		        		        
                        	           <h3>{{ rp.name }}</h3>
                        	           
                        	           {{ rp.post_list_content|truncatehtml(150, "...", false) }}
                        	           
                        	           <a class="more-link-featured" href="{{rp.absolute_url}}">Read More</a>
                        	           </span>  
                        	       
                                   </div>
                                </div>               	              
                        	</div>
                            
                    {% endif %}
                            
                {% endif %}
                            
            {% endfor %}
         
        {% else %}
         
            {% for feature_item in featured_topic %}
         
                <div class="featured-post">
                    <div class="span6">            	
            		        
            		        {% if feature.post_list_summary_featured_image %}
            		        <span>
            		            <img src="{{ feature_item.post_list_summary_featured_image }}" class="hs-featured-image featured-post-image-1">
            		        </span>
            		        {% endif %}
            		</div>  
                    <div class="span6">  
                       <div class="featured">	          
            	          
            	           <span>
                            {% if feature_item.topic_list %}
                            {{ feature_item.publish_date_localized }}
            	            <div id="hubspot-topic_data" class="list-topics"><h4>
            		        {% for topic in feature_item.topic_list %}
            		            <span class="topic-link">{{ topic.name }}</span>
            		        {% endfor %}
            		        </h4></div>
            		        {% endif %}
            		        		        
            	           <h3>{{ feature.name }}</h3>
            	           
            	           {{ feature_item.post_list_content|truncatehtml(150, "...", false) }}
            	           
            	           <a class="more-link-featured" href="{{feature_item.absolute_url}}">Read More</a>
            	           </span>  
            	       
                       </div>
                    </div>               	              
            	</div>
         
            {% endfor %}
         
        {% endif %}
    
    </div> <!-- End Featured Post Wrap -->
        
    {% for content in contents %}
        
        {# markup for the rest of your list #}
        
    {% endfor %} 
    
{% else %}
 
{% endif %}

 

Make sure that when you run a loop ( i.e. {% for loop_item in loop %} ) that the single item name ( loop_item ) is what you use to call data ( loop_item.data_attr ), and that you change "'featured'" anywhere in my code to what ever your "featured" topic name is.

 

I have tested this in my test portal and it works. There is still 3 loops here:

1. a loop for if on topic listing page for featured blog

2. a loop for if not on topic listing page featured blog

3. the normal listing loop

 

hopefully this does it for you.

 

dbarbara
Contributor

Blog listing topics with featured posts

@Jsum thanks so much for working your code into my markup for the featured post. Haven't been able to get it to work yet. One validation error keeps coming up:  {% if loop.index <= 1 %} is missing an endif. 

 

Want to confirm that this code is still required before {# featured post markup #}:

{% set main_topic = blog_recent_topic_posts('{{ content.parent_blog.id }}', topic, 1 ) %}
{% set featured_topic = blog_recent_topic_posts('{{ content.parent_blog.id }}', 'featured-post', 1 ) %}
{% if topic is defined %}
{% set related_posts = (main_topic + featured_topic)|sort(true, false, 'publish_date')|unique('name') %}
{% for rp in related_posts %}
{% if 'featured-post' in rp.topic_list|map('name') %}
{% if loop.index <= 1 %}

With this included have tried adding this missing {% endif %} with no luck. It didn't look like all of these conditionals are included in the featured markup you modified. Am I correct in still including this code before {# featured post markup #} ?

 

Thanks again for all your help. 

 

0 Upvotes
Jsum
Key Advisor

Blog listing topics with featured posts

@dbarbara not a problem at all.

 

I before posting my last comment I created a test scenerio in my developers portal to ensure that it would work. I ended up altering the code to be more efficient. You should copy and paste my code above into your editor and make any changes (the 'featured' topic I used should be changed to your featured topic if different for instance) because my orginal code is different from my last post.

0 Upvotes
dbarbara
Contributor

Blog listing topics with featured posts

@Jsum Thanks for the clarification.

 

A recent post now shows at the top of the full listing page, but only with the topic 'featured' assigned. No featured posts display when individual topics are selected. Not sure what could be different between our environments, and have not changed your markup (am using the topic 'featured' for now).

 

But will keep at it... after all your work on this, really want to get it up and running.

 

One question: in your testing environment, did both the featured image and the post title show?

 

What's not displaying is

 

{% if rp.post_list_summary_featured_image %}
<span>
    <img src="{{ rp.post_list_summary_featured_image }}" class="hs-featured-image featured-post-image-1">
</span>
{% endif %}

and

<h3>{{ rp.name }}</h3>

 

0 Upvotes
Jsum
Key Advisor

Blog listing topics with featured posts

Desctop screenshot.png

Yes, both the full listing page and the topic specific listing page in my portal are showing the appropriate blogs and all of their data. 

 

Is it possible that the topic you have selected is not showing a featured blog because you do not have the featured topic assigned to it? is any styling affecting the image or title (white text on white background, images set to display none, etc) this shouldn't effect the title but is your featured image set in the blog post settings and do you have the proper featured image settings in the content settings of your portal? You can use the the dev console (ctr + shift+ i) to check and see if the title, image, or any of the market inside the loop is being printed. 

 

I wish I could do more but I am not getting the same issue in my portal so I am limited. Let me know if you find something.

 

I wish I could do more to help here

0 Upvotes
dbarbara
Contributor

Blog listing topics with featured posts

From what I can see with the dev tools the image and title aren't being printed at all.

 

Maybe you can see something else that I can't on the live page?

 

Thanks so much for taking a look!

0 Upvotes
Jsum
Key Advisor

Blog listing topics with featured posts

@dbarbara would you mind sharing your blog link with me so I can take a look?

0 Upvotes
dbarbara
Contributor

Blog listing topics with featured posts

0 Upvotes
Tom
HubSpot Product Team
HubSpot Product Team

Blog listing topics with featured posts

Hey @dbarbara,

 

The best way to add a featured image would be thorugh adding a "featured" topic to a blog post and filtering by this. 

However

As far as I'm aware we don't have a way to force a topic filter to require both topics on a post to show it (I may stand corrected on this). 

 

To create an overall featured image for your blog you could use something like this:

{% set featured_post = blog_recent_topic_posts('{{ group.id }}', 'Featured', 1 ) %} with your post layout after this in a module. 

This would set a general listing for 1 image under the "featured" topic. However, it would not filter by another topic.

 

The only other way I could think of to achieve something like you are looking for would require you choosing the most recent post in a topic as your featured post. 

You could use the "recent topic post" filter from our designers site here: http://designers.hubspot.com/en/docs/hubl/hubl-supported-functions#blog-recent-topic-posts

 

You could set your topic and set the list to "1" and choose your topic. You could then create the post listing to display as you wish. This would show the latest post in your topic which you could design to appear as a "featured post" using the post layout itself. 

 

These are the only two ways I could think of to achieve something similar to what you are looking for, I hope this helps a bit.

I'd love to hear if anyone would have any other ideas on how this could be achieved though! 

dbarbara
Contributor

Blog listing topics with featured posts

The only other way I could think of to achieve something like you are looking for would require you choosing the most recent post in a topic as your featured post. 

You could use the "recent topic post" filter from our designers site here: http://designers.hubspot.com/en/docs/hubl/hubl-supported-functions#blog-recent-topic-posts

 

You could set your topic and set the list to "1" and choose your topic. You could then create the post listing to display as you wish. This would show the latest post in your topic which you could design to appear as a "featured post" using the post layout itself. 

We want to go with your solution, where the most recent post in a topic displays in a "featured" section at the top when a single topic is selected on a post listing page.

 

Does this require choosing just one topic? Or is there a variable that says if "x" topic is selected then display the most recent post from that topic? I hope this is possible -- it's what the client's asking for!

 

The documentation seems to say a topic needs to be specified (note the typo!):

 

The second parameter specifes which topic to use. This parameter can use the topic.slug for a particualr topic from content.topic_list or accepts a lowercase hyphenated name such as 'marketing-tips'.

Thanks

0 Upvotes
Tom
HubSpot Product Team
HubSpot Product Team

Blog listing topics with featured posts

The only way I could think of doing this for specific topics would be using an if else expression within your Hubl.

I can't find a way for us to pull in the topic to the selected featured image topic so what we would have to do is create a "if topic = topic1 - show featured image for topic 1, else topic 2" etc.  

 

I'm not sure of the exact syntax for this, I'm going to take a look and see if there's anything I can dig up on this. I'll be sure to get back to you if I find anything! 

0 Upvotes
dbarbara
Contributor

Blog listing topics with featured posts

Thanks! I'll keep working on it on my end.

0 Upvotes
dbarbara
Contributor

Blog listing topics with featured posts

Thanks @Tom,

 

Your input about using the most recent post as opposed to a featured post for a topic is really helpful. And really appreciate that link!