Greasy Fork

It works, but only on first batch of results

First of all - you did a good job, thank you! The script works as described, but there's one problem: it only runs once when the page is loaded. Once you start scrolling, the new results won't have the image dimension tags.

May I propose updating the script with the good ol' MutationObserver, like this:

1. Give the self-executing function name, something like function main(). It doesn't even have to stay self-executing since the observer will run it when needed.
2. Define MutationObserver instance after the main function and initialize it: ``` var observer = new MutationObserver(function(mutations) { observer.disconnect(); main(); observer.observe(document, config); });

var config = { childList: true, subtree: true };

observer.observe(document, config);

Voila - now every new results page will be handled by your very useful script

I completely forgot that it also has to have a mechanism to avoid adding the dimensions div to the thumbnails that already have it. I'll look into it as soon as i got time and report back... Unless the author or somebody else will beat me to it

Well, I've just looked into it and here's a possible and working approach (most likely not the most optimized one):

'use strict';

// Copy Google's own CSS used for image dimensions
const styles = `
    .image-dimensions {
      background-color: rgba(0,0,0,.5);
      border-radius: 2px 0 0 0;
      bottom: 0;
      box-shadow: 0 0 1px 0 rgba(0,0,0,.16);
      box-sizing: border-box;
      color: #f1f3f4;
      font-family: Roboto-Medium,Roboto,arial,sans-serif;
      font-size: 10px;
      right: 0;
      line-height: 12px;
      overflow: hidden;
      padding: 4px;
      position: absolute;
      white-space: nowrap;
    }
  `;

// Append stylesheet to the document
const styleSheet = document.createElement("style");
styleSheet.type = "text/css";
styleSheet.innerText = styles;
document.head.appendChild(styleSheet);

function main() {

  // Find all thumbnails
  // Exclude the "already handled" class we set below
  const images = document.querySelectorAll('[data-ow]:not(.image-dimensions-added)');

  // Loop through all thumbnails
  for (let i = 0; i < images.length; i++) {
    const image = images[i];

    // Get original width from 'data-ow' attribute
    const width = image.getAttribute('data-ow');

    // Get original height from 'data-oh' attribute
    const height = image.getAttribute('data-oh');

    // Create DIV and insert text
    const dimensionsDiv = document.createElement("div");
    const dimensionsContent = document.createTextNode(width + " × " + height);
    dimensionsDiv.appendChild(dimensionsContent);

    // Assign CSS class
    dimensionsDiv.classList.add("image-dimensions");

    // Append everything to thumbnail
    image.firstChild.appendChild(dimensionsDiv);

    // Add "already handled" type of class to the thumbnail
    image.classList.add("image-dimensions-added");
  }
}

var observer = new MutationObserver(function(mutations) {
    observer.disconnect();
    main();
    observer.observe(document, config);
});

var config = {
    childList: true,
    subtree: true
};

observer.observe(document, config);

Thank you for the great feedback and even a proposed solution! That case is honestly something I completely missed. I'll fix it asap. Once again, really appreciate your help.

Fixed version is now live. Thanks once again!

Great! It's always a pleasure to help out, especially with something that I find useful myself!

Hey @mr.dev,
are you still using the script? If so, does it work for you as intended?