Instagram Fix

app.js.liquid

Replace:

if(!thisMedia.images.thumbnail.url.indexOf("null") > -1) {
  var url = thisMedia.images.thumbnail.url;
  url = url.replace(/\/s150x150\//,"/s320x320/");

  item = '<img class="il-photo__img" src="'+url+'" data-filter="'+thisMedia.filter+'" />';
  item = '<a href="'+thisMedia.link+'" target="_blank">'+item+'</a>';
}


if(thisMedia.videos) {
  var src;

  if(thisMedia.videos.standard_resolution) {
    src = thisMedia.videos.standard_resolution.url;
  } else if(thisMedia.videos.low_resolution) {
    src = thisMedia.videos.low_resolution.url;
  } else if(thisMedia.videos.low_bandwidth) {
    src = thisMedia.videos.low_bandwidth.url;
  }

  var videothumb = thisMedia.images.thumbnail.url;
  videothumb = videothumb.replace(/\/s150x150\//,"/s320x320/");

  item = '<div class="vidholder">';
  item += '<img class="il-photo__img vidplaceholder" src="'+videothumb+'" data-filter="'+thisMedia.filter+'" />';
  item += '<video poster="'+videothumb+'" preload="none" controls>';
  item += '<source src="'+src+'" type="video/mp4;"></source>';
  item += '</video>';
  item += '</div>';
}

with:

if(!thisMedia.images.standard_resolution.url.indexOf("null") > -1) {
  var url = thisMedia.images.standard_resolution.url;

  item = '<div class="il-photo__img instagram__bg" style="background-image:url('+url+')" data-filter="'+thisMedia.filter+'" /></div>';
  item = '<a href="'+thisMedia.link+'" target="_blank" class="instagram__link">'+item+'</a>';
}

if(thisMedia.videos) {
  var url = thisMedia.images.standard_resolution.url;

  item = '<div class="instagram__video instagram__bg" style="background-image:url('+url+')" data-filter="'+thisMedia.filter+'" /></div>';
  item = '<a href="'+thisMedia.link+'" target="_blank" class="instagram__link instagram__video-link">'+item+'</a>';

}

Look for: (may also say one-fifth colums or instas (mobilia)

if(item) {
  item = '<div class="four columns">'+item+'</div>';
}

and add `instagram__item` - Example:

if(item) {
  item = '<div class="four columns instagram__item">'+item+'</div>';
}

styles.css.liquid

Replace:

/* #Instagram Feed
================================================== */
  #instafeed img, #instafeed video {
    display:inline;
  }

  .vidholder {
    position: relative;
    overflow: hidden;
  }

  img.vidplaceholder {
      opacity: 0 !important;
  }

  #instafeed video {
      object-fit: cover;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      bottom: 0;
      top: 0;
      max-height: 100%;
      max-width: 100%;
      padding-bottom: 1.5em;
      margin-top: -1.55em;
  }


With:

/* #Instagram Feed
================================================== */

  #instafeed .instagram__item {
    position: relative;
    margin-bottom: 20px;
  }

  .instagram__item:after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }

  .instagram__link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .instagram__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
  }

  .instagram__video-link {
    &:after, &:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
    }
    &:after {
      width: 0;
      height: 0;
      border: 16px solid transparent;
      border-left: 20px solid #fff;
      margin-top: -18px;
      margin-left: -7px;
      -webkit-filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.25));
    }
    &:before {
      margin-top: -34px;
      margin-left: -34px;
      width: 60px;
      height: 60px;
      border: 3px solid #fff;
      border-radius: 50%;
      box-shadow: 0 0 4px rgba(black, 0.18);
      background: rgba(black, 0.42);
      transition: background 0.3s ease;
    }
    &:hover {
      &:before {
        background: rgba(black, 0.7);
      }
    }
  }

//Mobilia

  .instas {
    width: 20%;
    float: left;
    position: relative;
  }