Demos Back to Docs

Zingstagram

107 of 124

This demo shows how ZingGrid can easily grab data from any API endpoint (including Instagram). Once you have the data, you can render it however you want!

Result Full HTML CSS JS
Edit Download
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>
<!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 src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
	</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>
  </body>
</html>
.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%;
  }
}
// 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>
  `;
}

Related Docs

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Related Docs

Demo Gallery