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

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

#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!


#2

Firstly, welcome to the forums.

While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://freecodecamp.org.

With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).

It is pretty typical on here for people to share a codepen / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.

Please provide some example of what you’ve tried and I’m sure you’ll get more help.

Happy coding :slight_smile:


#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.