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: 
cives

‎May 1, 2020 2:57 PM

Contributor

HubDB Pagination For Video Posts

SOLVE

Hi everyone — I'm currently using hubDB and dynamic pages to create a video listing and post page. I've followed a few other tutorials trying to add pagination to my template but haven't had much luck. I'm hoping to display 6 posts per page and utilize the pagination code that is already in the template:

 

The listing page markup starts after 

{% elif dynamic_page_hubdb_table_id %}

 

 

Live link:

http://foundation-nhada-com.sandbox.hs-sites.com/success-stories

 

Template code:

<!--
    templateType: page
    isAvailableForNewContent: true
-->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>{{ content.html_title }}</title>
    <meta name="description" content="{{ content.meta_description }}"> {{ standard_header_includes }}
</head>

{% include "/foundation/header.html" %}

<body class="home page-template" itemscope itemtype="https://schema.org/WebPage">
    <main class="editor-content   clearfix  u-relative" role="main" itemscope itemprop="mainContentOfPage" itemtype="https://schema.org/WebPageElement">

        {% if dynamic_page_hubdb_row %}

        <div class="o-layout-row  pt-20 mpb-20 pb-4">
            <img style="top:-580px; left: -330px;" data-depth='-0.60' data-type="parallax" class="u-parallax-element" src="/img/nh-squares.png" />
            <div class="o-container-wide">

                <div class="grid-x">

                    <div class="cell medium-8 large-9">
                        <div class="grid-x">
                            <div class="cell medium-8">
                                <span class="c-success-title">SUCCESS STORIES • {{ dynamic_page_hubdb_row.video_title }}</span>
                                <h2 class="mb-10">{{ dynamic_page_hubdb_row.video_title }}
                </h2>
                            </div>
                        </div>

                        <span class="u-black mb-4 u-inline-block">Tags:</span>
                        <div class="grid-x">
                            <div class="cell  medium-9 pb-10">
                                {% set rows = hubdb_table_rows(2620640) %}
                                <ul class="c-pill-button-list  c-pill-button-list--blue">
                                    {% for row in rows %}
                                    <li>{% for tag in row.tag %}{{ tag.name }}{% endfor %}</li>
                                    {% endfor %}
                                </ul>
                            </div>

                            {% set rows = hubdb_table_rows(2620280) %}
                            <li>
                                <button type="button" data-filter="all">All</button>
                            </li>
                            {% for row in rows %}
                            <li>{% for tag in row.event_type %}
                                <button type="button" data-filter=".{{ tag.name }}"> {{ tag.name }} {% endfor %}</button>
                            </li>
                            {% endfor %}
                            <div class="cell  medium-3  pb-10  u-text-right">
                                <!-- AddToAny BEGIN -->
                                <div class="a2a_kit a2a_kit_size_32 c-social-share">
                                    <span class="share-icon"><i class="fas fa-share-alt"></i></span>
                                    <div class="c-social-share-networks">
                                        <a class="a2a_button_facebook"><i class="fab fa-facebook-f"></i></a>
                                        <a class="a2a_button_linkedin"><i class="fab fa-linkedin-in"></i></a>
                                        <a class="a2a_button_twitter"><i class="fab fa-twitter"></i></a>
                                        <a class="a2a_button_email"><i class="far fa-envelope"></i></a>
                                    </div>
                                </div>
                                <script async src="https://static.addtoany.com/menu/page.js"></script>
                                <!-- AddToAny END -->
                            </div>
                        </div>

                        <div class="grid-x">
                            <div class="cell">
                                <div class="o-embed-responsive">
                                    <iframe height="600px" src="https://www.youtube-nocookie.com/embed/06QsACEkLeI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
        <!-- /layout-row-->

        <div class="up-next">
            <div class="up-next-header"><span>Up Next</span></div>
            <div class="up-next-content">
                <h5 class="u-ttu  ">Popular</h5>
                <div class="up-next-post">
                    <h6>NHADA Foundation joins Volvo Car USA at Exeter SST</h6>
                    <p>Dan Enxing</p>
                    <span class="up-next-meta">02 Feb 2020</span>
                </div>
                <div class="up-next-post">
                    <h6>NHADA Foundation joins Volvo Car USA at Exeter SST</h6>
                    <p>Dan Enxing</p>
                    <span class="up-next-meta">02 Feb 2020</span>
                </div>
                <div class="up-next-post">
                    <h6>NHADA Foundation joins Volvo Car USA at Exeter SST</h6>
                    <p>Dan Enxing</p>
                    <span class="up-next-meta">02 Feb 2020</span>
                </div>
            </div>
        </div>
    </main>
    <!-- /editor-content -->

    {% elif dynamic_page_hubdb_table_id %} {% set rows = hubdb_table_rows(2620640) %} {% module "module_1588274701186129" path="/foundation/dist/modules/Image Hero Alternate", label="Image Hero Alternate" %}
    <!-- /.c-hero -->

    <div class="o-layout-row  pt-20 mpb-20 pb-4">
        <div class="o-container-wide">

            {% module "module_158834811832843" path="/foundation/dist/modules/Multi-color Section Header Centered", label="Multi-color Section Header Centered" %}

            <hr class="mb-8">

            <div>
                <h3>New &amp; Noteworthy</h3>

                <div class="grid-x  c-stories-grid">

                    {% for row in hubdb_table_rows(2620640) %}
                    <div class="c-stories-grid-item">

                        <div style="background-image:url('{{ row.video_thumbnail.url }}')">
                            <span class="c-stories-grid-item-play "><i class="far fa-play-circle"></i></span>
                            <!-- <span class="u-pinned-icon"><i class="fas fa-thumbtack"></i></span> -->
                            <a href="{{ request.path }}/{{ row.hs_path }}"></a>
                            <div class="c-stories-grid-item-content">

                                <h6>{{ row.video_title }}</h6>
                                <hr>
                                <div class="grid-x">
                                    <span class="cell  medium-8">{{ row.location }}</span>
                                    <span class="cell  medium-4  u-medium-text-right">{{ row.start_date|datetimeformat('%B %e, %Y') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}

                </div>
            </div>

        </div>
    </div>
    <!-- /layout-row-->
    <div class="o-layout-row  pt-20 mpb-20 pb-4">
        <div class="o-container-wide">

            <div class="c-hr-tab  c-hr-tab--left">
                <div class="c-pagination  c-pagination--orange">
                    <a href="" class="next-posts-link">Next <span><i class="fas fa-arrow-circle-right"></i></span></a>
                </div>
                <div class="c-drop-down-list">
                    <div class="c-hr-tab-orange  dropDownList">Tags <span><i class="fas fa-arrow-down"></i></span></div>
                    <ul>
                        <li><a href="">Link 1</a></li>
                        <li><a href="">Link 2</a></li>
                        <li><a href="">Link 3</a></li>
                        <li><a href="">Link 4</a></li>
                    </ul>
                </div>
                <hr class="mb-16" />
            </div>

            <div class="grid-x">
                <div class="cell medium-4">
                    <h2 class="u-styled-heading--no-underline  u-styled-heading">Share Your <span>Story</span></h2>
                    <p>My education at Lakes Region Community College was a great jumpstart to my career. Shortly after completing my co-op at Quirk GMC, I was hired as a full time technician making over $55,000 a year.</p>
                    <a class="c-btn-call-out c-btn-call-out--orange  mt-4  mb-6" href="#">CALL TO ACTION</a>
                </div>
                <div class="cell  medium-4  medium-offset-4">
                    <h4 class="u-inline-block mb-10">Trending  <span class="u-orange u-inline-block"><i class="fas fa-chart-line"></i></span></h4>
                    <ul class="c-thumbnail-link-list">
                        <li>
                            <span><a href="#"><img src="img/small-thumb.png" alt=""></a></span>
                            <div class="ml-6">
                                <a href="#">
                                    <h5 class="mb-2">David Lilly</h5>
                                    <p>Portsmouth High School</p>
                                </a>
                            </div>
                        </li>

                        <li>
                            <span><a href="#"><img src="img/small-thumb.png" alt=""></a></span>
                            <div class="ml-6">
                                <a href="#">
                                    <h5 class="mb-2">David Lilly</h5>
                                    <p>Portsmouth High School</p>
                                </a>
                            </div>
                        </li>

                        <li>
                            <span><a href="#"><img src="img/small-thumb.png" alt=""></a></span>
                            <div class="ml-6">
                                <a href="#">
                                    <h5 class="mb-2">David Lilly</h5>
                                    <p>Portsmouth High School</p>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    {% endif %}

    </main>
    <!-- /editor-content -->

    <!-- /footer -->

    {% include "/foundation/footer.html" %}

    <!-- /modal-navigation -->
    {{ standard_footer_includes }}

</body>

</html>
HubDB
0 Upvotes
1 Accepted solution
psdtohubspot
Solution

‎May 7, 2020 5:08 PM

Key Advisor

HubDB Pagination For Video Posts

SOLVE

Hi @cives 

Please find the working snippet below 

<!--
    templateType: page
    isAvailableForNewContent: true
-->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>{{ content.html_title }}</title>
    <meta name="description" content="{{ content.meta_description }}"> {{ standard_header_includes }}
</head>

{% include "/foundation/header.html" %}

<body class="home page-template" itemscope itemtype="https://schema.org/WebPage">
    <main class="editor-content   clearfix  u-relative" role="main" itemscope itemprop="mainContentOfPage" itemtype="https://schema.org/WebPageElement">

        {% if dynamic_page_hubdb_row %}

        <div class="o-layout-row  pt-20 mpb-20 pb-4">
            <img style="top:-580px; left: -330px;" data-depth='-0.60' data-type="parallax" class="u-parallax-element" src="/img/nh-squares.png" />
            <div class="o-container-wide">

                <div class="grid-x">

                    <div class="cell medium-8 large-9">
                        <div class="grid-x">
                            <div class="cell medium-8">
                                <span class="c-success-title">SUCCESS STORIES • {{ dynamic_page_hubdb_row.video_title }}</span>
                                <h2 class="mb-10">{{ dynamic_page_hubdb_row.video_title }}
                </h2>
                            </div>
                        </div>

                        <span class="u-black mb-4 u-inline-block">Tags:</span>
                        <div class="grid-x">
                            <div class="cell  medium-9 pb-10">
                                {% set rows = hubdb_table_rows(2620640) %}
                                <ul class="c-pill-button-list  c-pill-button-list--blue">
                                    {% for row in rows %}
                                    <li>{% for tag in row.tag %}{{ tag.name }}{% endfor %}</li>
                                    {% endfor %}
                                </ul>
                            </div>

                            {% set rows = hubdb_table_rows(2620280) %}
                            <li>
                                <button type="button" data-filter="all">All</button>
                            </li>
                            {% for row in rows %}
                            <li>{% for tag in row.event_type %}
                                <button type="button" data-filter=".{{ tag.name }}"> {{ tag.name }} {% endfor %}</button>
                            </li>
                            {% endfor %}
                            <div class="cell  medium-3  pb-10  u-text-right">
                                <!-- AddToAny BEGIN -->
                                <div class="a2a_kit a2a_kit_size_32 c-social-share">
                                    <span class="share-icon"><i class="fas fa-share-alt"></i></span>
                                    <div class="c-social-share-networks">
                                        <a class="a2a_button_facebook"><i class="fab fa-facebook-f"></i></a>
                                        <a class="a2a_button_linkedin"><i class="fab fa-linkedin-in"></i></a>
                                        <a class="a2a_button_twitter"><i class="fab fa-twitter"></i></a>
                                        <a class="a2a_button_email"><i class="far fa-envelope"></i></a>
                                    </div>
                                </div>
                                <script async src="https://static.addtoany.com/menu/page.js"></script>
                                <!-- AddToAny END -->
                            </div>
                        </div>

                        <div class="grid-x">
                            <div class="cell">
                                <div class="o-embed-responsive">
                                    <iframe height="600px" src="https://www.youtube-nocookie.com/embed/06QsACEkLeI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
        <!-- /layout-row-->

        <div class="up-next">
            <div class="up-next-header"><span>Up Next</span></div>
            <div class="up-next-content">
                <h5 class="u-ttu  ">Popular</h5>
                <div class="up-next-post">
                    <h6>NHADA Foundation joins Volvo Car USA at Exeter SST</h6>
                    <p>Dan Enxing</p>
                    <span class="up-next-meta">02 Feb 2020</span>
                </div>
                <div class="up-next-post">
                    <h6>NHADA Foundation joins Volvo Car USA at Exeter SST</h6>
                    <p>Dan Enxing</p>
                    <span class="up-next-meta">02 Feb 2020</span>
                </div>
                <div class="up-next-post">
                    <h6>NHADA Foundation joins Volvo Car USA at Exeter SST</h6>
                    <p>Dan Enxing</p>
                    <span class="up-next-meta">02 Feb 2020</span>
                </div>
            </div>
        </div>
    </main>
    <!-- /editor-content -->

    {% elif dynamic_page_hubdb_table_id %} {% set rows = hubdb_table_rows(2620640) %} {% module "module_1588274701186129" path="/foundation/dist/modules/Image Hero Alternate", label="Image Hero Alternate" %}
    <!-- /.c-hero -->

    <div class="o-layout-row  pt-20 mpb-20 pb-4">
        <div class="o-container-wide">

            {% module "module_158834811832843" path="/foundation/dist/modules/Multi-color Section Header Centered", label="Multi-color Section Header Centered" %}

            <hr class="mb-8">

            <div>
                <h3>New &amp; Noteworthy</h3>
<div id="c-stories-grid-listing">
                <div class="grid-x  c-stories-grid list">

                    {% for row in hubdb_table_rows(2620640) %}
                    <div class="c-stories-grid-item">

                        <div style="background-image:url('{{ row.video_thumbnail.url }}')">
                            <span class="c-stories-grid-item-play "><i class="far fa-play-circle"></i></span>
                            <!-- <span class="u-pinned-icon"><i class="fas fa-thumbtack"></i></span> -->
                            <a href="{{ request.path }}/{{ row.hs_path }}"></a>
                            <div class="c-stories-grid-item-content">

                                <h6>{{ row.video_title }}</h6>
                                <hr>
                                <div class="grid-x">
                                    <span class="cell  medium-8">{{ row.location }}</span>
                                    <span class="cell  medium-4  u-medium-text-right">{{ row.start_date|datetimeformat('%B %e, %Y') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}

                </div>

<div class="pagination-wrap flex">
     
      <ul class="pagination-layout"></ul>
     
    </div>

                </div>
            </div>

        </div>
    </div>
    <!-- /layout-row-->
    <div class="o-layout-row  pt-20 mpb-20 pb-4">
        <div class="o-container-wide">

            <div class="c-hr-tab  c-hr-tab--left">
                <div class="c-pagination  c-pagination--orange">
                    <a href="" class="next-posts-link">Next <span><i class="fas fa-arrow-circle-right"></i></span></a>
                </div>
                <div class="c-drop-down-list">
                    <div class="c-hr-tab-orange  dropDownList">Tags <span><i class="fas fa-arrow-down"></i></span></div>
                    <ul>
                        <li><a href="">Link 1</a></li>
                        <li><a href="">Link 2</a></li>
                        <li><a href="">Link 3</a></li>
                        <li><a href="">Link 4</a></li>
                    </ul>
                </div>
                <hr class="mb-16" />
            </div>

            <div class="grid-x">
                <div class="cell medium-4">
                    <h2 class="u-styled-heading--no-underline  u-styled-heading">Share Your <span>Story</span></h2>
                    <p>My education at Lakes Region Community College was a great jumpstart to my career. Shortly after completing my co-op at Quirk GMC, I was hired as a full time technician making over $55,000 a year.</p>
                    <a class="c-btn-call-out c-btn-call-out--orange  mt-4  mb-6" href="#">CALL TO ACTION</a>
                </div>
                <div class="cell  medium-4  medium-offset-4">
                    <h4 class="u-inline-block mb-10">Trending  <span class="u-orange u-inline-block"><i class="fas fa-chart-line"></i></span></h4>
                    <ul class="c-thumbnail-link-list">
                        <li>
                            <span><a href="#"><img src="img/small-thumb.png" alt=""></a></span>
                            <div class="ml-6">
                                <a href="#">
                                    <h5 class="mb-2">David Lilly</h5>
                                    <p>Portsmouth High School</p>
                                </a>
                            </div>
                        </li>

                        <li>
                            <span><a href="#"><img src="img/small-thumb.png" alt=""></a></span>
                            <div class="ml-6">
                                <a href="#">
                                    <h5 class="mb-2">David Lilly</h5>
                                    <p>Portsmouth High School</p>
                                </a>
                            </div>
                        </li>

                        <li>
                            <span><a href="#"><img src="img/small-thumb.png" alt=""></a></span>
                            <div class="ml-6">
                                <a href="#">
                                    <h5 class="mb-2">David Lilly</h5>
                                    <p>Portsmouth High School</p>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    {% endif %}

<script type="text/javascript">
    $(document).ready(function(){
    var perPage = 3;

new List("c-stories-grid-listing", {
  valueNames: ["c-stories-grid-item"],
  page: perPage,
  plugins: [
    // can not make left and right work on List.js 1.5.0, so I use 1.3.0 instead, which requires List.pagination.js plugin
    ListPagination({
      paginationClass: "pagination-layout",
      left: 2,
      right: 2
    })
  ]
}).on("updated", function(list) {
  var isFirst = list.i == 1;
  var isLast = list.i > list.matchingItems.length - list.page;

  // make the Prev and Nex buttons disabled on first and last pages accordingly
  $(".pagination-prev.disabled, .pagination-next.disabled").removeClass(
    "disabled"
  );
  if (isFirst) {
    $(".pagination-prev").addClass("disabled");
  }
  if (isLast) {
    $(".pagination-next").addClass("disabled");
  }

  // hide pagination if there one or less pages to show
  if (list.matchingItems.length <= perPage) {
    $(".pagination-wrap").hide();
  } else {
    $(".pagination-wrap").show();
  }
});

$(".pagination-next").click(function() {
  $(".pagination-layout .active")
    .next()
    .trigger("click");
});
$(".pagination-prev").click(function() {
  $(".pagination-layout .active")
    .prev()
    .trigger("click");
});
});

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.3.0/list.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.pagination.js/0.1.1/list.pagination.min.js"></script>
    </main>
    <!-- /editor-content -->

    <!-- /footer -->

    {% include "/foundation/footer.html" %}

    <!-- /modal-navigation -->
    {{ standard_footer_includes }}

</body>

</html>



Please add this style as well to your stylesheet

ul.pagination-layout {
    display: flex;
    justify-content: center;
    align-items: center;
}

ul.pagination-layout li {
    margin: 0px 10px;
}

ul.pagination-layout li a {
    padding: 5px 15px;
    display: block;
    border: 1px solid #000;
    color: #000;
}


Hope this will work 100% for you Just Copy & Paste

Please Accept this Solution to Help Community 
Thanks!
Ajit
support@psdtohubspot.com

View solution in original post

0 Upvotes
8 Replies 8
psdtohubspot

‎May 1, 2020 3:28 PM

Key Advisor

HubDB Pagination For Video Posts

SOLVE

Hi @cives 
Glad to help you here 

Please have  a look at the similar ticket I resolved

https://community.hubspot.com/t5/CMS-Development/Paginating-HubDB/m-p/332429#M16190

Let me know if any questions.


Thanks! 
Ajit

0 Upvotes
cives

‎May 1, 2020 3:43 PM

Contributor

HubDB Pagination For Video Posts

SOLVE

Hi Ajit, thanks for that. It looks law raw html/css/js how does this work within the CMS? How does the markup look with hubL... Am I missing something?

Thanks,

0 Upvotes
psdtohubspot

‎May 1, 2020 4:23 PM

Key Advisor

HubDB Pagination For Video Posts

SOLVE

@cives 

Share the URL of the page with me where this render, I need an idea of Output.

I can see source code contains List-item

0 Upvotes
cives

‎May 4, 2020 9:27 AM

Contributor

HubDB Pagination For Video Posts

SOLVE

Do you need anything else?

0 Upvotes
psdtohubspot

‎May 4, 2020 5:03 PM

Key Advisor

HubDB Pagination For Video Posts

SOLVE

@cives 
No looks Good to me, I will share snippets by tomorrow.

psdtohubspot
Solution

‎May 7, 2020 5:08 PM

Key Advisor

HubDB Pagination For Video Posts

SOLVE

Hi @cives 

Please find the working snippet below 

<!--
    templateType: page
    isAvailableForNewContent: true
-->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>{{ content.html_title }}</title>
    <meta name="description" content="{{ content.meta_description }}"> {{ standard_header_includes }}
</head>

{% include "/foundation/header.html" %}

<body class="home page-template" itemscope itemtype="https://schema.org/WebPage">
    <main class="editor-content   clearfix  u-relative" role="main" itemscope itemprop="mainContentOfPage" itemtype="https://schema.org/WebPageElement">

        {% if dynamic_page_hubdb_row %}

        <div class="o-layout-row  pt-20 mpb-20 pb-4">
            <img style="top:-580px; left: -330px;" data-depth='-0.60' data-type="parallax" class="u-parallax-element" src="/img/nh-squares.png" />
            <div class="o-container-wide">

                <div class="grid-x">

                    <div class="cell medium-8 large-9">
                        <div class="grid-x">
                            <div class="cell medium-8">
                                <span class="c-success-title">SUCCESS STORIES • {{ dynamic_page_hubdb_row.video_title }}</span>
                                <h2 class="mb-10">{{ dynamic_page_hubdb_row.video_title }}
                </h2>
                            </div>
                        </div>

                        <span class="u-black mb-4 u-inline-block">Tags:</span>
                        <div class="grid-x">
                            <div class="cell  medium-9 pb-10">
                                {% set rows = hubdb_table_rows(2620640) %}
                                <ul class="c-pill-button-list  c-pill-button-list--blue">
                                    {% for row in rows %}
                                    <li>{% for tag in row.tag %}{{ tag.name }}{% endfor %}</li>
                                    {% endfor %}
                                </ul>
                            </div>

                            {% set rows = hubdb_table_rows(2620280) %}
                            <li>
                                <button type="button" data-filter="all">All</button>
                            </li>
                            {% for row in rows %}
                            <li>{% for tag in row.event_type %}
                                <button type="button" data-filter=".{{ tag.name }}"> {{ tag.name }} {% endfor %}</button>
                            </li>
                            {% endfor %}
                            <div class="cell  medium-3  pb-10  u-text-right">
                                <!-- AddToAny BEGIN -->
                                <div class="a2a_kit a2a_kit_size_32 c-social-share">
                                    <span class="share-icon"><i class="fas fa-share-alt"></i></span>
                                    <div class="c-social-share-networks">
                                        <a class="a2a_button_facebook"><i class="fab fa-facebook-f"></i></a>
                                        <a class="a2a_button_linkedin"><i class="fab fa-linkedin-in"></i></a>
                                        <a class="a2a_button_twitter"><i class="fab fa-twitter"></i></a>
                                        <a class="a2a_button_email"><i class="far fa-envelope"></i></a>
                                    </div>
                                </div>
                                <script async src="https://static.addtoany.com/menu/page.js"></script>
                                <!-- AddToAny END -->
                            </div>
                        </div>

                        <div class="grid-x">
                            <div class="cell">
                                <div class="o-embed-responsive">
                                    <iframe height="600px" src="https://www.youtube-nocookie.com/embed/06QsACEkLeI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
        <!-- /layout-row-->

        <div class="up-next">
            <div class="up-next-header"><span>Up Next</span></div>
            <div class="up-next-content">
                <h5 class="u-ttu  ">Popular</h5>
                <div class="up-next-post">
                    <h6>NHADA Foundation joins Volvo Car USA at Exeter SST</h6>
                    <p>Dan Enxing</p>
                    <span class="up-next-meta">02 Feb 2020</span>
                </div>
                <div class="up-next-post">
                    <h6>NHADA Foundation joins Volvo Car USA at Exeter SST</h6>
                    <p>Dan Enxing</p>
                    <span class="up-next-meta">02 Feb 2020</span>
                </div>
                <div class="up-next-post">
                    <h6>NHADA Foundation joins Volvo Car USA at Exeter SST</h6>
                    <p>Dan Enxing</p>
                    <span class="up-next-meta">02 Feb 2020</span>
                </div>
            </div>
        </div>
    </main>
    <!-- /editor-content -->

    {% elif dynamic_page_hubdb_table_id %} {% set rows = hubdb_table_rows(2620640) %} {% module "module_1588274701186129" path="/foundation/dist/modules/Image Hero Alternate", label="Image Hero Alternate" %}
    <!-- /.c-hero -->

    <div class="o-layout-row  pt-20 mpb-20 pb-4">
        <div class="o-container-wide">

            {% module "module_158834811832843" path="/foundation/dist/modules/Multi-color Section Header Centered", label="Multi-color Section Header Centered" %}

            <hr class="mb-8">

            <div>
                <h3>New &amp; Noteworthy</h3>
<div id="c-stories-grid-listing">
                <div class="grid-x  c-stories-grid list">

                    {% for row in hubdb_table_rows(2620640) %}
                    <div class="c-stories-grid-item">

                        <div style="background-image:url('{{ row.video_thumbnail.url }}')">
                            <span class="c-stories-grid-item-play "><i class="far fa-play-circle"></i></span>
                            <!-- <span class="u-pinned-icon"><i class="fas fa-thumbtack"></i></span> -->
                            <a href="{{ request.path }}/{{ row.hs_path }}"></a>
                            <div class="c-stories-grid-item-content">

                                <h6>{{ row.video_title }}</h6>
                                <hr>
                                <div class="grid-x">
                                    <span class="cell  medium-8">{{ row.location }}</span>
                                    <span class="cell  medium-4  u-medium-text-right">{{ row.start_date|datetimeformat('%B %e, %Y') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}

                </div>

<div class="pagination-wrap flex">
     
      <ul class="pagination-layout"></ul>
     
    </div>

                </div>
            </div>

        </div>
    </div>
    <!-- /layout-row-->
    <div class="o-layout-row  pt-20 mpb-20 pb-4">
        <div class="o-container-wide">

            <div class="c-hr-tab  c-hr-tab--left">
                <div class="c-pagination  c-pagination--orange">
                    <a href="" class="next-posts-link">Next <span><i class="fas fa-arrow-circle-right"></i></span></a>
                </div>
                <div class="c-drop-down-list">
                    <div class="c-hr-tab-orange  dropDownList">Tags <span><i class="fas fa-arrow-down"></i></span></div>
                    <ul>
                        <li><a href="">Link 1</a></li>
                        <li><a href="">Link 2</a></li>
                        <li><a href="">Link 3</a></li>
                        <li><a href="">Link 4</a></li>
                    </ul>
                </div>
                <hr class="mb-16" />
            </div>

            <div class="grid-x">
                <div class="cell medium-4">
                    <h2 class="u-styled-heading--no-underline  u-styled-heading">Share Your <span>Story</span></h2>
                    <p>My education at Lakes Region Community College was a great jumpstart to my career. Shortly after completing my co-op at Quirk GMC, I was hired as a full time technician making over $55,000 a year.</p>
                    <a class="c-btn-call-out c-btn-call-out--orange  mt-4  mb-6" href="#">CALL TO ACTION</a>
                </div>
                <div class="cell  medium-4  medium-offset-4">
                    <h4 class="u-inline-block mb-10">Trending  <span class="u-orange u-inline-block"><i class="fas fa-chart-line"></i></span></h4>
                    <ul class="c-thumbnail-link-list">
                        <li>
                            <span><a href="#"><img src="img/small-thumb.png" alt=""></a></span>
                            <div class="ml-6">
                                <a href="#">
                                    <h5 class="mb-2">David Lilly</h5>
                                    <p>Portsmouth High School</p>
                                </a>
                            </div>
                        </li>

                        <li>
                            <span><a href="#"><img src="img/small-thumb.png" alt=""></a></span>
                            <div class="ml-6">
                                <a href="#">
                                    <h5 class="mb-2">David Lilly</h5>
                                    <p>Portsmouth High School</p>
                                </a>
                            </div>
                        </li>

                        <li>
                            <span><a href="#"><img src="img/small-thumb.png" alt=""></a></span>
                            <div class="ml-6">
                                <a href="#">
                                    <h5 class="mb-2">David Lilly</h5>
                                    <p>Portsmouth High School</p>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    {% endif %}

<script type="text/javascript">
    $(document).ready(function(){
    var perPage = 3;

new List("c-stories-grid-listing", {
  valueNames: ["c-stories-grid-item"],
  page: perPage,
  plugins: [
    // can not make left and right work on List.js 1.5.0, so I use 1.3.0 instead, which requires List.pagination.js plugin
    ListPagination({
      paginationClass: "pagination-layout",
      left: 2,
      right: 2
    })
  ]
}).on("updated", function(list) {
  var isFirst = list.i == 1;
  var isLast = list.i > list.matchingItems.length - list.page;

  // make the Prev and Nex buttons disabled on first and last pages accordingly
  $(".pagination-prev.disabled, .pagination-next.disabled").removeClass(
    "disabled"
  );
  if (isFirst) {
    $(".pagination-prev").addClass("disabled");
  }
  if (isLast) {
    $(".pagination-next").addClass("disabled");
  }

  // hide pagination if there one or less pages to show
  if (list.matchingItems.length <= perPage) {
    $(".pagination-wrap").hide();
  } else {
    $(".pagination-wrap").show();
  }
});

$(".pagination-next").click(function() {
  $(".pagination-layout .active")
    .next()
    .trigger("click");
});
$(".pagination-prev").click(function() {
  $(".pagination-layout .active")
    .prev()
    .trigger("click");
});
});

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.3.0/list.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.pagination.js/0.1.1/list.pagination.min.js"></script>
    </main>
    <!-- /editor-content -->

    <!-- /footer -->

    {% include "/foundation/footer.html" %}

    <!-- /modal-navigation -->
    {{ standard_footer_includes }}

</body>

</html>



Please add this style as well to your stylesheet

ul.pagination-layout {
    display: flex;
    justify-content: center;
    align-items: center;
}

ul.pagination-layout li {
    margin: 0px 10px;
}

ul.pagination-layout li a {
    padding: 5px 15px;
    display: block;
    border: 1px solid #000;
    color: #000;
}


Hope this will work 100% for you Just Copy & Paste

Please Accept this Solution to Help Community 
Thanks!
Ajit
support@psdtohubspot.com

0 Upvotes
psdtohubspot

‎May 7, 2020 5:13 PM

Key Advisor

HubDB Pagination For Video Posts

SOLVE

Just Tested its working for me
https://codepen.io/ajitiosys/pen/PoPExwy

0 Upvotes
cives

‎May 1, 2020 4:51 PM

Contributor

HubDB Pagination For Video Posts

SOLVE

http://foundation-nhada-com.sandbox.hs-sites.com/success-stories

 

Is that what you are looking for? The 6th box shows what a dynamic link will look like. Thank you,

0 Upvotes
Sunny

Sign up for the Developer Newsletter

Fresh content delivered to your inbox every month.
HubDB Pagination For Video Posts
Hi @cives  Please find the working snippet below  <!-- templateType: page isAvailableForNewContent: true --> <!doctype html> <html> <head&g...
Hi @cives  Please find the working snippet below  <!-- templateType: page isAvailableForNewContent: true --> <!doctype html> <html> <head&g...
Developers
May 7, 2020