Auto-populate images of websites' homepage from list of URLS?

1

Hi everyone!
Is it possible to create a code in html, css, or javascript to auto-populate images of websites’ homepage from list of URLS?

Basically, I have a long list of URLS of email newsletters that I wrote in HTML/CSS. They are on my company’s website and I have a list of all the URLS bookmarked. I’m wondering if there’s an easy way to show thumbnails of them as links to the actual work. I know how to take a screenshot and can use that as the image with a hyperlink to the email newsletter, but I wanted a more dynamic approach, if there is one.

For instance, what I’m looking for is basically what Google Chrome does with your favorite/frequently used websites when you click on “Create a new tab” - there’s an image that goes along with the website and it is dynamic. It shows the most recent cache or webpage load.

Thanks in advance!

3

Hello, and welcome.

I went to Google and there where some articles saying that the easiest way to have the thumbnail of another website is to simulate that thumbnail with an <iframe>, but that wouldn’t be very efficient if you have a lot of them though.
Just type: “javascript how to show thumbnail of website with with link”, to know more. There’s quite a lot of info…

4

You could try chrome headless: https://medium.com/@dschnr/using-headless-chrome-as-an-automated-screenshot-tool-4b07dffba79a

5

Thank you! This is exactly what I was looking for! I found this: https://medium.com/@jamesfuthey/simulating-the-creation-of-website-thumbnail-screenshots-using-iframes-7145269891db
Now, I just have to mess around with it to figure out how to make them clickable and the user can go to the website they are displaying :slight_smile:

6

You realise the iframe will actually load the website in question? So, if you have 9 thumbnails, it will load all 9 websites? That’s not going to be a great user experience :smile:

7

Use this API
https://screenshotlayer.com/documentation
The free version is rate limited to 2 requests/minute. But really, you don’t want to be making this call everytime. You just need to do it once, store the snapshot image on your local server and the path to the image on your database, and display the local file in the future.