How to add a "back to portfolio" -link to pagination in Squarespace portfolio

I sometimes like to answer question in the Squarespace forum. Giving back to the community is what it’s all about.

A question

I ran into a question How do I add a switcher icon for “home” portfolio navigation

Video

Icons?

First, don’t use an icon here, it’s proven that visitors / users do not understand them. Lots of UX studies on the subject. You can read for example this post called Label Your Icons 🙂

Code

There are few things to take into account, but here’s the basic version. Add this to your code injection after jQuery:

<script>
// ⬜️ domready START
$( document ).ready(function() {

    var paginationMiddleLink = '<a href="/portfolio" class="item-pagination-link item-pagination-link-middle custon-inserted-in-code-injection"><span class="pagination-title-wrapper"><h2 class="item-pagination-title">Back to Portfolio</h2></span></a>';

$( document ).ready(function() {

if( ($('.item-pagination-link--prev').length) && ($('.item-pagination-link--next').length) ){
  console.log("domready has both");
  //jos on previous JA next, insert WORK after prev. no extra elements
  $(paginationMiddleLink).insertAfter('.item-pagination-link--prev');

} else if ($('.item-pagination-link--prev').length ) {
  console.log("has prev only");
  //if prev exist, next does not: insert work after prev & fake after work
  $(paginationMiddleLink).insertAfter('.item-pagination-link--prev');
  $('<a style="visibility:hidden;" class="item-pagination-link fake-pagination-spacer">MOI</a>').insertAfter('.item-pagination-link-middle');

} else {
  //if next exist, prev does not: insert work before prev & fake before work
  $(paginationMiddleLink).insertBefore('.item-pagination-link--next');
  $('<a style="visibility:hidden;" class="item-pagination-link fake-pagination-spacer">MOI</a>').insertBefore('.item-pagination-link-middle');
  console.log("has next only");
}
});

});
// ⬛️ domready END
</script>

Hire me

P.S you can also hire me for any advanced Squarespace design / code work ❤️ Get in touch

❤️ Petri