Zingstagram

105 of 122

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 src="https://cdn.zinggrid.com/zinggrid.min.js" defer></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;
    }

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

<body class="zg-body">
  <zing-grid height="812" layout="row" layout-controls>
    <zg-data>
      <zg-param name="src" value="https://zingstagram.glitch.me/getrecent"></zg-param>
      <zg-param name="recordPath" value="data"></zg-param>
    </zg-data>
    <zg-caption align="center">
      <img src="https://app.zingsoft.com/api/file/B8Y8HALJ/Zingstagram.png" alt="Zingstagram" height="40" width="165">
    </zg-caption>
    <zg-colgroup>
      <zg-column index="user.username, user.profile_picture, images.standard_resolution.url, caption.text" header=" " renderer="renderFeed"></zg-column>
    </zg-colgroup>
    <zg-card>
      <img src="[[record.images.standard_resolution.url]]">
    </zg-card>
  </zing-grid>
  <script>
    // 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" defer></script>
	</head>
	<body class="zg-body">
    <zing-grid
      height="812"
      layout="row"
      layout-controls>
      <zg-data>
        <zg-param name="src" value="https://zingstagram.glitch.me/getrecent"></zg-param>
        <zg-param name="recordPath" value="data"></zg-param>
      </zg-data>
      <zg-caption align="center">
      	<img src="https://app.zingsoft.com/api/file/B8Y8HALJ/Zingstagram.png" alt="Zingstagram" height="40" width="165">
      </zg-caption>
      <zg-colgroup>
        <zg-column index="user.username, user.profile_picture, images.standard_resolution.url, caption.text" 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;  
}
// 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>
  `;
}

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

Demo Gallery