lam_dynamic_image (on-the-fly article image resizing and display)

iblastoff · 2007-12-09 22:05:42

download here: v0.1 lam_dynamic_image.zip (includes 3rd party image.php script and lam_dynamic_image.txt)

lam_dynamic_image (on-the-fly image resizing and display)

This plugin allows you to output and resize article images (and images) on-the-fly. It also caches your resized images for better performance. The cached images are kept and stored for 7 days (configurable in ‘image.php’ file) before they are automatically cleared if not viewed within that time.

lam_dynamic_image will use Imagemagick if available on your host (apparently its quicker/better/more efficient?), otherwise it will use the slower GD library. This plugin is not a substitute for professional imaging software as you will always get much better results just resizing in Adobe Photoshop and the like.

Requirements:

You may notice performance hits as resizing images via PHP (especially large dimension images) is rather memory-intensive. the caching done with this plugin should alleviate this issue but each image still has to be processed at least once. If the images don’t show up for you, try resizing a smaller sized image to see if that works. If it does, then your host most likely hasn’t alloted you enough memory for php to use.

Run phpinfo and look for the memory_limit parameter to see how much you have. From what I can tell, resizing images with original dimensions around 2048px by 1536px will definitely require more than the default 8M allotment. I personally use 32M and haven’t had an issue yet. If you don’t see a memory_limit parameter in your phpinfo, then most likely all PHP processes are limited by the per process max memory limit set by your server. You will have to contact them to see if they’re willing to increase it.

Usage:

Copy the “image.php” file right into your /images directory (or whatever directory you use for your images) (EDIT as this may introduce potential security risks throwing a php script into a readable/writable directory you are welcome to place it anywhere you wish instead. the plugin code is also pretty simple to edit to reflect this. my next version will hopefully just include the entire script straight into the plugin so one wouldn’t have to worry about this)
Create a directory within your image directory called “cache” and make sure its readable/writable

Tags:

<txp:lam_article_image />

Uses same attributes as <txp:article_image /> (minus the align and inline style attributes) plus the following optional values (you can, but certainly don’t need to specify both):

height – specifies maximum height of resized image. example height="200" (leave out ‘px’)
width – specifies maximum width of resized image. example width="200" (leave out ‘px’)

if height and width are omitted, the tag will just output your article image using its original size.

hint: you can still use thumbnail attribute – specify 0 or 1. This will output the regular sized thumbnail for the image created by Textpattern.

<txp:lam_image />

Uses same attributes as <txp:image /> (minus the align and inline style attributes).

Examples:

<txp:lam_article_image width=“450” /> will resize and output article image to a maximum width of 450 px. The height will automatically be calculated and resized proportionally. will output the following html <img src="http://siteurl.com/images/image.php?image=id.jpg&width=450" />

<txp:image id=“3” height=“300” /> will resize and output the image with an id of “3” with a maximum width of 300 px. The height will automatically be calculated and resized proportionally. will output the following html <img src="http://siteurl.com/images/image.php?image=3.jpg&height=300" />

Note: This plugin will only resize proportionally. While you can specify something like <txp:article_image width=“450” height=“450” /> it will not return an article image with dimensions 450 × 450. This plugin will simply resize the image until the largest height or width value does not exceed either height/width attribute. Useful if all of your images are not the same proportion but you need it to fit with your other images. Also, you cannot use this plugin to enlarge image dimensions (as that would be silly).

Credits

Firstly, thanks to Gerd Tentler (www.gerd-tentler.de/tools) for allowing me to include and modify his Thumbs-up script. I took a look at phpThumb but I personally didn’t need all of the features it provided. I simply wanted on-the-fly image resizing and display. The rest of the credit goes to the TXP dev team as all I did was take the <txp:article_image /> and <txp:image /> functions and modify them to make use of Gerd’s script.

TODO

include the 3rd party script directly into the plugin to avoid having to upload any files on your own (you lazy bums :) !)
include gocoms code to automatically create the cache directory within your images dir
generate the cached image more intelligently (currently generates an extremely unique filename like img_f5017ed08f83ff5a2a28910eaec06b5b_145x200.jpeg but should be just using textpatterns already unique image id’s)
make the plugin tags output the url of the cached image instead of <img src="http://siteurl.com/images/image.php?image=3.jpg&height=300" />

Warning:

As this utilizes a 3rd party script I personally don’t know how secure it is. As far as I can discern it seems decent but its out of my current skill level to improve. I modified a few lines in there to add a bit of security but I am by no means a php expert!

Since the resize script uses the url for variables, your cache could be abused if a user were to manually enter different values for height/width repeatedly (as the script creates a cached version for each different size). A much better way would be to use the url of the cached image instead. its something i might look into (if i can actually do it) but for now, if anyone with better skills wants to improve on this (or know of a better script to use?) then by all means! i only offer this as a potential but definitely not perfect solution for on-the-fly resizing/display.

Testing:

Tested on php5+ but should work for php 4.1+

Last edited by iblastoff (2007-12-12 21:57:03)

Bloke · 2007-12-10 09:35:07

Hey, nice solution iblastoff; even with the caveats it could be very useful for one of my “news style” sites to make sure article images don’t extend past their alloted width, without having to photoshop the images down to size first.

If I get a chance to play with it later I’ll give it a whirl. I’m on PHP 4.4.4 so it’ll be a good test :-)

Thanks!

Last edited by Bloke (2007-12-10 09:35:26)

Gocom · 2007-12-10 11:17:12

Some thoughts:

Should image.php really be placed inside images directory that uses CHMOD 777?
Attribute/function to output only the correct url would be awasome (yeach, I really hate word awasome. Awasome!).
Also container tag that outputs link would be great.

PS. This is freaking awasome, great, godlike plugin. On-fly resizing, I could cry :) ^^

Cheers!

Gocom · 2007-12-10 11:57:44

Nice. Succestions.

Iblastoff, you could automate the creating of the cache dir and return errors if creating doesn’t work:

global $img_dir, pfr, $txpcfg;
$cachef = $txpcfg["doc_root"].$pfr.$img_dir."/cache";
if (!is_dir($cachef)) {
	mkdir($cachef, 0777);
	if (!is_dir($cachef)) {
		return array(1, "Error: unable to create cache folder '$cachef'.") ;
	}
}
if (!is_writable($cachef)) {
	return array(1, "Error: unable to write to cache folder '$cachef'.") ;
}

Also if the image.php where included to the plugin’s code, then it would be even greater – no requirement of uploading anything via FTP.

Cheers!

Last edited by Gocom (2007-12-10 11:58:15)

iblastoff · 2007-12-10 16:28:03

Gocom wrote:

Some thoughts:

Should image.php really be placed inside images directory that uses CHMOD 777?

Attribute/function to output only the correct url would be awasome (yeach, I really hate word awasome. Awasome!).

Also container tag that outputs link would be great.

PS. This is freaking awasome, great, godlike plugin. On-fly resizing, I could cry :) ^^

Cheers!

you’re right gocom. i figured throwing a php script right into the images directory probably wasn’t a good idea. as you can plainly see, my php is still very piss poor and most of this is just to learn how to put things together. i was thinking of placing it somewhere higher in the directory tree but i think i might as well try and see if i can include it directly into the plugin.

the caching part of image.php is something i have to look into and understand a bit more. currently it creates files like “img_f5017ed08f83ff5a2a28910eaec06b5b_145x200.jpeg” to make sure theres no duplicates but obviously textpattern uses unique id’s for each image anyway. if i can include the whole script right into the plugin i’m sure i could figure out attach the id to the cached filename as well (hopefully).

and thanks for the automatic creation of the directory code!

anyone else have any suggestions/improvements (and can guide me a bit on how to implement them) would be great. this is still a learning experience for me.

the reason i chose that image.php script was that it seemed minimal enough to do what i wanted. i don’t know if the script itself has security in mind though. i added some pretty basic checks to it but if anyone has written/know of a better on-the-fly image script with caching, let me know!

i’ve also taken a look at symphony21 and typolights image-handling scripts (as those cms’s do the same thing as this plugin out of the box) and their code seems much shorter but uses OOP/classes and such that are currently out of my league at the moment. gah!

Last edited by iblastoff (2007-12-10 16:29:57)

Gocom · 2007-12-10 17:16:45

You could do the implemention by using gps-function and and by packing the image.php inside it’s own function, and returning it into a if-statement. In example the script would be accessed via http://siteurl.com/?image=lam_image or something else.

Plus then you can access the width and height via gps-function that textpattern holds. Then the script doesn’t require, in example:

if(isset($_REQUEST['image'])) $image = $_REQUEST['image'];
if(isset($_REQUEST['width']) && is_numeric($_REQUEST['width'])) $width = $_REQUEST['width'];
if(isset($_REQUEST['height']) && is_numeric($_REQUEST['height'])) $height = $_REQUEST['height'];

And those another get_image_size-functions (or what they were), because Textpattern includes those also, as you can see when you look inside textpattern image-uploading and generation code :) At same time you could easily use textpattern image ids for images because they are unique, it also makes linking more easy and flexible. And premaded, sizes would be nice also. Like 50% of the original size and so on.

Writing plugins is good practice for coding-skills, specially for php-skills. It worked for me, atleast.

Cheers!

Last edited by Gocom (2007-12-10 17:21:42)

Gocom · 2007-12-10 17:42:39

Forgotten something: That image-creation script is quite okay. It’s secure, as I can see and it works – but, it looks like the writer haven’t checked his code that carefully. As there is double if-statements with same statement, example:

if($image) {
	if($image) {

At the end. And those $error-statements. They only make the code longer, as when the error could be made at the end with single die or something similiar.

Cheers!

Last edited by Gocom (2007-12-10 17:47:48)

hakjoon · 2007-12-10 22:22:03

Any reason not to use the image manipulation class that comes with TXP?

iblastoff · 2007-12-11 03:15:58

hakjoon wrote:

Any reason not to use the image manipulation class that comes with TXP?

i’m assuming you’re talking about class.thumb.php? long and short of it is that i have no idea how to use it. i’m still learning php and i’m definitely not as familiar with instantiating/oop/classes/etc etc as i’d like to be.

i used the third party script cause it seemed extremely simple for my current skill level to integrate. if the txp class already exists, couldn’t on-the-fly sizing just easily be done in core then? which would have put all of those “wish for more than 2 sizes” threads down long ago?

i’ve tried going to the sites listed in the class.thumb.php comments (http://www.cerdmann.com/thumb/ and http://www.cerdmann.de/thumb) for more info but neither of them work.

if someone can pull this off using the included class then please by all means! everything i’m doing here is basically half-assed attempts to get past the single image and thumbnail relationship.

Last edited by iblastoff (2007-12-11 04:19:51)

ruud · 2007-12-11 12:21:31

Using a separate small image.php is probably a lot faster than firing up TXP for each image that is loaded, although both are terribly slow when compared to loading a static image file.

iblastoff · 2007-12-11 20:23:47

Gocom wrote:

You could do the implemention by using gps-function and and by packing the image.php inside it’s own function, and returning it into a if-statement. In example the script would be accessed via http://siteurl.com/?image=lam_image or something else.

Plus then you can access the width and height via gps-function that textpattern holds. Then the script doesn’t require, in example:

if(isset($_REQUEST[‘image’])) $image = $_REQUEST[‘image’];
if(isset($_REQUEST[‘width’]) && is_numeric($_REQUEST[‘width’])) $width = $_REQUEST[‘width’];
if(isset($_REQUEST[‘height’]) && is_numeric($_REQUEST[‘height’])) $height = $_REQUEST[‘height’];

And those another get_image_size-functions (or what they were), because Textpattern includes those also, as you can see when you look inside textpattern image-uploading and generation code :) At same time you could easily use textpattern image ids for images because they are unique, it also makes linking more easy and flexible. And premaded, sizes would be nice also. Like 50% of the original size and so on.

Writing plugins is good practice for coding-skills, specially for php-skills. It worked for me, atleast.

Cheers!

hey gocom. just curious, if i were to package the separate image.php right into the plugins code, couldn’t i just skip all of the gps/_REQUEST arrays (since i wouldn’t have to grab them via url anymore) and just use the image, height, width attributes straight from lam_article_image’s $atts? i think that would be better but i’m not sure how i would go about doing that.

i assume i could take all of image.php and put it in a function named function lam_image_resize ($image, $height, $width) { everything from image.php } and just pass all those parameters straight from lam_article_image’s attributes.

Last edited by iblastoff (2007-12-11 20:31:28)

Gocom · 2007-12-11 22:57:06

and just use the image, height, width attributes straight from lam_article_image’s $atts? i think that would be better but i’m not sure how i would go about doing that.

Not actually, then we won’t be able to do the resized image without using your plugins tag. Well, it’s secure, because then only the author can do the resized image, but then we have to use the tags always – even when using the image inside a article. But I can see the bonus point in it.

Using the atts is very simple, just use the function and output the value with $what. Example:

function lam_article_image($what,$atts){
	extract(lAtts(array(
		'height'	=> '',
		'width' => '',
	));
	// calculations here - returning here:
	$lang = array(
		'height' => $height,
		'width'	=> $width,
	);
	return $lang[$what];
}

And then you can access them with lam_article_image('width').

i assume i could take all of image.php and put it in a function named function lam_image_resize ($image, $height, $width) { everything from image.php } and just pass all those parameters straight from lam_article_image’s attributes.

Yes. Create differnet atts-function, that is also part of the article_image()-code, and then just copy the functions of the image.php and rename them obviously. Then you should return the image via gps-function and and by packing the image.php inside it’s own function, and returning it into a if-statement, or use textpattern id’s for returning the cached images url. The id-version is way more secure and userfriendly.

Cheers!

Last edited by Gocom (2007-12-11 22:58:21)

Textpattern CMS

Textpattern CMS support forum

#1 2007-12-09 22:05:42