JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<script src="https://raw.github.com/desandro/masonry/master/jquery.masonry.min.js"></script>
<div id="gimmebar"></div>

SCSS

#gimmebar {
    img {
        margin: 10px;
    }
}

JavaScript

// Display items from Gimmebar in a lovely, two-column stack, courtesy of jQuery Masonry.

var $gimmebar = $('#gimmebar'),
    addImage = function (img) {
        $('<img />', {
            height: img.dims.h,
            src: img.url,
            width: img.dims.w
        }).appendTo($gimmebar);
    };

$.ajax({
    url: 'https://gimmebar.com/api/v1/public/assets/nate451?jsonp_callback=?&limit=15&_include[]=title&_include[]=content',
    dataType: 'jsonp',
    success: function (data) {
        // Let's see what we've got
        console.log('success', data);
        
        var i,
            length,
            item,
            thumbs = [];
        
        for (i = 0, length = data.records.length; i < length; i += 1) {
            item = data.records[i];
            
            if (item.content.resized_images.stash) {
                addImage(item.content.resized_images.stash);
            } else {
                // TODO: What's the deal with thumbs vs. stash? Clearly "get the whole website" grabs yield a thumb, but I can see from the gimmebar homepage that there are thumb versions of stash images, too. HOW TO GET THEM PLZ.
                /*
                if (item.content.resized_images.thumb) {
                    addImage(item.content.resized_images.thumb);
                }
                */
            }
        }

        $gimmebar.masonry({
            itemSelector: 'img',
            columnWidth: 310
        });
    }
});