Summary Block Portfolio

I released new version of plugin. You can check it here

• Now plugin supports Grid, Carousel, List design
• Code is shorter

Features:

• Summary Block (Grid) for Portfolio Page
• Easy adjust number of columns on Desktop/Mobile
• Easy add Excerpt
• See Demo – Password: abc

Support: [email protected] (I offer free install, 1 site/1 license)

#1. How to install

#1.1. First, you need to find Portfolio Page URL Slug

In my example, it is /portfolio2

#1.2. Edit page where you want to place Summary Block Portfolio > Add a Summary Block > Choose Carousel

#1.3. Enter Portfolio Page URL Slug

#1.4. Click on gear Icon on Page

#1.5. Click Advanced > Paste this code

<!-- Summary Portfolio @tuanphan -->
<style>
.tp-summary-portfolio{
  --tp-sp-columns-desktop: 4;
  --tp-sp-columns-mobile: 2;
  --tp-sp-gap: 24px;
  --tp-sp-title-gap: 10px;
  --tp-sp-desc-gap: 8px;
  --tp-sp-image-radius: 10px;
  --tp-sp-image-ratio: 3/2;
  --tp-sp-item-padding: 0;
  --tp-sp-title-size: clamp(18px, 2.2vw, 22px);
  --tp-sp-desc-size: clamp(14px, 1.8vw, 16px);

  display: grid;
  grid-template-columns: repeat(var(--tp-sp-columns-desktop), minmax(0, 1fr));
  gap: var(--tp-sp-gap);
}
@media (max-width: 767px){
  .tp-summary-portfolio{
    grid-template-columns: repeat(var(--tp-sp-columns-mobile), minmax(0, 1fr));
  }
}
.tp-sp-item{ padding: var(--tp-sp-item-padding); }
.tp-sp-thumb{ display:block; width:100%; }
.tp-sp-thumb img{
  width:100%;
  height:auto;
  aspect-ratio: var(--tp-sp-image-ratio);
  object-fit: cover;
  border-radius: var(--tp-sp-image-radius);
  display:block;
}
.tp-sp-title{
  font-size: var(--tp-sp-title-size);
  line-height: 1.25;
  margin: var(--tp-sp-title-gap) 0 0;
}
.tp-sp-title a{ text-decoration: none; color: inherit; }
.tp-sp-desc{
  font-size: var(--tp-sp-desc-size);
  line-height: 1.6;
  margin: var(--tp-sp-desc-gap) 0 0;
}
  .tp-sp-error {
    background-color: #e2e2e2;
    border: 2px dotted #000;
    text-align: center;
}
  .summary-block-header {display: none;}
</style>
<script>(function(){const waitFor=(sel,root=document,tries=100,interval=100)=>new Promise(resolve=>{const t=setInterval(()=>{const el=root.querySelector(sel);if(el||--tries<=0){clearInterval(t);resolve(el)}},interval)});const fetchJSON=(u)=>fetch(u).then(r=>r.json()).catch(()=>null);const pickImg=(c)=>c?.assetUrl||c?.squareImageUrl||c?.thumbnailUrl||c?.media?.mainImage?.assetUrl||(Array.isArray(c?.mediaSet)&&c.mediaSet[0]?.assetUrl)||(Array.isArray(c?.galleryImages)&&c.galleryImages[0]?.assetUrl)||null;const pickUrl=(c,basePath)=>c?.fullUrl||c?.url||(c?.slug?(basePath.replace(/\/$/,'')+'/'+c.slug):null);const getPortfolioPath=(block)=>{if(window.tpSummaryPortfolio&&window.tpSummaryPortfolio.href){return window.tpSummaryPortfolio.href}
const headerText=block.querySelector('.summary-header-text');if(headerText){const text=headerText.textContent.trim();if(text)return text}
const headerLink=block.querySelector('.summary-header-text a[href]');if(headerLink){return headerLink.getAttribute('href')}
return null};const build=async()=>{const block=await waitFor('.sqs-block-summary-v2');if(!block)return;const listEl=await waitFor('.summary-item-list',block);const headerEl=block.querySelector('.summary-block-header');if(!listEl)return;const portfolioHref=getPortfolioPath(block);if(!portfolioHref){const errorMsg=document.createElement('div');errorMsg.className='tp-sp-error';errorMsg.textContent="Portfolio Page doesn't exist";listEl.insertAdjacentElement('afterend',errorMsg);if(headerEl)headerEl.style.display='none';listEl.style.display='none';return}
const base=new URL(portfolioHref,location.origin);base.search='';const portfolioPath=base.pathname;const jsonUrl=portfolioPath+'?format=json-pretty';const grid=document.createElement('div');grid.className='tp-summary-portfolio';listEl.insertAdjacentElement('afterend',grid);const json=await fetchJSON(jsonUrl);if(!json){const errorMsg=document.createElement('div');errorMsg.className='tp-sp-error';errorMsg.textContent="Portfolio Page doesn't exist";listEl.insertAdjacentElement('afterend',errorMsg);if(headerEl)headerEl.style.display='none';listEl.style.display='none';return}
let items=(json?.items||json?.collection?.items||json?.album?.items||[]);if(!items.length){const children=(json?.children||json?.collections||json?.collection?.children||[]);if(children?.length){const childUrls=children.map(c=>{const p=c?.fullUrl||c?.url||(c?.slug?(portfolioPath.replace(/\/$/,'')+'/'+c.slug):null);return p?(new URL(p,location.origin).pathname+'?format=json-pretty'):null}).filter(Boolean);const results=await Promise.all(childUrls.map(fetchJSON));items=results.flatMap(r=>(r?.items||r?.collection?.items||[]))}}
if(!items.length){const errorMsg=document.createElement('div');errorMsg.className='tp-sp-error';errorMsg.textContent="Portfolio Page doesn't exist";listEl.insertAdjacentElement('afterend',errorMsg);if(headerEl)headerEl.style.display='none';listEl.style.display='none';return}
if(typeof window.tpSummaryBeforeBuild==='function'){await window.tpSummaryBeforeBuild({items,grid,block,portfolioPath})}
let built=0;items.forEach(p=>{const title=p?.title||'';const href=pickUrl(p,portfolioPath)||portfolioPath;const desc=p?.seoData?.seoDescription||p?.excerpt||p?.bodyExcerptPlain||'';const img=pickImg(p);const card=document.createElement('div');card.className='tp-sp-item';const link=document.createElement('a');link.className='tp-sp-thumb';link.href=href;if(img){const best=img+(img.includes('?')?'&':'?')+'format=1000w';const im=document.createElement('img');im.loading='lazy';im.decoding='async';im.src=best;im.setAttribute('data-image',img);link.appendChild(im)}
const h=document.createElement('h3');h.className='tp-sp-title';const t=document.createElement('a');t.href=href;t.textContent=title;h.appendChild(t);const pEl=document.createElement('p');pEl.className='tp-sp-desc';pEl.textContent=desc;card.appendChild(link);card.appendChild(h);card.appendChild(pEl);grid.appendChild(card);built++});if(built>0){if(headerEl)headerEl.style.display='none';listEl.style.display='none'}
if(typeof window.tpSummaryAfterBuild==='function'){await window.tpSummaryAfterBuild({grid,block,built,items})}};if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',build)}else{build()}})();</script>

#2. Customize

#2.1. Adjust number of items on Desktop – Mobile here

#2.2. Adjust gap between items, gap between title/description here

#2.3. Adjust Title, Description size here

#2.4. To add Description, we will use Portfolio item SEO Description

#2.5. To change Summary to List format

use this extra code to Custom CSS

/* Summary List */
.tp-summary-portfolio {
    --tp-sp-columns-desktop: 1;
    --tp-sp-columns-mobile: 1;
}
.tp-sp-item {
    display: flex;
    align-items: center;
}
a.tp-sp-thumb {
    max-width: 100px;
    margin-right: 10px;
}
p.tp-sp-desc {
    display: none;
}