Square gallery with overlay text from Blogger labels linking to posts

page.html

<script src="/feeds/posts/default/-/lifestyle?orderby=published&amp;alt=json-in-script&amp;callback=recent&amp;max-results=999"></script>

<br />
<div class="center" style="margin: 20px auto;">
<a class="button" href="https://domain.blogspot.com/search/label/lifestyle">View all posts</a></div>

page.js

var numposts = 999;
var showpostthumbnails = true;
var indexWidth = 3;
var thumbWidth = "100%";
var thumbHeight = "100%";
var titleWidth = "24%";
var titleHeight = "90px";
var cellPad = 8;
var tableWidth = 100;
var cellWidth = "24%";
var cellHeight = "300px";

function recent(json) {
    var n = 1;
    for (var i = 0; i < numposts; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                var commenttext = entry.link[k].title;
                var commenturl = entry.link[k].href;
            }
            if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
            }
        }
        var thumburl;
        try {
            thumburl = entry.media.url;
        } catch (error)

        {
            s = entry.content.$t;
            a = s.indexOf("<img");
            b = s.indexOf("src=\"", a);
            c = s.indexOf("\"", b + 5);
            d = s.substr(b + 5, c - b - 5);
            if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
                thumburl = d;
            } else thumburl = 'https://1.bp.blogspot.com/-qXGZV7wwF9s/WzZDeo5BbVI/AAAAAAAADnk/bw48kRCPh1AShHrj3I8busIQVVp3poxYgCLcBGAs/s1600/thumb.jpg';

        }

        if (showpostthumbnails == true)
          if ( i < json.feed.entry.length - 1 ) {
            if (i == 0){
              document.write('<div class="xogallery"><table width="' + tableWidth + '%" cellpadding="' + cellPad + '" >' + '<tbody>' + '<tr>' + '<td>'+'<div class="thumbnail" id="postimg" style="background-image: url('+ thumburl +');"</div>');
              document.write('<div class="posttitle">' + '<a href="' + posturl + '">' + posttitle + '</a>' + '</div>');
              document.write('</td>');
              n = 2;
            } else if (n == 1) {
              document.write('<tr>' + '<td>' + '<div class="thumbnail" id="postimg" style="background-image: url('+ thumburl +');"</div>');
              document.write('<div class="posttitle">' + '<a href="' + posturl + '">' + posttitle + '</a>' + '</div>');
              document.write('</td>');
              n += 1;
            } else if (n > 1 && n < indexWidth) {
              document.write('<td>'+'<div class="thumbnail" id="postimg" style="background-image: url('+ thumburl +');"</div>');
              document.write('<div class="posttitle">' + '<a href="' + posturl + '">' + posttitle + '</a>' + '</div>');
              document.write('</td>');
              n += 1;
            } else if (n == indexWidth){
              document.write('<td>' + '<div class="thumbnail" id="postimg" style="background-image: url('+ thumburl +');"</div>');
              document.write('<div class="posttitle">' + '<a href="' + posturl + '">' + posttitle + '</a>' + '</div>');
              document.write('</td>' + '</tr>');
              n = 1;
            }
          } else {
              document.write('<td>' + '<div class="thumbnail" id="postimg" style="background-image: url('+ thumburl +');"</div>');
              document.write('<div class="posttitle">' + '<a href="' + posturl + '">' + posttitle + '</a>' + '</div>');
              document.write('</td>' + '</tr>' + '</tbody>' + '</table></div>');
          }

        var towrite = '';
        var flag = 0;

        document.write('<div class="fix"></div>');
        //if (displayseparator == true)
        //    if (i != (numposts - 1))
        //        document.write('');
    }

}