I’m setting up a e-commerce site using expression engine and mals-ecommerce. The site will need to show photographs of the products and include enlarged photos as well. I know that ee can resize images on import but I am afraid my client will get confused in the process and I would like to simplify it a bit for them.

I found a script that will resize images on the fly called phpthumb

It works by adding a bit of code to your img tag. For example, this:

would need to be displayed as this:

I was thinking that if I could make a custom field to place the uploaded photo in I could hard code different photo sizes directly into my templates to produce dynamic photo sizes. The problem that I would need to overcome would be to strip down the image code that ee places into the entry to just the path of the file. This…

would need to be changed to this:

I have looked at the different filters and character limiters but I need something to limit characters from the beginning as well as the end. This would enable me to put code in my template like this…

Does that make sense? If someone can help write a plug in or point me in the write direction that would be amazing.

The simplest thing would simply be to hack the backend so that instead of populating the full <img> tag, EE just populated the file name/path.  I’m pretty sure there’s been a Feature Request to make that ability available.

A very quick search looks like the relevant code is located around line 4928 in system/cp/cp.publish.php.

This was the first thing I thought of as well… and might very well go that route. I was hoping to keep it so that other sections of the site could be updated as normal. A plug in solution would probably best because I could restrict it to one custom field.

Thanks for the tip! I’m going to go check the code to see if I can tweak it.

Hacks bad
Any PHP that would analyze the string, extract what was wanted from the normal EE insert and one could use that as a variable?

Does the Extract url plugin come close?  It looks like it would, but I’ve never played with it, so I’m a little fuzzy on exactly how it works.

Seems like this would be a handy thing to be able to do.

Hmmm…haven’t played with that either…will have to check it out.

Yikes…. I totally forgot to post a follow up to this thread. The plugin works perfectly and I have used image resizing for a couple of projects now.

The script I have used is found here - phpthumb. All you need to do is upload the directory of files onto your server, and then run your images through the script.

Something like this:
<img src=“disk.jpg”/>

can be altered to any size like this…
<img src=“phpThumb.php?src=disk.jpg&w=200&q=10” />
where w=width & q=jpg quality

There are a ton of other things you can set as well, such as borders, unsharp mask, watermarks, etc etc etc. It’s really helpful if you want to use one image several places in a site at different sizes.

This site which is still in production, uses the script to resize the album images on the front page to a specific size. This allows the client not to have to worry about sizing this image at all.

- Jesse BC

Jesse...Couple of questions…
1) How did you get around your original problem with what EE inserts into your custom field…hack the Backend as Chris suggested or some other way?
2) I presume one downloads this script and runs it on their own server…correct?

PXLated… I use the extract url plugin to take the full <img> tag that ee places in a custom field, and reduce it to just a url… so

{exp:extract_url}<img src=“http://ellislab.com/images/uploads/golf.jpg” border=“0” alt=“image” name=“image” width=“150” align=“left” height=“113”/>{/exp:extract_url}

Becomes..

http://ellislab.com/images/uploads/golf.jpg

With the results of that plug-in, you can now wrap the extracted url with your own img tag & variables. So the final code in your ee template might look something like this…

<img src=“http://www.server.com/phpThumb.php?src={exp:extract_url}{custom_image_field}{/exp:extract_url}&w=50&h=50” />

Does that makes sense?

To answer question #2. Yes, you download the script and run it on your own server. You may have to tweak a few settings in the config file to properly set up the cache location etc, but it’s fairly straight forward.

- Jesse

Cool…Thanks!

Ok, may give this a whirl.
Out of curiosity, where did you put your cache directory? Was thinking the best spot may be in the same sub-directory as the phpThumb scripts, keep it all contained.
Any and all advice is welcome before I venture forth into the unknown

yeah… I placed the cache directory in the phpthumb directory as well. I can’t think of anything specifically that tripped me up, except maybe using relative verse full urls. I’m using full url’s due to my subdomain set up, and had to change one of the first items in the config file to reflect this. Not a biggie though. There’s a few examples that come with the script, so I think you’ll be able to pick it up pretty quickly.

Good luck!

- Jesse

Just starting to read the docs & stuff.
One other question…did you create a phpThumb subDirectory or just throw the phpThumb scripts into the same directory as your images?
Looks like you can configure it to output a thumbnail file also. Have you played at all with that?

I just put the phpthumb directory in the root of my public html files… and no… I haven’t really played with thumbnail creation besides just downsizing an image.

- Jesse

Slick…got it working. Will have to play around now
—————
What I did was create a subDirectory called “utilities” where I can house any of these misc. scripts I need. Within that, I created a “phpTumb” subdirectory with all it’s scripts and the “cache” directory. So my code looks like this…
<img src=“http://www.server.com/utilities/phpThumb/phpThumb.php?src={exp:extract_url}{photo-medium}{/exp:extract_url}&w=150&h=150” />
—————
This could be very, very useful…thanks for the pointer!

Awesome… glad you got it working.. and sorry for not posting directions (as lame as they were) earlier.

- Jesse

Your directions were just fine, very helpful. I had played around with the ExtractURL plugin but your example was the key. This is very, very useful.
It creates the thumbnails on the fly the first time but writes those into the cache for repeated use. So, it can be just a little slower on the first go but once the images are cached it’s as fast as it can be.
Awesome! It obsoletes a couple of other threads I had going trying to solve a couple of problems.

I can’t believe I never noticed this thread before.  I can see this being very useful in some cases.

I wonder if there is a way to have the new image link to the old full size image with this setup.  Sure would be nice if this could be turned into a plugin as well.

This has me thinking.  I wonder if something could be made to look through an entry find all of the images and then process them depending on the parameters you set (max-width, max-height, link to original image directly, pop up, etc.)  I realize this is going beyond the limits of what phpthumb does. 

I really need to learn how to code in PHP. 

Jamie

methnen...
I use this extensively on a site where the users are real computer illiterate. They can upload whatever master they have and phpThumbs takes care of the rest.
Here it’s creating the proper sized thumb and popup image from whatever they upload. There is just those two sizes.
And here it’s taking the original and creating three sizes (thumb, medium, and large). Additionally, it’s adding the old polaroid border to the thumbnail image (I’m doing the border differently on the medium sizes though just because I like to experiment).
phpThumb creates and caches all the needed images and has a gazillion options.