To achieve Blog Grid layout like this.
#1. First, find Blog Page
#2. Edit Page where you want to place this layout > Add a Code Block > Paste this syntax into Code Block
<div data-sync-blog-url="/blog-01" data-style="grid" data-limit="5"></div>
Remember to update Blog Page URL
#3. Use this code to Page Header Injection (page where you use Code Block)
<script>
const BlogSyncComponent={templates:{grid:{container:`<section class="tp-wrap"><style>.tp-wrap{width:100%}.tp-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:repeat(3,1fr);height:100vh}.tp-item{position:relative;background-image:var(--img);background-size:cover;background-position:center;background-repeat:no-repeat}.tp-item::before{content:"";position:absolute;inset:0;background:rgb(0 0 0 / .75)}.tp-item--lg{grid-row:1 / span 3}.tp-link{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;padding:24px;text-align:center;z-index:1}.tp-meta{display:flex;flex-direction:column;gap:0}.tp-meta--lg{max-width:min(680px,90%)}.tp-cat{font-size:12px;letter-spacing:.2em;opacity:.9;text-transform:uppercase}.tp-title{color:#fff;font-size:32px;line-height:1.1;font-weight:700;margin-top:0;margin-bottom:0}.tp-desc{font-size:14px;line-height:1.4;opacity:.9;margin:0}.tp-btn{display:inline-block;margin-top:14px;padding:8px 20px;border:1px solid #fff;border-radius:999px;font-size:13px;transition:all 0.3s ease;width:100px;margin-left:auto;margin-right:auto}.tp-btn:hover{background:#fff;color:#000}@media (max-width:1024px){.tp-title{font-size:28px}}@media (max-width:767px){.tp-grid{grid-template-columns:1fr;grid-template-rows:none;height:auto}.tp-item--lg{grid-row:auto}.tp-item{aspect-ratio:16 / 9}.tp-title{font-size:24px}}</style><div class="tp-grid"></div></section>`,mainItem:`<article class="tp-item tp-item--lg" style="--img:url('{blogImage}')"><a class="tp-link" href="{blogUrl}"><div class="tp-meta tp-meta--lg"><span class="tp-cat">{blogCategory}</span><h2 class="tp-title">{blogTitle}</h2><p class="tp-desc">{blogExcerpt}</p><span class="tp-btn">Read More</span></div></a></article>`,smallItem:`<article class="tp-item" style="--img:url('{blogImage}')"><a class="tp-link" href="{blogUrl}"><div class="tp-meta"><span class="tp-cat">{blogCategory}</span><h3 class="tp-title">{blogTitle}</h3></div></article>`}},initialize(){document.addEventListener('DOMContentLoaded',()=>{this.processComponents()})},processComponents(){const syncElements=document.querySelectorAll('[data-sync-blog-url]');syncElements.forEach(element=>{this.setupComponent(element)})},async setupComponent(element){const blogPath=element.getAttribute('data-sync-blog-url');const templateStyle=element.getAttribute('data-style')||'grid';const maxItems=parseInt(element.getAttribute('data-limit'))||5;const template=this.templates[templateStyle];if(!template){console.error(`Template "${templateStyle}" not found`);return}element.innerHTML=template.container;try{const blogData=await this.fetchBlogData(blogPath,maxItems);this.populateGridItems(element,blogData,template)}catch(error){console.error('Failed to load blog data:',error)}},async fetchBlogData(blogPath,maxItems){const response=await fetch(`${blogPath}?format=json`);const jsonData=await response.json();return jsonData.items.slice(0,maxItems).map((post,index)=>({blogTitle:post.title,blogExcerpt:this.cleanHtmlText(post.excerpt||''),blogCategory:this.extractCategory(post.categories||[]),blogUrl:post.fullUrl,blogImage:post.assetUrl||'https://cdn.pixabay.com/photo/2025/04/24/01/29/trees-9554109_1280.jpg',itemNumber:index+1}))},extractCategory(categories){if(categories&&categories.length>0){return categories[0].toUpperCase()}return'BLOG'},cleanHtmlText(htmlContent){const tempDiv=document.createElement('div');tempDiv.innerHTML=htmlContent;const text=tempDiv.textContent||tempDiv.innerText||'';return text.length>120?text.substring(0,120)+'...':text},populateGridItems(element,blogPosts,template){const gridContainer=element.querySelector('.tp-grid');let htmlOutput='';blogPosts.forEach((post,index)=>{if(index===0){htmlOutput+=template.mainItem.replace(/{blogTitle}/g,post.blogTitle).replace(/{blogExcerpt}/g,post.blogExcerpt).replace(/{blogCategory}/g,post.blogCategory).replace(/{blogUrl}/g,post.blogUrl).replace(/{blogImage}/g,post.blogImage)}else{htmlOutput+=template.smallItem.replace(/{blogTitle}/g,post.blogTitle).replace(/{blogCategory}/g,post.blogCategory).replace(/{blogUrl}/g,post.blogUrl).replace(/{blogImage}/g,post.blogImage)}});gridContainer.innerHTML=htmlOutput}};BlogSyncComponent.initialize();
</script>
