Get Contact Photos

How can I get my contacts’ photos with CloudSponge?

This is currently only supported for Google Contacts. However, it’s pretty impressive.

Connect your Google Contacts to see a grid layout of your address book in the page.

<!-- TODO: update the script with your own Cloudsponge key -->
<script src="https://api.cloudsponge.com/widget/localhost-only.js"></script>
  include: ['photo'],
  // cycle through each contact in the address book and display it on this page.
  // we're including the photo url as an image on the page and putting the name
  // and email as attributes so they are visible on hover.
  beforeDisplayContacts: function(contacts, source, owner) {
    const imageSize = 100;
    const template = document.getElementById('contact-template');
    const container = document.getElementById('contacts-grid');
    contacts.forEach(c => {
      let htmlString = template.innerHTML;
      htmlString = htmlString.replaceAll('{{name}}', c.first_name + ' ' + c.last_name)
      htmlString = htmlString.replaceAll('{{email}}', c.email && c.email[0] && c.email[0].address || '');
      htmlString = htmlString.replaceAll('{{photo}}', c.photos && c.photos[0] && c.photos[0].value || '');
      if (imageSize) {
        htmlString = htmlString.replace(/=s\d+"/, `=s${imageSize}"`);
      const div = document.createElement('div');
      div.innerHTML = htmlString;
      div.style = `height: ${imageSize}px; width: ${imageSize}px;`;
  // for illustration purposes only, we are skipping the Contact Picker to show the images on the host page
  skipBeforeDisplayContacts: true,
  /* a fun way to display the contacts is in a grid layout */
  #contacts-grid {
    display: flex;
    flex-wrap: wrap;
<div id="contacts-grid"></div>
<div id="contact-template" style="display: none">
    include referrerpolicy here to prevent Google from returning 403 errors
  <img class="contact-photo" src="{{photo}}" alt="{{name}} {{email}}" title="{{name}} {{email}}" referrerpolicy="no-referrer"/>