Hi everyone,

 

This week I wrote a bit of code that can help forum members get full-size high-resolution photos for personal enjoyment or for sharing on this forum.

It's particularly helpful for development threads, e.g. renders or photography from articles.

 

Right now it is usable in the form of a bookmarklet - you save the code as a link in a bookmark, and when you're viewing an article, you click the bookmarklet link, and rather than refreshing the page, it will activate a feature that will open a full size image in a new tab for any image that you click on.

 

For now, there is a site-specific version which I have implemented for two sites: News 5 in Cleveland and Cleveland.com - these have the potential to be compatible with other sites that were built in the same fashion, so you may find that sister sites from the same organizations may also work.

 

If there's enough demand and usefulness for this, I may decide to make a browser extension to automatically enable this feature for you when you are on those websites.

 

Without further ado, here are the code snippets.

 

Channel 5

javascript:(function()%7Bdocument.addEventListener('click'%2C%20(e)%20%3D%3E%20%7Bconst%20el%20%3D%20e.target%3Bif%20(el.tagName%20!%3D%3D%20%22IMG%22)%20return%3Bconst%20imgUrl%20%3D%20new%20URL(el.src)%3Bconst%20imgParams%20%3D%20new%20URLSearchParams(imgUrl.search)%3Bif%20(!imgParams.has('url'))%20return%3Bwindow.open(imgParams.get('url'))%3B%7D)%7D)()

Cleveland.com

javascript:(function()%7Bdocument.addEventListener('click'%2C%20(e)%20%3D%3E%20%7Bconst%20el%20%3D%20e.target%3Bif%20(el.tagName%20!%3D%3D%20%22IMG%22)%20return%3Bconst%20cfMatch%20%3D%20el.src.match(%2F%5C%2F(cloudfront-.*)%2F)%3Bif%20(cfMatch%20%3D%3D%20null)%20return%3Bwindow.open('https%3A%2F%2F'%2BcfMatch%5B1%5D)%3B%7D)%7D)()

Instructions:

Any article will essentially "activate" this feature if you add the bookmarklet to your browser and click on the bookmark link in your browser while on an article page.

 

Then, click on any image you'd like to see the original, full-resolution image for, and your browser will open it in a new tab.

 

Quick Setup

It's easiest to setup if you use the bookmark toolbar on your browser. In Chrome or Firefox, you can just select/highlight the entire code snippet and then drag and drop it into your bookmarks toolbar and it will create a bookmark. Then, it will be easily accessible in your browser, too. If you save the bookmark that way, you may want to right click it and rename it to give it a better name than the one it gives by default.

 

Then you can just click on it when you're viewing an article and it activates the feature.

 

Traditional Setup

If anyone has problems with the above technique, for more traditional setup instructions, highlight/select the code snippet and copy it to your clipboard. Then go to your bookmarks in your browser and create a new bookmark. In the "Link" field for the new bookmark, paste in the code snippet. Then when you are wanting to use the feature on an article, find the bookmark, click on it, and the page will have the feature activated.

 

Requests

I realize these are Northeast Ohio-centric sites. If any members have any requests, I am happy to check out the site in question and write an equivalent bookmarklet if that site's full-sized imagery is available.

 

Enjoy! Hopefully this thread will make this easier to find and keep things a bit more on-topic and open for discussion than some initial sharing I have done in the development threads where I first used them.

 

Edit: I pulled up a random Cincinnati thread to get an idea of what sites are popular there and saw a lot of bizjournals links...I can easily do that one if there's demand.

Edited June 4, 20205 yr by infrafreak
bizjournals, formatting

Great, thank you for this. I will definitely try it out.  And in addition to the code, thanks for the line by line instructions.

1 hour ago, infrafreak said:

It's easiest to setup if you use the bookmark toolbar on your browser. In Chrome or Firefox, you can just select/highlight the entire code snippet and then drag and drop it into your bookmarks toolbar and it will create a bookmark.

 

This didn't work. I grabbed the text and could see it being 'transported' but when I let go of the mouse on the bookmarks on the tool bar nothing happed. Am using Chrome.

10 minutes ago, Pugu said:

 

This didn't work. I grabbed the text and could see it being 'transported' but when I let go of the mouse on the bookmarks on the tool bar nothing happed. Am using Chrome.

 

Thanks for trying it out so soon. Ensure that you have the bookmarks toolbar visible - you can toggle it (both on and off) by pressing CTRL+SHIFT+B on Windows or ⌘-Shift-B on Mac OS X. You should see the bookmarks toolbar underneath the address bar. Be sure to drag and drop the highlighted code snippet into that area.

 

Hope that helps, @Pugu

It worked for me on Firefox---highlighting the code and dragging it to the bookmarks bar.  But trying the exact same thing on Chrome didn't do anything. It its helpful to know, I'm running OS Catalina. (Catalina's been a pain for MANY many things.)

That's good to know, @Pugu - I believe I tested drag/drop in Chrome but only on Windows - you should still find it works in Chrome if you use the traditional, longer-form setup instructions. OS updates can for sure affect rich program interactions like drag and drop, so there may be limited ability to work around that other than copying and pasting and setting up the bookmark manually in that fashion. I don't have a computer running OS X to test against, so I'd have to try googling my way around that issue. I'm glad you got it to work with Firefox, and that you should be able to get it to work in Chrome with the longer, copy/paste instructions.

infrafreak---cool! it worked. Thanks. Tested it in both firefox and chrome. cool tool, thanks for developing and sharing.