Unshittify Reddit Images

README.md

Unshittify Reddit Images

This reverts the shitty wrapper that Reddit forces on you when you try to view images on their website. This is done via a bookmarklet (see URL below).

Create a new bookmark, copy/paste this code into it and then whenever you visit an i.redd.it image link and get redirected, this will fix the page so that it's just the image. Saving you from the varous bugs/issues induced by their platform (such as the header or footer overlapping the image itself when you attempt to zoom in on the image).

javascript:(function()%7B(()%3D%3E%7Bconst%20t%3Dnew%20URL(location.href).searchParams.get(%22url%22)%3Bif(!t)return%3Bconst%20e%3Dnew%20Image%3Bfunction%20i(t)%7Bvoid%200%3D%3D%3Dt%26%26(t%3D%22initial%22!%3D%3De.style.maxWidth)%2Ce.style.maxWidth%3Dt%3F%22initial%22%3A%22100%25%22%7De.setAttribute(%22src%22%2Ct)%2Ce.addEventListener(%22click%22%2C(()%3D%3Ei()))%2Ci(!0)%2Cdocument.body.innerHTML%3D%22%22%2Cdocument.body.appendChild(e)%7D)()%3B%7D)()%3B

Note that this currently depends on the url query string parameter.

Raw Source:

The code above is first minified and then URL encoded. The code below is the original version.

1. Minify: https://codebeautify.org/minify-js
2. Convert to bookmarklet: https://caiorss.github.io/bookmarklet-maker/

(() => {
	const startZoomed = true;
	const urlObj = new URL(location.href);
	const imgSrc = urlObj.searchParams.get('url');
	if (!imgSrc) return;
	const img = new Image();
	img.setAttribute('src', imgSrc);
	img.addEventListener('click', () => toggle());
	toggle(startZoomed);
	function toggle(zoom) {
		// If no zoom provided, just invert from current state (assuming state is initial a.k.a. zoomed)
		if (zoom === undefined) zoom = img.style.maxWidth !== 'initial';
		img.style.maxWidth = (zoom ? 'initial' : '100%');
	}
	document.body.innerHTML = '';
	document.body.appendChild(img);
})();