Welcome Guest, Not a member yet? Register   Sign In
Best way to deal with image thumbnails on news web site (CMS)?
#1

[eluser]Markc[/eluser]
I've been thinking a while about the best solution and as much as I read I get more and more confused. There are a lot of different libraries and helpers (most of them are outdated or for CI 1.x) and I really need your help.

I have a custom CMS, news site that has about 40-50 images on the home page, but 80% of them are really small thumbnails in 3 different sizes and the other 20% of the images on the home page are in 2 sizes + for the inner pages when I list the news from a category there is 1 size of thumbnails. So in total I will need the original image for the news story, + 5-6 thumbnails sizes for the home page.

What's the smartest way to deal with this? There will be let's say 10-50 new news per day.

1. Is it still better to create 5-6 thumbnails per image during the upload?
2. What about the method "on the fly"? I'm more into this method, as I read, only the first visitor will call the library/helper to generate the thumbnails, and for the others the thumbnails will be already created so it won't waste CPU. What about this method? Is it good practice?

What caching techniques I should use for these what I need?

Any help is appreciated.
#2

[eluser]Markc[/eluser]
Also I forgot to ask, how the other CMS system deal with generating the thumbnails? I mean about Wordpress, Drupal, Joomla, etc.

Do they store predefined sizes or generate them on the fly?

I guess their logic should be the best, or maybe not, but I want to implement something smart in my CodeIgniter CMS.

I didn't mention, but I think it's not important to this, I use Grocery CRUD for the admin panel.
#3

[eluser]jojo777[/eluser]
Hi Markc I'll try to explain how I did that is past. I was working in a web with a news section, with a main image and its own gallery.

It worked like this:
- The user(admin or the owner) create the article and uploaded the images, then the code automatically saves the image and creates its thumbnail in a folder.

I'm sure you know how the CI upload class works, its easy to use, and normally its good to generate a random name for the image and the thumbnail.

You can also try the blueimp multiupload images with jquery that really worked for me very good!

Look the demo:
https://github.com/blueimp/jQuery-File-Upload
Here you have the wiki wich contains info about how to implement with codeigniter
https://github.com/blueimp/jQuery-File-Upload/wiki

Hope it helps you Wink
#4

[eluser]Markc[/eluser]
[quote author="jojo777" date="1352554159"]Hi Markc I'll try to explain how I did that is past. I was working in a web with a news section, with a main image and its own gallery.

It worked like this:
- The user(admin or the owner) create the article and uploaded the images, then the code automatically saves the image and creates its thumbnail in a folder.

I'm sure you know how the CI upload class works, its easy to use, and normally its good to generate a random name for the image and the thumbnail.

You can also try the blueimp multiupload images with jquery that really worked for me very good!

Look the demo:
https://github.com/blueimp/jQuery-File-Upload
Here you have the wiki wich contains info about how to implement with codeigniter
https://github.com/blueimp/jQuery-File-Upload/wiki

Hope it helps you Wink[/quote]

Thanks for your answer, but it's not exactly what I asked.

In short I was asking is it better practice to generate the thumbnails on the fly, or to save them as they are uploaded?

Anyway the jQuery library that you suggested is really nice working, I will use it for my other project, I was looking for exactly the same style of multiple upload images.
#5

[eluser]jojo777[/eluser]
You are welcome!

About this "it better practice to generate the thumbnails on the fly, or to save them as they are uploaded?" I think is better to store the image and then generates the thumbanil. So upload the image save it with its own thumnail as they are uploaded.

Maybe there are goods alternatives but for now that worked for me very well.

Wink



#6

[eluser]Rok Biderman[/eluser]
I used "on the fly method" on a gallery site and it was working well on testing but was a nightmare on live (60 requests to a script for each page refresh). What I did was what incidentally also Wordpress uses - Timthumb. You still have to set the upper limit and resize according to ratio (I can go look up the methods if you need them) to get any kind of sane image sizes and you'd probably have to preg_replace all those hard to display signs with an underscore.

After that use Timthumb to resize/crop the images to your size. It has a lot of options (you can also apply some basic filters and sharpen thumbnails which makes them look better). This way you can also change size/ratio at a later time without reuploading. It also handles caching (for 7 days by default I think) so it's going to be snappy comparing to the dynamic resizing. Now, if you Google Timthumb you're probably find out it has a rotten security reputation (one of the biggest WP hacks was through an outdated Timthumb plugin), but it's since been rewritten from scratch and it seems to be perfectly safe. I don't really know what Drupal uses, but that one is usually so slow I think the Leprechauns draw it by hand.

The only case when I'd use the "on the fly" from CI image manipulation lib would be if I had some special css in which I'd fill the whole screen with an image or something similar. Not on a large scale and especially not if you're planning for the site to have any kind of traffic. Considering that you can't cache partials with native CI caching, you'd have to write something on your own.
#7

[eluser]Markc[/eluser]
Hmmmm, for now I implemented this solution. As I said I'm using Grocery CRUD, so I'm generating thumbnails after the upload using Image_moo library.


Code:
$this->image_moo->load($file_uploaded)->set_jpeg_quality(90)
            ->resize(350,210)->save($new1,true)
            ->resize(280,168)->save($new2,true)
            ->resize(196,118)->save($new3,true)
            ->resize(120,72)->save($new4,true)
            ->resize(100,60)->save($new5,true);

What do you think about Image_moo library? Is there any better library? The jpeg images are ok, but the size od png images is not really reduced.

P.S. This solution is ok for now as it wouldn't spend CPU/RAM at all because they will be stored on the file system. But the question is, would the server became slower because of the big number of files? I divided them in different folders, but I don't know if the system will become slow if there are let's say 10.000 images in one folder and the image have to be loaded from that specific folder?
#8

[eluser]Markc[/eluser]
[quote author="Markc" date="1352625552"]Hmmmm, for now I implemented this solution. As I said I'm using Grocery CRUD, so I'm generating thumbnails after the upload using Image_moo library.


Code:
$this->image_moo->load($file_uploaded)->set_jpeg_quality(90)
            ->resize(350,210)->save($new1,true)
            ->resize(280,168)->save($new2,true)
            ->resize(196,118)->save($new3,true)
            ->resize(120,72)->save($new4,true)
            ->resize(100,60)->save($new5,true);

What do you think about Image_moo library? Is there any better library? The jpeg images are ok, but the size od png images is not really reduced.

P.S. This solution is ok for now as it wouldn't spend CPU/RAM at all because they will be stored on the file system. But the question is, would the server became slower because of the big number of files? I divided them in different folders, but I don't know if the system will become slow if there are let's say 10.000 images in one folder and the image have to be loaded from that specific folder?[/quote]

Anyone?
#9

[eluser]Mirge[/eluser]
I actually love the Image_moo library. I've used it heavily for watermarking and image resizing (generating thumbnails, small, medium, large, original) for a client project that I'm still working on.

Best practice is to generate your resized copies on upload. You'll waste precious CPU if you're resizing every time on demand. Or if you're resizing once the first time it's requested, I'm sure that'd be fine too, but the OCD in me says just resize the image when you have it & be done with it. Cleaner.
#10

[eluser]Markc[/eluser]
[quote author="Mirge" date="1353165615"]I actually love the Image_moo library. I've used it heavily for watermarking and image resizing (generating thumbnails, small, medium, large, original) for a client project that I'm still working on.

Best practice is to generate your resized copies on upload. You'll waste precious CPU if you're resizing every time on demand. Or if you're resizing once the first time it's requested, I'm sure that'd be fine too, but the OCD in me says just resize the image when you have it & be done with it. Cleaner.[/quote]

Thanks, that is what I wanted to hear about Image_moo and the way I'm working with the images.




Theme © iAndrew 2016 - Forum software by © MyBB