"Dressing Up" the Instagram Simple Shortcode

tips & tricks
1

Since Hugo 0.41 there is a Simple variant for the Instagram shortcode that offers a minimum set of styles.

If you want to make it look a bit more like the standard Instagram embed here is the way to do it:

Create an avatar parameter either in your site’s config (if you only care to embed your own Instagram photos) or in each content page where the shortcode will appear.

avatar: "https://instagram.fath3-3.fna.fbcdn.net/vp/03192b8762c9c8c8755f3feff1382b31/5B907A88/t51.2885-19/s150x150/20066128_682839858592308_5922957589938700288_a.jpg"

Then in your project’s stylesheet include the following:

.s_instagram_simple .card-header {
  position: relative;
}
.s_instagram_simple .card-link {
  text-decoration: none;
  color: #000;
  font-weight: 600;
}
  .s_instagram_simple .card-header .card-link:before {
  content: '';
  width: 30px;
  height: 30px;
  background: url(https://instagram.fath3-3.fna.fbcdn.net/vp/03192b8762c9c8c8755f3feff1382b31/5B907A88/t51.2885-19/s150x150/20066128_682839858592308_5922957589938700288_a.jpg);
  display: inline-block;
  background-size: cover;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 10px;
}
.s_instagram_simple .card-header .card-link:first-child:after {
  content: 'Follow';
  line-height:0.9;
text-align:right;
    background-color: #3897f0;
    border-radius: 3px;
    color: #fff;
    font-weight: 600;
    margin-left: auto;
    padding: 7px 12px;
    text-decoration: none;
  position: absolute;
  right: 10px;
}

And with the above the display of the Instagram simple variant will look like this:

inst
inst.jpg788×743 133 KB

PS You can modify the CSS to use fancier properties if you want, (I prefer to go for CSS that works in older browsers). Also you can name the avatar parameter whatever you want.

1 Like
2

I would recommend using the “s_instagram_simple” class for this. The __h classes are meant as internal identifiers.

1 Like
3

Thanks. I edited the CSS above to use s_instagram_simple class, as per your recommendation.