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 calles 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 ❤️
@hire
❤️Fenix