JSFiddle - React, Tailwind, and code Playground
HTML
<div class="instagram-photo" data-ig-url="https://www.instagram.com/p/-FP1PjBQRd/"></div>
<div class="instagram-photo" data-ig-url="https://www.instagram.com/p/8l2vIrhQQ_/"></div>
<div class="instagram-photo" data-ig-url="https://www.instagram.com/p/-XNiICnxXO/"></div>
<div class="instagram-photo" data-ig-url="https://www.instagram.com/p/cn5KZWmJp1/"></div>
<div class="instagram-photo" data-ig-url="https://www.instagram.com/p/7TDiYJBQdf/"></div>
CSS
body {
padding:10px;
}
.instagram-photo {
display:block;
margin-bottom:15px;
background:#ffffff;
height:500px;
border:2px solid #ddd;
}
JavaScript
;(function($){
"use strict";
$.fn.instagramBlockPhoto = function(settings){
// default settings
var settings = $.extend({
size: 'medium' // supported sizes: large, medium, thumbnail.
}, settings),
photosBlocks = $(this),
photoSizes = { 'large':'l', 'medium':'m', 'thumbnail':'t' }; // Sizes object
if (!photosBlocks) { return; }
return photosBlocks.each(function(){
if (typeof $(this).attr('data-ig-url') !=='undefined' && $(this).attr('data-ig-url')!=='') {
var igURL = $(this).attr('data-ig-url')+'media/?size='+photoSizes[settings.size];
$(this).css({
'background-image': 'url('+igURL+')',
'background-size':'cover'
});
}
});
};
})(window.jQuery);
$(function(){
$('.instagram-photo').instagramBlockPhoto({ size: 'large' });
});