Skip to content

Instantly share code, notes, and snippets.

@jamieparkinson
Last active September 28, 2022 12:46
Show Gist options
  • Save jamieparkinson/2bbe25436136c19fb8d9a076f40afbd8 to your computer and use it in GitHub Desktop.
Save jamieparkinson/2bbe25436136c19fb8d9a076f40afbd8 to your computer and use it in GitHub Desktop.
Prismic image downloader

Prismic image downloader

For downloading full-res Prismic images in a choice of formats. The image you want must've loaded on the page before you click the bookmarklet, as otherwise the lazy loading gets in the way.

You can make it into a bookmarklet here - unfortunately we can't put js links in markdown here.

const formats = ['jpg', 'jp2', 'png']
const getFormatUrl = (originalUrl, format) => {
const clonedUrl = new URL(originalUrl);
const keys = Array.from(clonedUrl.searchParams.keys());
keys.forEach(key => clonedUrl.searchParams.delete(key))
clonedUrl.searchParams.set('fm', format);
return clonedUrl.toString();
};
document.querySelectorAll('img[src^="https://images.prismic.io"]').forEach(img => {
const src = new URL(img.getAttribute('src'));
const select = document.createElement('select')
const defaultOption = document.createElement('option')
defaultOption.setAttribute('value', '');
defaultOption.textContent = "- Download format -"
select.appendChild(defaultOption);
formats.forEach(fmt => {
const option = document.createElement('option')
option.setAttribute('value', getFormatUrl(src, fmt))
option.textContent = fmt;
select.appendChild(option);
});
select.style.position = 'absolute';
select.style.top = 10 + 'px';
select.style.left = 10 + 'px';
select.style.zIndex = '10000';
select.addEventListener('change', (event) => {
const downloadUrl = event.target.value;
window.open(downloadUrl, '_blank');
})
img.parentNode.insertBefore(select, img.previousSibling)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment