Blogjak Theme

To change a traditional text-based blog post layout into a responsive image gallery, you need to modify the HTML structure, update the JavaScript rendering logic, and adjust the JSON data format. Instead of displaying titles, dates, and excerpts, each post becomes a clickable image that links directly to the article page.

This approach is useful for product catalogs, portfolio websites, image-based blogs, laundry product showcases, training websites, and visual content collections. The responsive grid automatically adapts to different screen sizes using CSS Grid.

CSS

.gallery-item {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.gallery-item img {
  width: 100%;
}

Posts Json - Remove date

[
   {
    "alt": "Alkholisi Plain Detergent: Sabun Cair Khusus untuk Keperluan Haji dan Umroh 250 ml",  
    "img": "https://ratakan.com/uploads/prd-89ed7719e8.jpg",
    "url": "posts/plain-detergent-sabun-cair-250ml.html"
  },
   {
    "alt": "Alkholisi Plain Detergent Sabun Cair Pilihan Tepat untuk Pakaian Haji dan Umroh",  
    "img": "https://ratakan.com/uploads/prd-14342c8582.jpg",
    "url": "posts/plain-detergent-sabun-cair-1l.html"
  },
  {
    "alt": "Plain Detergent Sabun Bubuk 500 Gram",
    "img": "https://ratakan.com/uploads/prd-2b06068c1d.jpg",
    "url": "posts/plain-detergent-sabun-bubuk-500g.html"
  }
]

Index Change This

 <div class="post-item">
          <h3><a href="${post.url}">${post.title}</a></h3>
          <p>${post.date}</p>
          <p>${post.excerpt}</p>
        </div>

Into:

<div class="gallery-item">  
         <a href="${post.url}"><img src="${post.img}" alt="${post.alt}" loading="lazy"></a>
         </div>

Change this

 <div id="post-list" class="post-list"></div>
 const postList = document.getElementById('post-list');

Into:

 <div id="post-list" class="gallery-item"></div>
 const postList = document.getElementById('gallery-item');

The complete code:

 const POSTS_PER_PAGE = 6;

    function loadElement(url, elementId) {
      return fetch(url)
        .then(response => {
          if (!response.ok) throw new Error(`Error loading ${url}`);
          return response.text();
        })
        .then(html => {
          document.getElementById(elementId).innerHTML = html;
        })
        .catch(error => {
          console.error(error);
          document.getElementById(elementId).innerHTML = 
            `<div class="error">Error loading ${elementId}</div>`;
        });
    }

    Promise.all([
      loadElement('header.html', 'header'),
      loadElement('footer.html', 'footer'),
      fetch('/pelatihan/posts.json').then(response => response.json())
    ]).then(([_, __, posts]) => {
      document.getElementById('year').textContent = new Date().getFullYear();

      const currentPage = parseInt(new URLSearchParams(window.location.search).get('page')) || 1;
      const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
      const startIndex = (currentPage - 1) * POSTS_PER_PAGE;
      const paginatedPosts = posts.slice(startIndex, startIndex + POSTS_PER_PAGE);

      const postList = document.getElementById('gallery-item');
      postList.innerHTML = paginatedPosts.map(post => `
         <div class="gallery-item">  
         <a href="${post.url}"><img src="${post.img}" alt="${post.alt}" loading="lazy"></a>
         </div>
      `).join('');

      const pagination = document.getElementById('pagination');
      pagination.innerHTML = `
        <button onclick="changePage(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''}>Newer</button>
        ${Array.from({length: totalPages}, (_, i) => i + 1).map(page => `
          <button onclick="changePage(${page})" ${currentPage === page ? 'class="active"' : ''}>${page}</button>
        `).join('')}
        <button onclick="changePage(${currentPage + 1})" ${currentPage === totalPages ? 'disabled' : ''}>Older</button>
      `;
    }).catch(error => console.error(error));

    window.changePage = (page) => {
      const url = new URL(window.location);
      url.searchParams.set('page', page);
      window.history.pushState({}, '', url);
      location.reload();
    };

Key Takeaways

• Replace text-based post cards with image thumbnails.
• Use CSS Grid for responsive layouts.
• Remove unnecessary fields such as date and excerpt from JSON.
• Display images using the img field.
• Use the alt attribute for accessibility and SEO.
• Keep pagination functionality unchanged.
• Improve visual browsing experience.

What Is a Responsive Image Grid Post?

A responsive image grid post layout displays blog content as a collection of images instead of text excerpts. Each image acts as a visual entry point that links visitors to the full article.

This design is commonly used in e-commerce websites, product galleries, photography portfolios, and visual blogs. The layout automatically adjusts the number of columns based on available screen width.

Using CSS Grid with repeat(auto-fit, minmax()) allows the gallery to remain mobile-friendly without additional media queries.

How Does the Conversion Work?

The first step is updating the JSON structure. Since the gallery no longer displays dates or excerpts, only image-related fields and URLs are required.

The JSON data should contain an image URL, alternative text, and destination URL. This reduces payload size and simplifies rendering logic.

Each object becomes a visual card instead of a text-based blog listing. The JavaScript then reads these properties and generates image links dynamically.

How Do You Create the Responsive Gallery Layout?

The gallery container uses CSS Grid to create flexible columns. Every image automatically resizes to fit its available space.

The following CSS creates a responsive gallery structure:

.gallery-item {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.gallery-item img {
  width: 100%;
}

With this configuration, the gallery remains responsive on desktop, tablet, and mobile devices.

What Changes Are Needed in posts.json?

The original blog structure typically contains fields such as title, date, and excerpt. These fields are unnecessary when displaying only images.

Replace the old structure with a simplified format containing:

• alt for image descriptions
• img for image URLs
• url for article links

This format is cleaner and better suited for image gallery rendering.

How Do You Replace the Existing Post Template?

The original template usually renders a title, publication date, and excerpt. Since the gallery only displays images, the HTML output must be simplified.

Replace this structure:

<div class="post-item">
  <h3><a href="${post.url}">${post.title}</a></h3>
  <p>${post.date}</p>
  <p>${post.excerpt}</p>
</div>

With the following gallery item:

<div class="gallery-item">
  <a href="${post.url}">
    <img src="${post.img}" alt="${post.alt}" loading="lazy">
  </a>
</div>

What JavaScript Changes Are Required?

The container element must use the gallery class instead of the traditional post list class. This ensures the CSS Grid layout is applied correctly.

Update the HTML container:

<div id="post-list" class="gallery-item"></div>

Then adjust the JavaScript selector to match the correct element ID. Make sure the selected ID exists in the HTML document to avoid rendering errors.

What Are the Advantages and Drawbacks?

The biggest advantage is visual engagement. Visitors can quickly browse products or articles through images rather than reading multiple excerpts.

Another benefit is a cleaner interface, especially for image-heavy websites. It also works well for mobile users because CSS Grid automatically adapts to screen size.

The drawback is reduced textual context. Users may need to click images before understanding the full content of an article.

What Are the Best Practices for SEO and Performance?

Always provide descriptive alt text for every image. Search engines use alternative text to understand image content and improve accessibility.

Enable lazy loading using loading="lazy" to reduce initial page load time. This improves user experience and Core Web Vitals performance.

Use optimized image formats and compress large files before uploading. Smaller images load faster and consume less bandwidth.

FAQ

Can I keep pagination after switching to an image gallery?

Yes. The pagination logic remains unchanged because it still processes the same array of post objects.

Do I need title and excerpt fields?

No. They can be removed if the gallery only displays images.

Is CSS Grid better than Flexbox for galleries?

For responsive image grids, CSS Grid is usually more flexible because it handles column creation automatically.

Will lazy loading improve performance?

Yes. Images load only when needed, reducing initial page load time.

Is alt text important?

Yes. Alt text improves accessibility, image SEO, and search engine understanding.

Conclusion

Converting a blog post listing into a responsive image grid requires three main changes: simplifying the JSON structure, replacing text-based templates with image-based markup, and applying CSS Grid styling. The result is a cleaner, more visual browsing experience that works well across desktop and mobile devices.

By combining responsive CSS, lazy-loaded images, and simplified rendering logic, you can transform a standard blog archive into a modern gallery-style layout while maintaining pagination and SEO-friendly image attributes.