☰

Greasy Fork is available in English.

Old Reddit Inline Images

Displays image posts and replies inline in threads on the Old Reddit interface.

  1. // ==UserScript==
  2. // @name         Old Reddit Inline Images
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.50
  5. // @description  Displays image posts and replies inline in threads on the Old Reddit interface.
  6. // @author       Spencer Ayers-Hale
  7. // @license      GPL-3.0-or-later; http://www.gnu.org/licenses/gpl-3.0.txt
  8. // @match        https://*.reddit.com/*
  9. // @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     var num = document.getElementsByTagName("a").length; //number of links on page
  17.     var cnt = 0; //current link number
  18.     var newLink;
  19.  
  20.     //Read image metadata
  21.     const getMeta = (url, cb) => {
  22.         const img = new Image();
  23.         img.onload = () => cb(null, img);
  24.         img.onerror = (err) => cb(err);
  25.         img.src = url;
  26.     };
  27.  
  28.     while(cnt < num){
  29.         const link = document.getElementsByTagName("a")[cnt]; //get original link
  30.  
  31.         //replace text with image
  32.         //comment images
  33.         if(link.innerText=="<image>"){
  34.             //get image width
  35.             getMeta(link.href, (err, img) => {
  36.                 //keep oringal size
  37.                 if(img.naturalWidth < 480){
  38.                     link.innerHTML="<img src=\""+link.href+"\">"
  39.                 }
  40.                 //scale down large images
  41.                 else{
  42.                     link.innerHTML="<img src=\""+link.href+"\" width=\"480\">"
  43.                 }
  44.             });
  45.         }
  46.         //linked post images
  47.         else if(link.innerText==link.href && link.href.indexOf("preview.redd.it") > -1){
  48.             //get image width
  49.             getMeta(link.href, (err, img) => {
  50.                 //keep oringal size
  51.                 if(img.naturalWidth < 480){
  52.                     link.innerHTML="<img src=\""+link.href+"\">"
  53.                 }
  54.                 //scale down large images
  55.                 else{
  56.                     link.innerHTML="<img src=\""+link.href+"\" width=\"840\">"
  57.                 }
  58.             });
  59.         }
  60.  
  61.         cnt++;
  62.     }
  63.  
  64. })();