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)

Since you're using RavenDB, you could use an Analyzer to pull out the image url's into separate terms. Not sure if one of the built-in analyzers would work, or if you would have to write a custom one. They work very fast. I'm not an expert in this area, so I'm not posting an answer here. Perhaps you can get more guidance on the RavenDB google group. Docs on analyzers here: http://ravendb.net/docs/appendixes/lucene-indexes-usage — Matt Johnson-Pint, Dec 12 '12 at 17:14

score 2 · Answer 1 · edited May 23 '17 at 10:24

2

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

edited May 23 '17 at 10:24

Community

1
1

answered Dec 12 '12 at 11:44

vtortola

34,709
29
161
263

score 1 · Answer 2 · answered Dec 12 '12 at 12:38

1

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

answered Dec 12 '12 at 12:38

Wim Ombelets

5,097
3
39
55

1

Yes, but for let's say 100 queries / second displaying each 10 thumbnails means generating 1000thumbnails/second from images. This sounds very inefficient. – XCS Dec 12 '12 at 16:56

Display thumbnails for images in articles

2 Answers2