CMS Development

Search CMS Development for solutions or ask a question
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
WhiteRabit

‎Apr 16, 2019 10:24 AM

Participant

select blog post module

SOLVE

Hi All,

 

I am new to the code side of HubSpot so please forgive me if I am missing something really simple.

 

Inside my Design Manager I have created my template for the Blog List and Blog Post. On the blog post I have made a split and put my post filter for tags on the left. It is displaying the split but putting the post filter under the blog post. (see attached screen grabs)

 

Screenshot 2019-04-16 at 16.18.53.pngScreenshot 2019-04-16 at 16.19.05.pngScreenshot 2019-04-16 at 16.19.18.png

Here is the code for the List Page:

 

<div class="blog-section">
    <div class="blog-listing-wrapper cell-wrapper">
        <div class="blog-section">
            <div class="blog-listing-wrapper cell-wrapper">
        {# simple_list_page indicates the "blog/all" page, which is a list of links to every blog post #}
                <div class="clearfix post-listing{% if simple_list_page %}-simple{% endif %}">
                    {% for content in contents %}
                        {% if loop.first %}
                            <div class="row-fluid">
                        {% endif %}
                                <div class="span6">
                                    
                                    <div class="post-item">
                                        <!-- Featured Image -->
                                        <div class="hs-featured-image-wrapper 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>
           
                                        {% if not simple_list_page %}
                                            <div class="post-body clearfix">
                                                
                                                <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">
                                                    <p class="author-date-published">
                                                    By:
                                                    {%if content.blog_post_author %}
                                                        <a class="author-link" href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.display_name }}</a> on <span class="date-published">{{ datetimeformat(content.publish_date_local_time, '%x %k:%M') }}</span>
                                                    {% endif %}
                                                    </p>
                                                </div>
                                                <!--post summary-->
                                                <div class="content-body">{{ content.post_list_content|truncatehtml(180,' ...', false)|striptags }}</div>
                                                <a class="butNew" href="{{ content.absolute_url }}">Read More</a>
                                            </div>
                                        {% else %}
                                            <h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
                                        {% endif %}
                                    </div>
                                </div>
                            {% if (loop.index0 % 2) == 1 %}
                            </div>
                            <div class="row-fluid">
                            {% endif %}
                            
                            {% if loop.last %}
                            </div>
                            {% endif %}
                    {% endfor %}
                </div>
                
                <!-- Custom Pagination -->
                
                {% if not simple_list_page %}
                <div class="custom-pagination clearfix">
                    <div class="pagination-wrapper">
                    	{% set page_list = [-2, -1, 0, 1, 2] %}
						{% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %}
						{% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %}
						{% elif current_page_num == 2 %}{% set offset = 1 %}
						{% elif current_page_num == 1 %}{% set offset = 2 %}
						{% else %}{% set offset = 0 %}{% endif %}
					
						<div class='i-prev'>
							<a href='{{ blog_page_link(1) }}'><i class='fa fa-angle-double-left' aria-hidden='true'></i></a>
						</div> 
						
						<div class="prev pagination">
							{% if last_page_num %}<a class="prev-link" href="{{ blog_page_link(last_page_num) }}"><i class='fa fa-angle-left' aria-hidden='true'></i></a>{% endif %}							
						</div>								
						<div class="pageNo pagination page-ctr">
						    
						    {% if contents.total_page_count > 5 %}
								{% if current_page_num >= 4 %}
								<div class="pageN">
									<a href="{{ blog_page_link(1) }}">1</a>
									<a class="elipses" href="{% if current_page_num <= 5 %}{{ blog_page_link(1) }}{% else %}{{ blog_page_link(current_page_num - 5) }}{% endif %}">...</a>
								</div>
								{% endif %}
							{% endif %}
							
							{% for page in page_list %}
								{% set this_page = current_page_num + page + offset %}
								{% if this_page > 0 and this_page <= contents.total_page_count %}
									<a {% if this_page == current_page_num %}class="active"{% endif %} href="{{ blog_page_link(this_page) }}">{{ this_page }}</a>
								{% endif %}
							{% endfor %}
							
							{% if contents.total_page_count > 5 %}
								{% if contents.total_page_count - current_page_num > 2 %}
								<div class="pageN">
									<a class="elipses" href="{% if contents.total_page_count - current_page_num <= 5 %}{{ contents.total_page_count }}{% else %}{{ blog_page_link(current_page_num + 5) }}{% endif %}">...</a>
									<a href="{{ blog_page_link(contents.total_page_count) }}">{{ contents.total_page_count }}</a>
								</div>
								{% endif %}
							{% endif %}
						</div>
						<div class="next pagination">
							{% if next_page_num %}<a class="next-link" href="{{ blog_page_link(current_page_num + 1) }}"><i class='fa fa-angle-right' aria-hidden='true'></i></a>{% endif %}
						</div>	
                    	
                    	<div class='i-next'><a href='{{ blog_page_link(contents.total_page_count) }}'><i class='fa fa-angle-double-right' aria-hidden='true'></i></a></div>
                    	
                    	
                    </div>
                </div>
               
                {% endif %}                   
                
                
            </div>
        </div>
    </div>
</div>

Here is the post page code:

<div class="blog-section blog-details">
    <div class="blog-post-wrapper cell-wrapper">
       <div class="blog-section">
            <div class="blog-post-wrapper cell-wrapper">
                <div class="section post-header">
                    {% if content.featured_image %}
                        <div class="blog-details-featured-image"><img src="{{ content.featured_image }}"></div>
                    {% endif %}
                    <h1>{{ content.name }}</h1>
                </div>
              
                <div class="section post-body">
                    <p class="author-date-published">By <span>{{ content.blog_post_author.display_name }}</span> on <span>{{ content.publish_date_localized }}</span></p>
                    {{ content.post_body }}
                </div>
                <div class="testimonials-wrapper">
                    {% custom_widget "Testimonials" widget_name='SphereOne - Testimonials Module' %}
                </div>
                
                <div class="social-module">
                    <div class="social-share-icons">
                        <p>{% text "simple_text_field" label="Social Share Label", value="Share this with a friend:"  %}</p>
                        {% widget_block social_sharing "my_social_sharing" label='Social Sharing', use_page_url=True, overrideable=True  %}
                            {% widget_attribute "pinterest" is_json=True %}{"custom_link_format": "", "pinterest_media": "https://cdn2.hubspot.net/hubfs/522195/SphereOne/SVGLogoNew/icon-pinterest.svg", "enabled": true, "network": "pinterest", "img_src": "https://cdn2.hubspot.net/hubfs/522195/SphereOne/SVGLogoNew/icon-pinterest.svg"}{% end_widget_attribute %}
                            {% widget_attribute "twitter" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "twitter", "img_src": "https://cdn2.hubspot.net/hubfs/522195/SphereOne/SVGLogoNew/icon-twitter.svg"}{% end_widget_attribute %}
                            {% widget_attribute "google_plus" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "google_plus", "img_src": "https://cdn2.hubspot.net/hubfs/522195/SphereOne/SVGLogoNew/icon-googleplus.svg"}{% end_widget_attribute %}
                            {% widget_attribute "linkedin" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "linkedin", "img_src": "https://cdn2.hubspot.net/hubfs/522195/SphereOne/SVGLogoNew/icon-linkedin.svg"}{% end_widget_attribute %}
                            {% widget_attribute "facebook" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "facebook", "img_src": "https://cdn2.hubspot.net/hubfs/522195/SphereOne/SVGLogoNew/icon-fb.svg"}{% end_widget_attribute %}
                            {% widget_attribute "email" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "email", "img_src": "https://cdn2.hubspot.net/hubfs/522195/SphereOne/SVGLogoNew/icon-mail.svg"}{% end_widget_attribute %}
                        {% end_widget_block %}
                    </div>
                    
                </div>

Thanks in advance

Gem

Blog Design Manager
0 Upvotes
1 Accepted solution
lscanlan
Solution
HubSpot Alumni

‎Apr 16, 2019 2:14 PM

HubSpot Alumni

select blog post module

SOLVE

Hi @WhiteRabit,

 

That usually happens when there's a syntax error in the HTML somewhere, whether that's a custom module, the listing template, or the post template. Your browser tries to "correct" a lack of closing tags by adding them, but you end up with certain elements getting nested inside elements they're not supposed to be inside of.

 

So for example instead of something like this:

 

<div class="span8 widget-span widget-type-cell blog-content"></div>
<div class="span4 widget-span widget-type-cell blog-sidebar"></div>

...you'd end up with something like this:

 

<div class="span8 widget-span widget-type-cell blog-content">
  <div class="span4 widget-span widget-type-cell blog-sidebar"></div>
</div>

In your case, assuming that's the exact content in the blog post template, I think you're missing 4 closing </div> tags at the end. But feel free to link me to the template or a blog using the template and I'll be happy to dig in a bit more for you.

 

 - Leland

Leland Scanlan

HubSpot Developer Support

View solution in original post

2 Replies 2
lscanlan
Solution
HubSpot Alumni

‎Apr 16, 2019 2:14 PM

HubSpot Alumni

select blog post module

SOLVE

Hi @WhiteRabit,

 

That usually happens when there's a syntax error in the HTML somewhere, whether that's a custom module, the listing template, or the post template. Your browser tries to "correct" a lack of closing tags by adding them, but you end up with certain elements getting nested inside elements they're not supposed to be inside of.

 

So for example instead of something like this:

 

<div class="span8 widget-span widget-type-cell blog-content"></div>
<div class="span4 widget-span widget-type-cell blog-sidebar"></div>

...you'd end up with something like this:

 

<div class="span8 widget-span widget-type-cell blog-content">
  <div class="span4 widget-span widget-type-cell blog-sidebar"></div>
</div>

In your case, assuming that's the exact content in the blog post template, I think you're missing 4 closing </div> tags at the end. But feel free to link me to the template or a blog using the template and I'll be happy to dig in a bit more for you.

 

 - Leland

Leland Scanlan

HubSpot Developer Support
WhiteRabit

‎Apr 17, 2019 5:01 AM

Participant

select blog post module

SOLVE

Thank you, thank you, that worked perfectly it was 4 missing </div> I put them in and it works now thank you so much!

0 Upvotes
Sunny

Sign up for the Developer Newsletter

Fresh content delivered to your inbox every month.
select blog post module
Hi @WhiteRabit,   That usually happens when there's a syntax error in the HTML somewhere, whether that's a custom module, the listing template, or the post template. Your browser tries ...
Hi @WhiteRabit,   That usually happens when there's a syntax error in the HTML somewhere, whether that's a custom module, the listing template, or the post template. Your browser tries ...
Developers
Apr 17, 2019