How do I restore my cursor to show pixel image size when I move over google search result images? It no longer shows the image resolution.
I am trying to find high resolution images for my music album art. Previously on google searches I could move the cursor over the image and the resolution would show. Now it no longer does this so I am stuck clicking on image after image to find the high resolution ones. Firstly, is this a mozilla cursor function problem or google search problem? If its mozilla, what turned it off from showing the pixel resolution e.g. 600x600 as I moved over the image and how do I turn it back on? Thanks for any advice that you can give.
All Replies (4)
The Google website doesn't seem to show this data, but I still see it present if I check the page source.
You can try this bookmarklet to see if that works.
javascript:(function(){var e=document.body.querySelectorAll('.isv-r[data-ow][data-oh]');for(i=0;E=e[i];i++){E.title=E.dataset['ow']+'x'+E.dataset['oh']}})()
You can create a new bookmark and paste the JavaScript code in its Location field. You would have to run this bookmarklet each time the page changes, so possibly use this code in a script extension like Greasemonkey or Tampermonkey.
I have just found the answer. This is a google issue not a mozilla one - its their change. Still a pita to find the high resolution ones now they removed it and Im not a coder so I have no idea how to script the above. Guess I just have to click on a lot of images and waste a lot of time thanks to Google. https://searchengineland.com/google-images-to-replace-dimensions-overlay-on-image-thumbnails-329657
Modified by cbfrideruk
Google Image results currently seem to have CSP preventing user scripts from being injected successfully. Perhaps userContent.css or Stylus could come to the rescue?
This style rule uses the "generated content" technique to overlay information from a tag in the page "before" the contents of that element, using positioning to place it in front of those contents:
@-moz-document url-prefix(https://www.google.com/){ /*** Google Image Dimensions - Show on Hover ***/ div.isv-r:hover::before { content: attr(data-ow) " x " attr(data-oh); font-size: 11px; color: #f4f4f4 !important; background-color: rgba(0, 0, 0, 0.6) !important; position: absolute; top: 162px; right: 1px; z-index: 10000; padding: 2px 4px; } }
A before-and-after screenshot is attached for reference:
<center>
</center>
Note that the number of pixels for the "top" of the generated content (162 pixels down from the top of the rectangular box around the image thumbnail and text) is what was needed on my Firefox to put the information in the lower right corner of the image, and this could vary.
To set that up in Stylus
First you would need to install the Stylus extension:
https://addons.mozilla.org/firefox/addon/styl-us/
After installation, click its "S" toolbar button, then the Manage button to open its main page.
Then click the "Write new style" button.
Stylus will highlight the name field, and you can name it whatever is helpful, such as Google Images Dimensions.
On the right side, click in the code box and paste the above code. Stylus will pop up an overlay titled "Paste the Mozilla-format code". Click the "Overwrite Style" button to insert it into the code box.
Click the Save button below the style name and test your Google Images results page. You might need to reload (Ctrl+r) that page.
Success?
Okay, I uploaded the custom style so it's easier to install.
Step 1: Install Stylus
https://addons.mozilla.org/firefox/addon/styl-us/
Step 2: Install user style
https://userstyles.org/styles/180867/google-images-width-x-height-dimensions