Skip to main content

Instagram Feed v1.2.9

Display a series of posts from an Instagram account, including images and captions.

Reminder: Please note that this feed will not operate as intended until it is configured by our backend team. Your designated project manager (DPM) will be responsible for overseeing this task by opening a TCDQ ticket and assigning it to Bobby KC.

<div class="radancy-instagram-feed"></div>
/*!

  Radancy Component Library: Instagram Feed

  Contributor(s):
  Bobby KC
  Michael "Spell" Spellacy

  Dependencies: Sass

*/

.radancy-instagram-feed, #tmp-instagram-feed {

// Component Variables

--scroll-color-track: #EEE; // Track Color
--scroll-color-thumb: #6F00EF; // Thumb Color
--scroll-color-active: #666; // Active State

display: grid;
gap: 1em;

  @media(min-width: 32.5em) {
    
    grid-template-columns: repeat(2, 1fr);
  
  }

  @media(min-width: 62.5em) {
    
    grid-template-columns: repeat(3, 1fr);
    
  }

  // Future use. Please keep.
      
  &.no-feed-available {
  color: #c00;
  grid-template-columns: none;
  }
    
  figure, ul, li {
  display: contents;
  }
    
  a {
  display: grid;

    &[target="_blank"] {
    
      &:after {
      align-self: start;
      background-color: #fff;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAE7mlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4wLWMwMDAgNzkuMTcxYzI3ZiwgMjAyMi8wOC8xNi0xODowMjo0MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI0LjAgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMy0wOS0yOVQxOToyOToxNS0wNDowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjMtMDktMjlUMTk6MzA6MDgtMDQ6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjMtMDktMjlUMTk6MzA6MDgtMDQ6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVkMjZhMDJmLTY5MjgtMTM0ZS1iYzA2LWJlMmZjNTkyOWJmYiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1ZDI2YTAyZi02OTI4LTEzNGUtYmMwNi1iZTJmYzU5MjliZmIiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1ZDI2YTAyZi02OTI4LTEzNGUtYmMwNi1iZTJmYzU5MjliZmIiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjVkMjZhMDJmLTY5MjgtMTM0ZS1iYzA2LWJlMmZjNTkyOWJmYiIgc3RFdnQ6d2hlbj0iMjAyMy0wOS0yOVQxOToyOToxNS0wNDowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI0LjAgKFdpbmRvd3MpIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pj902TsAAAEiSURBVDjLrdS7SgNREIDhrxGbpDJESRWFiDdIE7GwthI7X8/WwgfwAbSNnTY2RhTFJok38B6biR5CYnbVgeHszpn5z87OnIFjXKKNDrqx7viWXTzheYjeRUwX59AboUcJ8OQHv0H1Fg8bWMRSrKlMooHVWBuoYgu3CayTfuGE/HKYxL9G+j7CUM0BKuEs4k6xiZeA5gZWcBExbRTD3ovflwtYwlX432Mu7PUk7czAKbQSWFq45bzASvRYP83awP5KnpRncJ20xdwQn3rahz8B13AT+w+YH3FoAU3sjwNuJScvZO2pcSlvYz1Pt/+msYcVrYmD/wLWshYlq8wmhfsiF/4ALAbjEd7jpYEypnNqOcZa/wZlHpyZB2wrxvdfQV3sfQK8WKcmeejjOQAAAABJRU5ErkJggg==);
      background-position: center;
      background-repeat: no-repeat;
      background-size: 0.8125rem;
      border-radius: 2px;
      content: "";
      display: block;
      grid-area: 1 / 1;
      height: 1.125rem;
      justify-self: end;
      margin-block-start: 0.5em;
      margin-inline-end: 0.5em;
      transition: 300ms;
      width: 1.125rem;

        @media(min-width: 62.5em) {

          opacity: 0;

        }

      }
    
    }
    
    &:focus-visible, &:hover {
    
      &[target="_blank"] {
    
        &::after {
        opacity: 1;
        }
    
      }
    
    }

    p {
    margin: 1em 0 0;
    }
    
    img {
    aspect-ratio: 1;
    border-radius: calc(10rem / 16);
    display: block;
    grid-area: 1 / 1;
    min-width: 100%;
    height: 100%;
    }
    
  }

  .visually-hidden, .wai {
  display: block;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  grid-area: 1 / 1; // Fixes an overflow bug when parent set to grid.
  overflow: hidden;
  position: static; // Fixes an overflow bug when parent set to grid.
  white-space: nowrap;
  width: 1px;
  }

  &[data-scroll] {

    @media(max-width: 62.5em) {

      grid-auto-flow: column;
      overflow-x: auto;
      padding-block-end: 1em;
      scroll-snap-type: inline mandatory;

      // Fallback Scrollbar

      scrollbar-color: var(--scroll-color-thumb) var(--scroll-color-track);
      scrollbar-width: thin;

      @supports #{"\selector(::-webkit-scrollbar)"} {

        scrollbar-color: initial;
        scrollbar-width: auto;

        &::-webkit-scrollbar {
        height: calc(8rem / 16);
        }

        &::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb {
        border-radius: 100vw;
        }

        &::-webkit-scrollbar-track {
        background-color: var(--scroll-color-track);
        }

        &::-webkit-scrollbar-thumb {
        background-color: var(--scroll-color-thumb);
    
          &:hover {
          background-color: var(--scroll-color-active);
          }

        }

      }

      a {
      align-items: start;
      grid-template-rows: auto 1fr;
      min-width: calc(260rem / 16);
      scroll-snap-align: start;
      }

    }

  }
    
}
/*!

  Radancy Component Library: Instagram Feed

  Contributor(s):
  Bobby KC
  Michael "Spell" Spellacy

*/

(function() {

  "use strict";

  // Display which version in use via console:

  console.log("%cInstagram Feed%cv1.2.9", "background: #2d2d2d; color: #fff; padding: 6px 10px; border-radius: 16px 0 0 16px; font-weight: 600;" , "background: #6e00ee; color: #fff; padding: 6px 10px; border-radius: 0 16px 16px 0; font-weight: 600;");

  var instagramFeed = document.createElement("script");
  instagramFeed.setAttribute("src", "https://services.tmpwebeng.com/tmp-share/widget/js/instagram-feed.js?user=wegmans&caption=n&count=6");
  document.body.appendChild(instagramFeed);

})();

Properties

Use the following properties to configure this component.

Attribute Applies To Note Description
data-scroll .radancy-instagram-feed, #tmp-instagram-feed Optional
Used to layout the conent horizontally and include a scrollbar on smaller screens.

Parameter Note Description
caption String, Optional
When set to n, the captions associated with each feed item will have a class of visually-hidden and wai appended to them. It will then be up to the front-end developer to accessibly hide this text from visual users, as they are still required to aid assistive technology users. Do not use display: none to hide these captions.
count Number, Optional
Sets the number of items to be displayed in the feed. The default is 10.
default-css String, Optional
When set to y, a link call to ready-made CSS will be appended to the head element of the page the script is running on. This is a bare-bones layout for quick implementation. Developers may wish to use their own CSS or copy over the default styles and alter as needed.
img String, Optional
Determines which resolution of the image to be used. Accepted values include low, high, and thumb. The default is thumb, which will render thumbnail images.
user String, Mandatory
Passing in the Instagram account name will display feed content from that account. Please note that this parameter will not work until the feed has been properly configured by the backend team.

Release Notes

Keep up to date on major changes to this component.

Maintenance
Revist markup. Consider using figure over a list, etc. (Low)

Report Issues

Find a bug? Want a new feature? Report it on JIRA. You're so awesome!