Squarespace Portfolio Pages

Here are some tips on Squarespace Project Pages (Portfolio Pages) in Squarespace 7.1 version.

Remove Pagination Title, Keep Arrows

Add to Home > Design > Custom CSS

/* remove pagination title */
.item-pagination[data-collection-type^="portfolio"] .pagination-title-wrapper {
    display: none;
}

Remove Pagination Title, Add Previous/Next

Add to Design > Custom CSS

.item-pagination[data-collection-type^="portfolio"] h2.item-pagination-title {
    display: none;
}
.item-pagination[data-collection-type^="portfolio"] .item-pagination-prev-next {
    display: block !important;
}

Change Pagination Title Size (Mobile)

Add to Design > Custom CSS

@media screen and (max-width:767px) {
h2.item-pagination-title {
    font-size: 20px !important;
}
}

Change Pagination Arrows size

Add to Design > Custom CSS

.item-pagination-link .item-pagination-icon svg {
    width: 10px !important;
}

Add Project Links under Pagination

  1. Edit Site Footer > Add a Text Block > Insert text links > Enter project links
  2. Contact me with site url. I will give the code (Each site needs different code)

Add a Button under Pagination

Add to Settings > Advanced > Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) { 
   $('<div class="sqs-block-button button-block"><div class="sqs-block-button-container--center"><a href="https://beaverhero.com" class="sqs-block-button-element--small sqs-block-button-element">BACK TO ALL PROJECTS</a></div></div>').insertAfter('.item-pagination[data-collection-type^="portfolio"]');
 }); 
</script>

Pagination Custom Font

@font-face {
font-family: 'font-name';
src: url(paste font file url here);
}
h2.item-pagination-title {
    font-family: 'font-name' !important;
}

Remove Draft Project on Preview/Live Mode

First, add this code to Design > Custom CSS

/* Hide Draft Portfolio */
div.portfolio-grid-basic .grid-item[href*="draft"] {
    display: none;
}
a.item-pagination-link[href*="draft"] {
    display: none;
}

Next, Edit Project >> Add this into URL: draft

Assuming project has url is  /artists/dawn-waters-bake
change it to  /artists/dawn-waters-bake-draft
Above code will hide all projects whose urls contain text “draft” in portfolio page

Show Portfolio Title over Image on Hover

a.grid-item {
    position: relative;
}
.portfolio-text {
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    text-align: center;
    z-index: 999;
    margin-top: 0 !important;
    transition: all 0.3s;
    opacity: 0;
}
a.grid-item:hover .portfolio-text {
    opacity: 1;
}

 

Featured Image: Pixabay.com

1 thought on “Squarespace Portfolio Pages”

  1. I need help removing or overriding the 40-page limit with the portfolio feature of Squarespace.

    I have built this site for my client, and they need to have all of the pages portfolio pages on a single page, as per the current website. http://www.fsci.com.au/hospitality/

    Below is the link for the existing issues I have a 40-page limit.

    https://wisteria-yellow-km9c.squarespace.com/hospitality01
    https://wisteria-yellow-km9c.squarespace.com/hospitality02
    https://wisteria-yellow-km9c.squarespace.com/hospitality03
    https://wisteria-yellow-km9c.squarespace.com/hospitality04

    I need them all on one page.

    Thanks & regards
    Jai

    Reply

Leave a Comment