Fall back social image

Themes
1

Is there a way to set a full back image for rich links on social media?

So if no specific featured image is set the og:image can be defined

2

Hey @gr36. We can use JavaScript to sniff out any bookmarks without images and add in a default one of our own. Here’s something I’ve put together:

<script>
// Find all the bookmark cards that don't have images
const imagelessBookmarks = [...document.querySelectorAll('.kg-bookmark-card')].filter(
	item => !item.contains(document.querySelector('.kg-bookmark-thumbnail'))
);

// Loop through all the bookmarks…
imagelessBookmarks.forEach(bookmark => {

	// Grab the contents of the bookmark card
	const bookmarkContent = bookmark.querySelector('.kg-bookmark-container');

	// Replace the bookmark card content with the same content plus
	// an image with the thumbnail wrapper
	bookmarkContent.innerHTML = bookmarkContent.innerHTML + `
		<div class="kg-bookmark-thumbnail">
			<img src="/path/to/my/image.png">
		</div>
	`;
});
</script>

You’ll need to replace /path/to/my/image.png with the path to your default image.

If you’ve got some questions about this code just ask! Let me know how you get on with it :+1:

1 Like