Microgram Light

page.html

<style type="text/css">
  .photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    grid-auto-rows: minmax(160px, 1fr);
    grid-gap: 1rem;
    margin-top: 2rem;
  }

  .photo {
    background-size: cover;
    background-position: center;
    border-radius: 2px;
    transition: all 200ms ease-in-out;
  }

  .photo,
  .photo-link {
    width: 100%;
    height: 160px;
  }

  .photo-link {
    display: inline-block;
  }

  .photo:hover {
    cursor: pointer;
    opacity: 0.75;
  }

  .photos {
    overflow: hidden;
  }
</style>
<script>
    var bodyDiv = document.getElementsByClassName('post-body')[0];
    var photosDiv = document.createElement('div');
    photosDiv.className = 'photos';
    bodyDiv.appendChild(photosDiv);

    var renderImage = function (image) {
        var a = document.createElement('a');
        a.className = 'photo-link';
        a.href = image['url'];
        var img = document.createElement('div');
        var url = image['_microblog']['thumbnail_url'];
        img.style.backgroundImage = 'url(' + url + ')';
        img.className = 'photo';
        a.appendChild(img);
        photosDiv.appendChild(a);
    }

    var renderNoContent = function () {
        var p = document.createElement('p');
        p.innerText = 'No photos.'
        photosDiv.appendChild(p);
    }

    var loadImages = function () {

        var xhr = new XMLHttpRequest();
        xhr.responseType = "json";
        xhr.open('GET', "/photos/index.json", true);
        xhr.send();
        xhr.onreadystatechange = function (e) {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (xhr.response.length == 0) {
                    renderNoContent();
                } else {
                    var count = 0;
                    xhr.response['items'].forEach(function (image) {
                        if (count <= 200) {
                            renderImage(image);
                            count++;
                        }
                    });
                }
            } else if (xhr.readyState == 4 && xhr.status !== 200) {
                renderNoContent();
            }
        }
    }

    loadImages();
</script>