API tools faq
paste
Advertisement
redbranchmedia

Hubspot Loop with paginated and skipped posts

redbranchmedia
Jan 30th, 2018
865
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.17 KB | None | 0 0
raw download clone embed print report
  1. link: https://community.hubspot.com/t5/Content-Design-Questions/Pagination-not-working-with-offset-posts-Hubl/m-p/152866#M4331
  2.  
  3. I've got this solved. I've posted my snippets below in case anyone else runs into this same thing.
  4.  
  5.  
  6.  
  7. tl;dr pagination won't work with anything other than the default {% content in contents %} loop.
  8.  
  9.  
  10.  
  11. My issue in a nutshell was that I needed multiple loops with offsets and post limits because their layouts were different enough that I couldn't just use CSS with nth-child.
  12.  
  13.  
  14. For blog hero I pulled in the first post and limited it to one, total post in the loop using loop.index.
  15. {% for content in contents %}
  16. {% if loop.index <= 1 %}
  17. {% set post_feat = content.featured_image %}
  18. {% set post_url = content.absolute_url %}
  19. {% set post_title = content.title %}
  20. <section class="hero-banner" style="background-image: url('{{ post_feat }}');">
  21. <div class="blog-hero-wrapper">
  22. <div class="blog-hero-content">
  23. <div class="blog-hero-cats">
  24. {% if content.topic_list %}
  25. {% for topic in content.topic_list %}
  26. {% if loop.index <= 3 %}
  27. <a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>
  28. {% endif %}
  29. {% endfor %}
  30. {% endif %}
  31. </div>
  32. <h2 class="blog-hero-title"><a href="{{ post_url }}">{{ post_title }}</a></h2>
  33. {% if content.blog_post_author %}
  34. <div class="blog-hero-author-wrapper">
  35. <a class="blog-author-link" href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}"><img src="{{ content.blog_post_author.avatar }}" alt="{{ content.blog_post_author.display_name }}">
  36. <span>by {{ content.blog_post_author.display_name }}</span>
  37. </a>
  38. </div>
  39. {% endif %}
  40. <div class="blog-hero-excerpt">
  41. {{ content.post_list_content|striptags|truncate(150, False, '...') }}
  42. </div>
  43. <a class="blog-hero-btn" href="{{ post_url }}" title="post_title">Keep Reading <i class="im-icon-arrow-right-5"></i></a>
  44. </div>
  45. </div>
  46. </section>
  47. {# end loop for first post #}
  48. {% endif %}
  49. {% endfor %}
  50.  
  51.  
  52. For the next 6 posts, the first 3 were full width, half and half layouts. The second three were 1/3 width with a different layout.
  53.  
  54.  
  55.  
  56. I have two loops. For the first, I skipped the first post using loop.index > 1 and loop.index <= to limit it to posts 2-4.
  57.  
  58.  
  59.  
  60. Similiarly for the second loop, I skipped the first four posts, and limited the output to three (posts 5-7).
  61.  
  62.  
  63.  
  64. I'm happy to say this worked well with pagination as well as Author and Topic pages without extra conditionals for those pages.
  65.  
  66.  
  67.  
  68. <div class="blog-section listing-page">
  69. <div class="blog-listing-wrapper">
  70. <div class="post-listing blog-top-three">
  71. {# start default loop #}
  72. {% for content in contents %}
  73. {% if loop.index > 1 %}
  74. {% if loop.index <= 4 %}{# for the first three posts #}
  75. <div class="post-item full-width">
  76. <div class="container">
  77. <div class="row-fluid">
  78. <div class="span6 post-content">
  79. {% if content.topic_list %}
  80. <div class="blog-cats">
  81. {% for topic in content.topic_list %}
  82. {% if loop.index <= 3 %}
  83. <a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>
  84. {% endif %}
  85. {% endfor %}
  86. </div>
  87. {% endif %}
  88. <h2 class="blog-header"><a href="{{ content.absolute_url }}">{{ content.title }}</a></h2>
  89. {% if content.blog_post_author %}
  90. <p class="byline">By <a href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}" class="author-name">{{ content.blog_post_author.display_name }}</a></p>
  91. {% endif %}
  92. <div class="post-excerpt">
  93. {{ content.post_list_content|striptags }}
  94. </div>
  95. <a class="blog-read-more-btn" href="{{ content.absolute_url }}" title="{{ content.title }}">Keep Reading</a>
  96. </div><!-- / .post-content -->
  97. <div class="span6 post-feat-img">
  98. <a href="{{ content.absolute_url }}" title="{{ content.title }}" style="background-image: url({{ content.featured_image }});"></a>
  99. </div>
  100. </div><!-- /.row-fluid -->
  101. </div><!-- /.container -->
  102. </div><!-- ./post-item -->
  103. {% endif %}{# end for the first three posts #}
  104. {% endif %}{# end skip first post #}
  105. {% endfor %}{# end contents loop #}
  106. </div><!-- post-listing blog-top-three -->
  107. <div class="post-listing blog-bottom-three">
  108. <div class="container">
  109. <div class="row-fluid">
  110. {% for content in contents %}{# restart loop #}
  111. {% if loop.index > 4 %}
  112. {% if loop.index <= 7 %}{# for second three posts #}
  113. <div class="post-item span4">
  114. <div class="post-content">
  115. <div class="post-feat-img">
  116. <a href="{{ content.absolute_url }}" title="{{ content.title }}" style="background-image: url({{ content.featured_image }});"></a>
  117. </div>
  118. {% if content.topic_list %}
  119. <div class="blog-cats">
  120. {% for topic in content.topic_list %}
  121. {% if loop.index <= 3 %}
  122. <a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>
  123. {% endif %}
  124. {% endfor %}
  125. </div>
  126. {% endif %}
  127. <h2 class="blog-header"><a href="{{ content.absolute_url }}">{{ content.title }}</a></h2>
  128. <div class="post-excerpt">
  129. {{ content.post_list_content|striptags }}
  130. </div>
  131. <a class="blog-read-more-btn" href="{{ content.absolute_url }}" title="{{ content.title }}">Keep Reading</a>
  132. </div><!-- / .post-content -->
  133. </div><!-- /.post-item -->
  134. {% endif %}{# end for the second three posts #}
  135. {% endif %}{# end skip four posts #}
  136. {% endfor %}{# end default loop #}
  137. </div><!-- row fluid -->
  138. </div><!-- container -->
  139. </div><!-- /.blog-bottom-three -->
  140. {# begin pagination #}
  141. {% set total_pages = contents.total_page_count %} <!-- sets variable for total pages -->
  142. {% set more_pages = total_pages - current_page_num %} <!-- sets variable for how many more pages are past the current pages -->
  143. {% if total_pages > 1 %}
  144. <nav class="pagination-wrapper">
  145. <ul class="pagination">
  146. <li class="{% if current_page_num == 1 %}disabled{% endif %}"><a href="{% if last_page_num=="1" %}{{ group.absolute_url }}{% else %}{{blog_page_link(last_page_num)}}{% endif %}"><i class="fa fa-angle-double-left"></i></a></li>
  147. {% if more_pages == 0 %}
  148. {% if current_page_num - 4 == 1 %}<li><a href="{{ group.absolute_url }}">{{ current_page_num - 4 }}</a></li>{% endif %}
  149. {% if current_page_num - 4 > 1 %}<li><a href="{{ blog_page_link(current_page_num - 4) }}">{{ current_page_num - 4 }}</a></li>{% endif %}
  150. {% endif %}
  151. {% if more_pages <= 1 %}
  152. {% if current_page_num - 3 == 1 %}<li><a href="{{ group.absolute_url }}">{{ current_page_num - 3 }}</a></li>{% endif %}
  153. {% if current_page_num - 3 > 1 %}<li><a href="{{ blog_page_link(current_page_num - 3) }}">{{ current_page_num - 3 }}</a></li>{% endif %}
  154. {% endif %}
  155. {% if current_page_num - 2 == 1 %}<li><a href="{{ group.absolute_url }}">{{ current_page_num - 2 }}</a></li>{% endif %}
  156. {% if current_page_num - 2 > 1 %}<li><a href="{{ blog_page_link(current_page_num - 2) }}">{{ current_page_num - 2 }}</a></li>{% endif %}
  157. {% if current_page_num - 1 == 1 %}<li><a href="{{ group.absolute_url }}">{{ current_page_num - 1 }}</a></li>{% endif %}
  158. {% if current_page_num - 1 > 1 %}<li><a href="{{ blog_page_link(current_page_num - 1) }}">{{ current_page_num - 1 }}</a></li>{% endif %}
  159. <li class="active"><a href="{% if current_page_num==1 %}{{ group.absolute_url }}{% else %}{{ blog_page_link(current_page_num) }}{% endif %}">{{ current_page_num }}</a></li>
  160. {% if current_page_num + 1 <= total_pages %}<li><a href="{{ blog_page_link(current_page_num + 1) }}">{{ current_page_num + 1 }}</a></li>{% endif %}
  161. {% if current_page_num + 2 <= total_pages %}<li><a href="{{ blog_page_link(current_page_num + 2) }}">{{ current_page_num + 2 }}</a></li>{% endif %}
  162. {% if current_page_num <= 2 %}
  163. {% if current_page_num + 3 <= total_pages %}<li><a href="{{ blog_page_link(current_page_num + 3) }}">{{ current_page_num + 3 }}</a></li>{% endif %}
  164. {% endif %}
  165. {% if current_page_num == 1 %}
  166. {% if current_page_num + 4 <= total_pages %}<li><a href="{{ blog_page_link(current_page_num + 4) }}">{{ current_page_num + 4 }}</a></li>{% endif %}
  167. {% endif %}
  168. <li class="{% if current_page_num == total_pages %}disabled{% endif %}"><a href="{{blog_page_link(next_page_num)}}"><i class="fa fa-angle-double-right"></i></a></li>
  169. </ul>
  170. </nav>
  171. {% endif %}
  172. </div><!-- /.blog-listing-wrapper -->
  173. </div><!-- /.blog-section -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!