Zingstagram

Full Code

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>Zingstagram</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: linear-gradient(purple, magenta, red, orange, yellow) no-repeat;
      padding: 80px 0;
    }

    .zg-body .bar {
      align-items: center;
      display: flex;
      padding: 11px 15px;
    }

    .zg-body .bar img {
      border-radius: 25px;
      height: 35px;
      margin-right: 15px;
      width: 35px;
    }

    .zg-body img {
      max-width: 100%;
    }

    .zg-body .insta-wrapper {
      margin-bottom: 30px;
    }

    .zg-body .img-caption {
      margin: 15px 15px;
    }

    .zg-body .img-caption span {
      font-weight: normal;
      margin-left: 10px;
    }

    zing-grid {
      --zg-body-font-weight: 500;
      --zg-caption-background: #fafafa;
      ;
      --zg-caption-color: #000;
      --zg-caption-padding: 10px 0 0 0;
      --zg-cell-padding: 0 25px;
      --zg-layout-background: #fff;
      --zg-layout-border-top: 1px solid var(--theme-border-color);
      --zg-layout-border-bottom: none;
      --zg-layout-icon-color: #a9b8c1;
      --zg-row-body-background_hover: none;

      margin: auto;
      width: 600px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    zg-body {
      grid-template-columns: repeat(auto-fill, minmax(calc(33% - var(--card-gap)), 1fr));
    }

    zg-card {
      padding: 1px;
    }

    zg-head {
      display: none;
    }

    zg-row {
      max-height: 198px;
    }

    @media screen and (max-width: 600px) {
      .zg-body zing-grid {
        width: 100%;
      }

      ;

      .zg-body zing-grid zg-cell img {
        width: 100%;
      }
    }

    zing-grid[loading] {
      height: 1075px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid height="812" layout="row" layout-controls="disabled">
    <zg-data>
      <zg-param name="src" value="https://us-central1-zingsoft-demo-endpoints.cloudfunctions.net/zingstagram/getrecent"></zg-param>
    </zg-data>
    <zg-caption align="center">
      <img src="https://app.zingsoft.com/api/file/B8Y8HALJ/vIyJ4ZVQmgXO0r5r67OQ_zingstagram.png" alt="Zingstagram" height="40" width="165">
    </zg-caption>
    <zg-colgroup>
      <zg-column index="user.username, user.profilePicture, media.url, media.caption" header=" " renderer="renderFeed"></zg-column>
    </zg-colgroup>
    <zg-card>
      <img src="[[record.images.standard_resolution.url]]">
    </zg-card>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // Feed cell renderer
    function renderFeed(username, profile, image, caption) {
      // Define image caption
      const imgCaption = `
    <div class="img-caption">
      ${username}
      <span>${caption}</span>
    </div>
  `;
      // Return cell content
      return content = `
    <div class="insta-wrapper">
      <div class="bar">
        <img src="${profile}" alt="">
        ${username}
      </div>
      <img src="${image}" alt="${caption || ''}">
      ${caption ? imgCaption : ''}
    </div>
  `;
    }
  </script>
</body>

</html>