Display thumbnails for images in articles

Question

So I have this website where users can post articles, each article containing at least one photo. What I want to do is when I display the list of articles on the website I want to also show a thumbnail next to the articles name.

Here comes the tricky part: the images are not hosted on my server, are simply links hosted on some image-hosting website. Another problem is that I don't know where the images appear in the post (they could be at the beginning, at the end or in the middle of the article).

What would be the best approach to create a thumbnail system in this case?

I was thinking maybe I could do this: every time an article is posted or edited and stored into the database I could scan the entire articles for images links and store the first link in a separate value in the database (this could be kind of slow though). Also once I have those values stored and I have to display a thumbnail the only way to do so will be by showing the full image resized to the thumbnail size (that means the user has to download multiple full-size images to see the articles list with thumbnails).

Is there any better approach? (you can see the technologies used in the tags)

Answer 1

• Create a thumbnails task that runs in the background after an article has been published.

• Find image tags in the article HTML using regular expression .

• Get those images and create and thumbnail that you save locally in a folder in your server .

• Protect that folder/location against hotlinking .

• Use those local pictures as thumbnails

Answer 2

• Use HtmlAgilityPack as a starter to get to the images from the image host.
• Use an ASP.NET handler to generate the thumbnails. That way, you won't have to store anything locally, the thumbnails images will only exist in memory, making hotlinking impossible