CMS Development

jennaschultz
Member | Platinum Partner
Member | Platinum Partner

Custom Blog Listing Design Issue

I've done quite a bit of customization on the blog on our client's site (blog.thebristal.com). But I am having issues getting it to look correct on the Topic (tag) pages. I have read through all the documentation and still can't figure out what I am doing wrong.

 

What I've done is set up a 'featured' tag that is meant to show up only on the main blog listing page (blog.thebristal.com), with a stream of the 6 most recent blogs under it. However, what I want is for both the Author views and the tag views to only show a standard stream of the most recent blogs along the left-hand side (like the default HubSpot blog template). I was able to successfully achieve this with the Author view (https://blog.thebristal.com/author/armonk). But I am unable to figure out how to customize the Tag view so that it simply streams the most recent few blogs along the left-hand side.

 

I attached screenshots to help explain this.

 

Here is the code currently used on the top section of the page:

<div class="blog-section">
<div class="blog-listing-wrapper cell-wrapper">
      
                                 
  <br>
  {% if blog_author %}
                        <div class="hs-author-profile"> 
                            <h2 class="hs-author-name">Community Blog: {{ blog_author.display_name }}</h2>
                          <p><a href="{{ blog_author.website }}">View Community Page</a></p>
                        </div>
    <br>

                
                <div class="post-listing{% if simple_list_page %}-simple{% endif %}">
                  
                  
                  
                  
                    {% for content in contents %}


                  
                  <div class="post-item">
                            {% if not simple_list_page %}
                            {% if content.post_list_summary_featured_image %}
                                        <div class="hs-featured-image-wrapper">
                                            <a href="{{content.absolute_url}}" title="" class="hs-featured-image-link">
                                                <img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" alt="{{ content.featured_image_alt_text | escape }}">
                                            </a>
                                        </div>
                                    {% endif %}
                          
                          
                          
                                <div class="post-header">
                                    <h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
                                    <div id="hubspot-author_data" class="hubspot-editable" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author">
                                        Posted by
                                        {%if content.blog_post_author %}
                                            <a class="author-link" href="{{ blog_author.website }}">{{ content.blog_post_author.display_name }}</a>
                                        {% endif %}
                                       {% if content.topic_list %}
                                     <p id="hubspot-topic_data">
                                        {% for topic in content.topic_list %}
                                            <a class="topic-link" href="{{ blog_tag_url(group.id, topic.slug) }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %}
                                        {% endfor %}
                                     </p>
                                {% endif %}
                                    </div>
                                </div>
                          
                          
                          
                                <div class="post-body clearfix">
                                    <!--post summary-->
                            
                                  
                                  {{ content.post_list_content|striptags|truncatehtml(150, '...', false)}}
                                   
                                </div>
                          
                          
                          
                          
                                {% if content_group.show_summary_in_listing %}
                                    <a class="more-link" href="{{ content.absolute_url }}">Read More</a>
                                {% endif %}
                               
                          
                          
                            {% else %}
                                <h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
                            {% endif %}
                          
                          
                        </div>
                    {% endfor %}
                </div>
              
              
              
              
               {% if not simple_list_page %}

                <div class="blog-pagination">
                    {% if last_page_num %}
                        <a class="previous-posts-link" href="{{ blog_page_link(last_page_num) }}">« Previous</a>
                    {% endif %}

                    {% if next_page_num %}
                        <a class="next-posts-link" href="{{ blog_page_link(next_page_num) }}">Next »</a>
                    {% endif %}
                </div>
                {% endif %}
  

  
  
  
  {% else %}
  

         
  {% if topic %} 

          {% set topicName = page_meta.html_title|replace('The Bristal Blog | ', '') %} 

            <h2>Category: {{ topicName }}</h2>

  {% endif %}
                  
          <br/>
  
  
  
  
  
{% set topic_posts = blog_recent_topic_posts('{{ content.parent_blog.id }}', 'featured', 1 ) %}
  
  
  
    
    {% for topic_post in topic_posts %}

  
  <div class="featured-blog-header">FEATURED BLOG</div>
        
            {% if topic_post.post_list_summary_featured_image %}
            
                <div class="featured-post-image-wrapper">
                    
                    <a href="{{ topic_post.absolute_url }}"><img src="{{ topic_post.post_list_summary_featured_image }}" class="featured-blog-img" alt="{{ topic_post.featured_image_alt_text }}" /></a>
                    
                </div>
            
            {% endif %}

             <h2 class="featured-blog-title"><a href="{{ topic_post.absolute_url }}">{{ topic_post.name }}</a></h2>

             <p>{{ topic_post.post_list_content|safe }}</p>
             <a class="button" href="{{ topic_post.absolute_url }}">Read More</a>
  
  
  
          
    

    {% endfor %}                                                                  

   
  

{% endif %}        
   
  
  
  
  
              
              
</div>
</div>

Design Manager Setup for the BlogDesign Manager Setup for the BlogCurrent Author View PageCurrent Author View PageCurrent Tag View ageCurrent Tag View ageCurrent Blog Listing PageCurrent Blog Listing Page

0 Upvotes
1 Reply 1
sayitaintjoe
Participant

Custom Blog Listing Design Issue

Hello Jenna -

 

If I understand correctly, you are trying to mimic the same behavior of the Author page on the Topics page?

 

If you, in the code where it says {% if topic  %}, you should be able to copy and paste your markup from the Authors section and it should do the trick for you. If I am not understanding correctly, please let me know! I'd be glad to help 🙂

 

- Joe

0 Upvotes