close ad
 
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

Resizing images on upload

Tutorial created by Ray Borduin, WebAssist

Categories: Data Bridge

rating
3 ratings | Sign in to rate this tutorial | View comments

For most online stores and image galleries, it is common to have multiple sizes of the same image, for viewing on different pages. For example, in the search results page, you may want a small (thumbnail) graphic displayed, but on the detail page, you will want a larger image to show.

With CSS Form Builder 2, you can use the File Manipulation feature to configure a single image file upload behavior, to output to your server as multiple files of different sizes. This How To shows you how you can add image upload functionality, that will create thumbnail and detail graphics from one image.

next sectionarrow down
arrow downWhat you need to start

  1. Dreamweaver CS3 or later
  2. Data Bridge or CSS Form Builder 2 Installed
  3. PHP page

next sectionarrow down
arrow downCreate the file upload field

The first step when using the File Upload behavior is to create the file field on your page.

  1. In Dreamweaver, open the page you wish to insert the file field to.
  2. Place your cursor where you wish to insert the file field.
  3. With your dynamic page already open, choose the File field option from Forms category of the Insert bar.
  4. In the ID field enter upload.
  5. In the Label field enter Upload File.
    These are recommended IDs and Labels, feel free to specify something different.
  6. Click OK.
  7. If your cursor was not already within a form tag, you will be asked to create one. Click Yes in this case.

Step 1: Create the Submit button

If you don't already have a Submit button on your page, you will want to create one.

  1. Place your cursor below the File field to create a Submit button.
    Place your cursor below the File field to create a Submit button.

  2. Choose the Button option from the Forms category of the Insert bar.
  3. In the ID field enter submit.
  4. Leave the Label field blank.
  5. Click OK.

next sectionarrow down
arrow downAdding the Upload Behavior

The next step is to apply the File Manipulation Upload behavior to your page.

  1. From the WebAssist menu choose File Manipulation > Upload.
  2. From the Trigger menu, choose Button: Submit pressed.
  3. From the File Field menu, choose the File field, upload, that we just created.
  4. Choose the Web images only checkbox. This will enable a number of image resize options in Step 2 of the wizard.
    If you wish to have all images converted to a specific file format, choose the file format of your choice.
  5. If you do not wish to convert the image format, choose Keep existing format.
    If you chose JPEG and PNG, specify the quality of the images you wish.
  6. Click Next to proceed to Step 2.

next sectionarrow down
arrow downImage Options

For this example, we are going to configure the upload to create two files from the one image file that is uploaded. One file will be the detail graphic, the other will be the thumbnail graphic.

Step 1: Configuring the detail graphic output settings

  1. In the Upload folder field, choose the Browse icon and select the folder you wish to have your detail images upload to.
    Typically, this will be something like images/detail/.
  2. From the File field, append the [FileName] text with _detail.
    This will add _detail to each detail image filename.
  3. From the resize menu, choose the resize option that best suits your detail images.
    Typically, you will want to review the area of your website where these images will display, and determine what height and width would be most appropriate.

    The following options are available.

    1. Fit to box - will resize the image to fit within a specified height and width.
    2. Fit width - will resize the image to fit within a specified width.
    3. Fit height - will resize the image to fit within a specified height.
    4. Fixed width and height - will resize all images to a specified width and height while maintaining the width-to-height ratio.


  4. Specify a width and height for your image to be resized to.
    You should base the width and height on the area that the detail image will display.
  5. If using the Fixed width and height option, choose a fill color from the Fill color menu.

arrow downConfiguring the thumbnail graphic output settings

With the settings specified for the Detail graphic, you will want to repeat these steps for the thumbnail graphic. However, for resizing your thumbnail, you will want to specify much smaller dimensions. By default, there will be recommended settings for the thumbnail graphic provided already.

  1. Under File settings, choose the Add ( ) icon to specify another file output.
  2. In the Upload folder field, choose the Browse icon and select the folder you wish to have your thumbnail images upload to.
    Typically, this will be something like images/thumbs/.
  3. From the File field, leave _thumb appended to the filename.
  4. From the resize menu, choose the option that best suits where you intend to display the thumbnail images.
    By default, the Fixed width option will be recommended.
  5. Specify a width and height for your image to be resized to.
    By default, a width of 120px will be recommended.
  6. If using the Fixed width and height option, choose a fill color from the Fill color menu.
    This will fill any area that is not filled by the image due to resizing.
  7. When you are finished, click Finish.
  8. Press Ctrl (Cmd) S to save your page.


You have now completed adding the Upload functionality to your page. Upload your files to your live server and perform a test by uploading an image file. Once successfully uploaded, you should have two different image files stored on your server, both with different filenames and file sizes.

When resizing images, you should ensure that the original image is larger in dimensions than the resize dimensions specified for your detail images.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating
3 ratings | Sign in to rate this tutorial

Venosites: 10 Years, 1 Week, 1 Day, 12 Hours, 39 Minutes ago

If I upload a big image 5,6MB, and i don't make changes, there is no problem an the image wil be uploaded, if i make changes it fails with images bigger than 3MB, where to I need to make the changes to upload and crop bigger images?

rating

Team WebAssist: 10 Years, 1 Week, 21 Hours, 34 Minutes ago

Venosites, this is a server configuration issue. I think we are helping you with this in the forums now...

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Everything else!

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

go to page top