Display Username and Avatar In Post

Use this CSS and JavaScript to display an avatar and username above or below the image in the post.

CSS

#sb_instagram .sbi_card { display: block !important; margin-bottom: 10px}
#sb_instagram .sbi_card:after {
  content: " ";
  display: table;
  clear: both;
  visibility: hidden;
}
#sb_instagram .sbi_card img {
    float: left;
    border: none;
    width: 32px;
    height: 32px;
    background: #666;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
}
#sb_instagram .sbi_card span {
    display:inline-block;
    float: left;
    margin: 0 0 0 10px;
    padding: 0;
    color: inherit;
    line-height: 32px;
    font-weight: bold;
    font-size: 13px;
}

Javascript

Add below the post image

jQuery('.sbi_item').each(function(){
  if(!jQuery(this).find('.sbi_card').length) {
    var avatar= jQuery(this).find('.sbi_link_area').attr('data-avatar'),
    user = jQuery(this).find( '.sbi_link_area' ).attr('data-user');
    jQuery(this).find('.sbi_caption_wrap').prepend('<div class="sbi_card"><a href="https://instagram.com/'+user+'"><img src="'+avatar+'"><span>'+user+'</span></a></div>');
  }
});

Add above the post image

jQuery('.sbi_item').each(function(){
  if(!jQuery(this).find('.sbi_card').length) {
    var avatar= jQuery(this).find('.sbi_link_area').attr('data-avatar'),
    user = jQuery(this).find( '.sbi_link_area' ).attr('data-user');
    jQuery(this).prepend('<div class="sbi_card"><a href="https://instagram.com/'+user+'"><img src="'+avatar+'"><span>'+user+'</span></a></div>');
  }
});