CMS Developers

<section class="content-instagram-feed" style="background-color: {{ module.background_color.color }};">
  <div class="container">
    <div class="content">{{ module.content_text }}</div>
    <div class="instafeed-items" data-token="{{ module.access_token }}"></div>
  </div>
</section>

          
        

          
            .content-instagram-feed {
	padding-top: 50px;
  padding-bottom: 50px;
}

.content-instagram-feed * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.content-instagram-feed .content {
  margin-bottom: 25px;
	text-align: center;
}

.content-instagram-feed .instafeed-items {
  font-size: 0;
	text-align: center;
}

.content-instagram-feed .instafeed-items a {
 	display: inline-block;
  width: 20%;
  position: relative;
  overflow: hidden;
}

.content-instagram-feed .instafeed-items a span {
  display: block;
  padding-bottom: 100%;
}

.content-instagram-feed .instafeed-items a:hover img {
	opacity: 0.6;
}

.content-instagram-feed .instafeed-items img {
	height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.content-instagram-feed .instafeed-items .orientation-portrait img {
	height: auto;
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 767px) {
	.content-instagram-feed .instafeed-items a {
    width: 50%;
  }
}

          
        

          
            
function getIntaFeedToken(elem, id, token) {
	var feed = new Instafeed({
		get: 'user',
		target: elem.toString(),
		userId: id.toString(),
		accessToken: token.toString(),
    resolution: 'low_resolution',
    limit: 10,
    template: '<a href="{link}" class="orientation-{orientation}" target="_blank"><span><img src="{image}" /></span></a>'.replace(/[{}]/g, "$&$&")
	});
  	feed.run();
} 


jQuery(document).ready(function($) {
	$(".content-instagram-feed").each(function(){
		var o = $(this);

		if (o.hasClass("init")) {
		    return;
		}

		o.addClass("init");

		var headerId = "id-" + Math.random().toString().slice(2);
		o.find('.instafeed-items').attr("id", headerId);

		var userToken = o.find('.instafeed-items').data("token");
    var userId = userToken.substr(0, userToken.indexOf('.')); 

		getIntaFeedToken(headerId, userId, userToken);
	});
});