Günter Schenk :: Tutorials Corner
Adobe Dreamweaver Developer Toolbox

Upload & Resize Image: setting the image width on the fly

1. Introduction

"Upload and Resize Image" is clearly one of ADDT´s most popular and elaborate server behaviours which comes with heaps of options, and one of them is to resize the width and/or height of the to-be-uploaded image to a fixed value:




Those who are familiar with this behaviour know that any uploaded image will always be resized according to these previously defined values -- but what if you´d rather prefer to assign a user-defined value for the width everytime you´re uploading an image, say by entering "200" into an additional text field of your form ?

Well, guess what, this sort of flexibility is not supported by default, but this tutorial will show you ways to do just that !

2. adding the "new width" text field to your form

Let´s assume you have already built an ADDT Insert Record or Update Record form which comprises...

a) a text field for the image description

b) a standard file field

c) an already implemented Upload & Resize behaviour instance which - for this tutorial - has the following attributes defined:

- Resize method: Proportional - Fixed width
- Width: whatever value you prefer

Let´s now add another text field to this form that´s supposed to hold an integer value for setting the image width on the fly, and let´s name this field "imagewidth":




As you´re an ADDT user anyway, you also might want to apply the "Numeric Text Field" form control to this field for making sure that you (or your customer) will only be able to enter integer values:





Q: does the extra "imagewidth" field have to be part of ADDT´s Insert or Update transaction ?
A: no, it´s an input field which is not supposed to have its value stored in the database

Q: will ADDT not bother me with error messages just because this field isn´t part of any transaction ?
A: no ! ;-)

3. let´s examine ADDT´s default ImageUpload trigger code

Before going any further with our cool modifications, I´d first like to make you familiar with one particular element of ADDT´s default "Trigger_ImageUpload" function :: it´s the *position* of the originally defined static image width inside the "setResize" statement:




This is the only element we´ll be replacing at a later time, and in the following chapters I´ll show you how to use some comparatively basic PHP to get you there.

4. solution 1: using a PHP variable instead of a static value

You will already be able to realize a well-working solution by...

a) inserting a custom PHP if/else conditional statement preceeding the Trigger_ImageUpload function and - depending on the conditions - assigning a different result to the variable $new_imagewidth

b) simple as it sounds: just replacing the original static value with this very variable:



the displayed code can be obtained from this tutorial´s "download related files" page !

I d certainly not be a serious tutorial writer without trying to impose some technical explanation on you and tell you what the custom PHP code actually does -- so here we go, if you like it or not :-)

a) $_POST['imagewidth'] represents the submitted contents of the imagewidth field

b) the "if" statement contains 2 conditions which will both have to be met:

If these two conditions are met, it´s obvious that the visitor did indeed submit an integer value -- and as this value can be considered safe, let´s assign the submitted contents of the imagewidth field to the PHP variable $new_imagewidth:

$new_imagewidth = trim($_POST['imagewidth']);

c) the "else" statement will come into play when both "if" conditions have *not* been met, means when the visitor either hasn´t entered any value at all or somehow did manage to enter a funny value like "12xer" or similarly daft stuff which will of course break the "resize" part of the main script -- and in this case we´re simply going to assign a default value to the PHP variable $new_imagewidth:

$new_imagewidth = "250";


d) Now that our custom PHP logic appears to be sufficiently waterproof and will return something useful in any case, all that´s left to do is to simply use the PHP variable "$new_imagewidth" rather than the originally defined static value.

But wait, there´s one more thing to keep in mind: ADDT´s "Trigger_ImageUpload" is a PHP function after all, and this means that you will have to "import" any variables which - like in this case - have been declared outside this function. Doing this is pretty simple: just add...

global $new_imagewidth;

on line 1 of this function, and all that´s really left to do, is to...

e) locate the function´s "setResize" statement and replace the static "width" value (e.g. 250) with the PHP variable $new_imagewidth

5. solution 2: using a PHP function

As helpful the previously mentioned solution already is, it should be mentioned that is has some major drawbacks:

1. how many times will you have to write $_POST['imagewidth'] and try to get this right everytime ;-)

2. reusing all this code with other pages is not that easy

3. when your form has has two or more file fields for uploading multiple images, you´ll have to create multiple instances of this code and adapt certain elements for each instance


Isn´t there a way to simplify this procedure and create something that´s easily reusable on other pages and/or in a different context ? Yes there is a way -- let´s turn this code into a PHP function and try to use parameters whenever possible:



the displayed function code can be obtained from this tutorial´s "download related files" page !

When taking a closer look at this function you might have noticed the 3 parameters specified inside the parentheses:

function addt_upload_setimagewidth($fieldname,$maximal_width,$default_width)

Further below inside the function you´ll note that these parameters are getting referenced either just once (e.g. $maximal_width) or repeatedly ($fieldname) -- well, this alone doesn´t make our function do something of value, but once you start *calling* this function and using different values for these parameters, you´ll see the huge benefit of this approach.

Some examples to get you started:

This alone clearly makes it considerably more helpful and easier to use than our previous solution, and calling this function inside ADDT´s "Trigger_ImageUpload" function is just as easy as using a simple PHP variable -- and there´s even more particular advantage: you don´t need to "import" that PHP variable any longer by declaring it "global", because this function gets executed "in situ".

6. Conclusion

Well, this tutorial is based on a recent attempt to try adding some sort of "remote control" to an ADDT behaviour, and I happily admit that the positive outcome of my experiment was pretty surprising to me -- I didn´t really expect this to be that simple ;-)

What did I learn from this ? Something pretty important :: the ADDT server behaviours are actually not carved in stone, so to speak -- means that the behaviour code that´s generated in a dynamic page can indeed be accessed and manipulated from the "outside", and this allows the inventive developer to do *much* more than he/she ever considered to be possible.

I hope that this tutorial has also managed to provide a comprehensable insight into something which many ADDT users tend to struggle with: PHP functions, their advantages, and their occasional pitfalls