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>
<script>
cloudsponge.init({
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;
console.log('beforeDisplayContacts');
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;`;
container.appendChild(div);
});
},
// for illustration purposes only, we are skipping the Contact Picker to show the images on the host page
skipBeforeDisplayContacts: true,
});
</script>
<style>
/* a fun way to display the contacts is in a grid layout */
#contacts-grid {
display: flex;
flex-wrap: wrap;
}
</style>
<div id="contacts-grid"></div>
<div id="contact-template" style="display: none">
<!--
include referrerpolicy here to prevent Google from returning 403 errors
https://stackoverflow.com/questions/40570117/http403-forbidden-error-when-trying-to-load-img-src-with-google-profile-pic/61042200#61042200
-->
<img class="contact-photo" src="{{photo}}" alt="{{name}} {{email}}" title="{{name}} {{email}}" referrerpolicy="no-referrer"/>
</div>
