Squarespace Portfolio Title between Pagination Titles

Squarespace Tips
1

Description: adding Portfolio Page Title between Pagination Titles

image
image700×186 25.4 KB

#1.1. Click Gear icon on Portfolio Page

image
image700×462 79.3 KB

#1.2. Click Advanced > Paste this code

  • If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1
<!-- 07.26c010v2 Portfolio Pagination Page Title -->
<script>
window.PodpTitleConfig = {
  titleTag: 'h4',
  titleClass: 'podp-title',
  titleSeparator: '—',

  desktopFontSize: '18px',
  mobileFontSize: '12px',
  mobileMaxWidth: '100px',

  paginationTitleDesktopSize: '',
  paginationTitleMobileSize: '14px',

  mobileBreakpoint: 767
};
</script>

<script>
!function(){var c=window.PodpTitleConfig;if(!c)return;var S="podp-title-styles",N='.item-pagination[data-collection-type^="portfolio"]',P=".item-pagination-title",k="."+c.titleClass.trim().split(/\s+/).join(".");if(!document.getElementById(S)){var s=N+"{position:relative}"+k+"{position:absolute;left:50%;transform:translateX(-50%);margin:0!important;font-size:"+c.desktopFontSize+";font-family:var(--portfolio-item-pagination-font-font-family);font-style:var(--portfolio-item-pagination-font-font-style);font-weight:var(--portfolio-item-pagination-font-font-weight)}";c.paginationTitleDesktopSize&&(s+=N+" "+P+"{font-size:"+c.paginationTitleDesktopSize+"!important}");s+="@media screen and (max-width:"+c.mobileBreakpoint+"px){"+k+"{font-size:"+c.mobileFontSize+";max-width:"+c.mobileMaxWidth+";text-align:center}";c.paginationTitleMobileSize&&(s+=N+" "+P+"{font-size:"+c.paginationTitleMobileSize+"!important}");s+="}";var e=document.createElement("style");e.id=S;e.textContent=s;document.head.appendChild(e)}function t(){var r=document.title||"",p=c.titleSeparator;return p&&-1!==r.indexOf(p)?r.split(p)[0].trim():r.trim()}function i(){var x=t();document.querySelectorAll(N).forEach(function(n){var o=n.querySelector(k);if("true"===n.dataset.podpTitleInit&&o)return void(o.textContent=x);n.dataset.podpTitleInit="true";var d=document.createElement(c.titleTag);d.className=c.titleClass;d.textContent=x;n.appendChild(d)})}addEventListener("load",i);addEventListener("mercury:load",i)}();
</script>

image
image700×532 37.7 KB

#2. Customize

#2.1. By default, Page Title uses Heading 4 (h4), if you want to change it to other tags: h1, h2, h3, h5, h6, span, p, div, strong, em… change Line 06

titleTag: 'h4',

#2.2. To change Page Title size on Desktop/Mobile, change Line 08, Line 09

desktopFontSize: '18px',
  mobileFontSize: '12px',

#2.3. To prevent overlap between Pagination Titles – new Page Titles, you can limit width of new Page Titles, by edit Line 10

mobileMaxWidth: '100px',

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

image
image626×355 21.1 KB

Add a Markdown Block

image
image451×700 76 KB

Add this code into Markdown

<script>
window.PodpTitleConfig = {
  titleTag: 'h4',
  titleClass: 'podp-title',
  titleSeparator: '—',

  desktopFontSize: '18px',
  mobileFontSize: '12px',
  mobileMaxWidth: '100px',

  paginationTitleDesktopSize: '',
  paginationTitleMobileSize: '14px',

  mobileBreakpoint: 767
};
</script>

<script>
!function(){var c=window.PodpTitleConfig;if(!c)return;var S="podp-title-styles",N='.item-pagination[data-collection-type^="portfolio"]',P=".item-pagination-title",k="."+c.titleClass.trim().split(/\s+/).join(".");if(!document.getElementById(S)){var s=N+"{position:relative}"+k+"{position:absolute;left:50%;transform:translateX(-50%);margin:0!important;font-size:"+c.desktopFontSize+";font-family:var(--portfolio-item-pagination-font-font-family);font-style:var(--portfolio-item-pagination-font-font-style);font-weight:var(--portfolio-item-pagination-font-font-weight)}";c.paginationTitleDesktopSize&&(s+=N+" "+P+"{font-size:"+c.paginationTitleDesktopSize+"!important}");s+="@media screen and (max-width:"+c.mobileBreakpoint+"px){"+k+"{font-size:"+c.mobileFontSize+";max-width:"+c.mobileMaxWidth+";text-align:center}";c.paginationTitleMobileSize&&(s+=N+" "+P+"{font-size:"+c.paginationTitleMobileSize+"!important}");s+="}";var e=document.createElement("style");e.id=S;e.textContent=s;document.head.appendChild(e)}function t(){var r=document.title||"",p=c.titleSeparator;return p&&-1!==r.indexOf(p)?r.split(p)[0].trim():r.trim()}function i(){var x=t();document.querySelectorAll(N).forEach(function(n){var o=n.querySelector(k);if("true"===n.dataset.podpTitleInit&&o)return void(o.textContent=x);n.dataset.podpTitleInit="true";var d=document.createElement(c.titleTag);d.className=c.titleClass;d.textContent=x;n.appendChild(d)})}addEventListener("load",i);addEventListener("mercury:load",i)}();
</script>
1 Like