Demos Back to Demos

Zingstagram

19 of 25

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 HTML CSS JS
Edit Download

Result

HTML

<!DOCTYPE html>
<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>
    <zing-grid
      height="812"
      layout="row"
      layout-controls 
    >
      <zg-data>
        <zg-param name="src" value="https://api.instagram.com/v1/users/self/media/recent/?access_token=8584627014.c5d6544.c0d8c153a1f74ed18ed5d578c6f8ed24"></zg-param>
        <zg-param name="recordPath" value="data"></zg-param>
      </zg-data>
      <zg-caption align="center">
      	<img src="https://app.zinggrid.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>

CSS

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

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

img {
  max-width: 100%; 
}

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

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

.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;  
}

JS

// Feed cell renderer
function renderFeed(username, profile, image, caption) {
  // Define image caption
  const imgCaption = `
		
      ${username}
      ${caption}
    
	`;
  // Return cell content
  return content = `
    
      
        
        ${username}
      
      
			${caption ? imgCaption : ''}
		
	`;
}

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

Edit in Studio