// ==UserScript==
// @name         Old Reddit show image in comments
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  This script displays images in the comments of old Reddit. It also allows you to expand the image by clicking on it and set image size through a custom GUI!
// @author       minnie
// @match        https://old.reddit.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=reddit.com
// @grant        none
// @license      MIT
// ==/UserScript==
(function() {
// Default pixel size and storage key
const STORAGE_KEY = 'imagePixelSize';
let pixelSize = localStorage.getItem(STORAGE_KEY) || '300'; // Default to 300 if no value in localStorage
function replaceLinks() {
// Select all <a> tags that are children of <p> elements
const links = document.querySelectorAll('p > a');
links.forEach(link => {
// Check if the link's inner HTML matches '&lt;image&gt;'
if (link.innerHTML === '&lt;image&gt;') {
// Create a new <img> element
const img = document.createElement('img');
// Set the src attribute of the <img> to the href of the <a>
img.src = link.href;
// Apply any styles from the <a> to the <img>
img.style = link.style.cssText;
img.style.height = `${pixelSize}px`; // Set height to user-defined pixel size
img.style.width = 'auto'; // Set width to auto
// Replace the <a> with the <img> in the DOM
link.parentNode.replaceChild(img, link);
// Add click event listener to expand the image
img.addEventListener('click', () => {
expandImage(img);
});
}
});
}
function observeDynamicContent() {
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
// Check if there are added nodes and if any is an element node
if (mutation.addedNodes.length && Array.from(mutation.addedNodes).some(node => node.nodeType === 1)) {
replaceLinks();
}
});
});
// Start observing the document body for added nodes
observer.observe(document.body, { childList: true, subtree: true });
}
function expandImage(image) {
// Create a new div element for the overlay
const overlay = document.createElement('div');
const expandedImage = document.createElement('img');
expandedImage.src = image.src;
overlay.id = 'expandedImage';
// Apply CSS styles to the overlay
overlay.classList.add("expandedImage");
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.display = 'flex';
overlay.style.justifyContent = 'center';
overlay.style.alignItems = 'center';
overlay.style.zIndex = '1000';
// Apply CSS to the expanded image
expandedImage.style.width = 'auto'; // Maintain aspect ratio
expandedImage.style.height = '90%'; // Maintain aspect ratio
expandedImage.style.borderRadius = '3px';
// Append the expanded image to the overlay
overlay.appendChild(expandedImage);
// Add custom CSS
const expandedImageCSS = document.createElement('style');
const css = `
div#expandedImage {
background-color: rgba(0, 0, 0, 0.7) !important;
backdrop-filter: blur(4px) grayscale(50%);
}
`;
expandedImageCSS.textContent = css;
document.head.appendChild(expandedImageCSS);
// Append the overlay to the body
document.body.appendChild(overlay);
// Add click event listener to remove the overlay
overlay.addEventListener('click', () => {
overlay.remove();
});
}
function createSettingsGUI() {
// Create and style the overlay
const overlay = document.createElement('div');
overlay.id = 'settingsOverlay';
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backdropFilter = 'blur(3px)';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
overlay.style.display = 'flex';
overlay.style.justifyContent = 'center';
overlay.style.alignItems = 'center';
overlay.style.zIndex = '1001';
// Create and style the settings box
const settingsBox = document.createElement('div');
settingsBox.style.cssText = `
font-size: 1.3rem;
background-color: white;
padding: 20px 30px;
border-radius: 5px;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
`;
settingsBox.innerHTML = `
<h3 style="margin-bottom: 10px;">Image Settings</h3>
<p style="opacity: 70%">Change the size of the images. <span style="color: red; font-weight: bold;">THIS WILL RELOAD THE TAB!</span></p>
<label for="pixel-size">Pixel Size:</label>
<input style="font-size: 1.3rem;" type="number" id="pixel-size" value="${pixelSize}" style="width: 100px;"/>
<button id="apply-settings" style="margin-top: 10px;">Apply</button>
`;
overlay.appendChild(settingsBox);
document.body.appendChild(overlay);
// Apply settings
document.getElementById('apply-settings').addEventListener('click', () => {
pixelSize = document.getElementById('pixel-size').value;
localStorage.setItem(STORAGE_KEY, pixelSize);
document.body.removeChild(overlay);
window.location.reload();
replaceLinks(); // Apply the new pixel size to all images
});
}
function initialize() {
// Add button to open settings
window.addEventListener('load', () => {
const openBtn = document.createElement("button");
openBtn.innerText = "Image Settings";
openBtn.style.border = '1px white solid';
openBtn.onclick = () => {
createSettingsGUI();
};
const targetElement = document.querySelector("div.panestack-title span.title");
if (targetElement) {
targetElement.appendChild(openBtn);
} else {
console.error('Target element not found');
}
});
replaceLinks();
observeDynamicContent();
}
initialize();
})();