Create thumbnail images

How do you create a thumbnail images

With the Smart Image Processor Extension you can create and save thumbnails of your images.
In this tutorial we will show you step by step how to create thumbnails of your uploaded images.

This is how the user will view the process:

1. The user requests a page from the server.

2. The user selects the image to be uploaded from his/her computer and clicks submit.

3. The image and thumbnail are saved in a designated folder on the server.

Page processing flow: 1. Images are saved in a folder 2. Images are resized 3. Images are saved with their original name, but end with .jpg 4. Thumbnails are created with the original name of the image and a suffix.

How to do it

1. Open page

   Open your asp file where you need to apply Pure ASP Upload Server Behavior and Smart Image Processor Server Behavior.

2. First apply the Pure ASP Upload 2.13 behavior

   Make sure you have a form with a File Upload Field and a Submit button.
   
   
   
   1. From the Server Behaviors panel select DMXzone - Pure ASP Upload 2.13.
   2. Browse to the folder where the images will need to be uploaded to.
   3. If you choose the option Prefix With Full Path, you do not need to mention the folder when you are trying to display the thumbnail.
   4. Leave Go To After Uploading empty, since we are not done after this.
   5. Click CTRL-S to save the file.
   
   

3. Find the Smart Image Processor panel

   You will find the Smart Image Processor panel under Server Behaviors. Click on the + sign, DMXzone, Smart Image Processor.
   
   

4. Open the Smart Image Processor panel

This will Open the Smart Image Processor Panel.



In Use Server Component select the server component that is installed on the server that you are using. If you don't know or are not sure, leave it on Auto Detect.

In Upload Folder you can browse to the folder where the files are being uploaded.

Check the "Make Thumbnails" option and enter Width of the required thumbnails. The image will adjust to that size with the aspect ratio in mind. If you want the image to resize to a certain width and height fill in the proportions for both widht and height and uncheck the Keep Aspect Ratio option.

The image will be resaved as a jpeg. You can adjust the quality of the image. Since this will be a thumbnail you can make the quality lower. 70 is a normal quality for thumbnails.

Create a Suffix for your thumbnail images, so your thumbnail will be saved with the regular image. All thumbnail filenames will end with this suffix. If you change the default suffix, make sure you remember what suffix you did use when you want to display the thumbnail on your page.

In After resize, Go To enter the URL of the page where the page should be redirected after it has been processed.

NOTE: You can combine the Resize Uploaded Images and Make Thumbnails so those excute at the same time by checking on both options. This will result that original images get resized and thumbnails are created.

5. Click ok

To apply the Smart Image Processor behavior click OK.
A message box appears to tell you that the file called incResizeAddOn.asp has been copied to your site in the ScriptLibrary folder. Click OK.

6.  Save the file in your site

 You will need to save the file in your site.