Hi all,

I know there’s been a good deal written on thumbnail generation and the like with CI, but I wanted to explain what I’ve made and see what kind of best-practice advice I could find. Here’s my story…

Currently, I have a site which allows users to upload collections of photos to projects they’ve created after first creating an account. Upon account creation, the site generates folders for the users in the following fashion for each of five pre-defined projects:

/students/username/project_num/images/thumbs/

(This is to say that within a pre-created students folder, the username, project_num, images and thumbs folders are created recursively five times.)

When a user uploads images to a project, I have a gallery controller which uploads the full images into the images folder for the project_num, and then creates a smaller thumbnail which maintains its ratio. So far so good.

On the index page of the site, where these thumbnails and full images are displayed, I had a bit of a brain lapse, thinking I could simply output the full image while resizing it via css for a ‘medium-size’ image which would lead to the full-size image when clicked.

(To be clear, the path is: Click on thumbnail—> Load scaled full-size (medium-size) image via ajax into a display area above thumbs—> Click on medium-sized image—> Load full size image via lightbox, or something of that nature.)

I have everything working to this point, except, as one might imagine, resizing the full-sized images with css doesn’t maintain aspect ratio for the thumbs, which means I need to find the best way to resize these.

In thinking about it, I figured I had two options:

1. I could resize the image on the fly when the user clicks a thumbnail to load the medium-sized image via ajax. (I have a method ‘get_image($url)’ in my gallery controller which simply loads a view with an image tag and the image source passed to it, etc.) I thought perhaps I could send it first to my gallery model, resize it there on the fly, and send it on to the view. The problem I’m having is that resizing it on the fly and echoing it out gives me the raw image data (I apologize, I don’t know that’s the right term). I’ve tried using data_uris to format the raw data into something echoable, but with no success. Is this method possible?

2. The second option I considered was to generate a second medium-sized thumbnail when the user uploads the image with maintain_ratio set to true. This method is slightly less ideal, given that when providing a way for the user to delete their projects, I’ll need to scan for an additional set of images to delete. Not a huge deal, definitely, but something I figured could be avoided by generating the medium-sized image on the fly.

I hope I’ve been clear in my explanations, if long-winded! I’m very curious to see what suggestions folks have about the best way to handle this.

Much thanks for reading, and any suggestions are much-appreciated!

Steve K.