Grid under Portfolio Pagination (Squarespace)

[tuanphan]

To add grid simple or grid overlay under Portfolio Pagination, like this.

#1.1. Click Gear icon on Portfolio Page

#1.2. Click Advanced > Paste this code

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 06.26c23v7 - Grid under Portfolio Pagination -->
<script>
window.PortfolioThumbsConfig = {
  paginationSelector: '.item-pagination[data-collection-type^="portfolio"]',
  layout: 'grid'
};
</script>
<script src="https://code.beaverhero.com/portfolio/0626c23v7gridunderportfoliopagination.js"></script>

#2. Customize

#2.1. To change layout from Grid to Overlay, like this

You can change Line 05

layout: 'grid'

to

layout: 'overlay'

#2.2. To remove scroll bar appears in bottom of Portfolio Detail Page, you can use this code to Custom CSS

section.item-pagination + div#gridThumbs {
    width: auto !important;
}

#2.3. To reduce space between Pagination – Grid Thumbnails, use this code to Custom CSS

section.item-pagination + div#gridThumbs {
    width: auto;
    padding-top: 10px !important;
    padding-bottom: 0px !important;
}

#2.4. To change number of columns, gap between item, image ratio

You can change layout on main Portfolio Page to Grid Simple then adjust option

Then adjust layout to previous layout (ex: If you use Hover: Background, you can change to Hover: Background), then click Save

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Site Footer

Add a Markdown Block

Add this code into Markdown

<script>
window.PortfolioThumbsConfig = {
  paginationSelector: '.item-pagination[data-collection-type^="portfolio"]',
  layout: 'grid'
};
</script>
<script src="https://code.beaverhero.com/portfolio/0626c23v7gridunderportfoliopagination.js"></script>