Make thumbnails and save filenames in database.

How do you make thumbnails and save the filenames in your database.

With the Smart Image Processor Extension you can make thumbnails of your uploaded images.
This tutorial will show you how to upload the images with Pure PHP Upload, make Thumbnails with Smart Image Processor and insert the filenames of the images into a database.

What will it look like when you are using it?

1. The user will request a page from the server that will enable him/her to upload an image.

2. The user selects the image from his/her computer and submits it.

3. The page is uploaded to the server where the thumbnail is created , and put into the folder you specified.

4. The filename is inserted into the database.

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. 5. Filenames are saved in the database.

How to do it

1.  Open page

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

2.  First create a dataset

1. From the Server Behaviors, choose Dataset and name it Dataset1.



2. Select the datasource connection.
3. In the dropdown select the Table.
4. In Columns select the fields.
5. Click OK.
6. Press CTRL-S to save your file.

3.  Apply Insert Record Behavior

Before using Pure ASP.NET Upload we need to add the Insert Record Behavior.
Create a form on your page first.

1. From the Server Behaviors panel, choose the Insert Record Behavior.
2. Select the Connection and the Table the file names of the images need to be saved into.
3. In After Inserting, Go To: browse to the file that you should be redirected to.
4. Select the form where the values are coming from.
5. The Form Elements are nicely lined up.
6. When you are finished click Ok.
7. Press CTRL-S to save your file.



4.  Now apply the Pure ASP.NET Upload 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.NET Upload.
   2. Browse to the folder where the images will need to be uploaded to.
   3. If you check the option for 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.
   
   

5.  Find the Smart Image Processor behavior panel

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

6.  Open the Smart Image Processor panel

This will Open the Smart Image Processor Panel.



Check the "Make Thumbnails" option and enter Width & Height of the required thumbnails.
The image will adjust to that size. You can choose if you would like to keep the aspect ratio.

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 or Prefix for your thumbnail images, so your thumbnail will be saved with the regular image. All thumbnail filenames will end with this suffix or start with the prefix. If you change the default, make sure you remember what you used when you want to display the thumbnail on your page.

In After resize, Go To leave it empty.

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

7.  Click ok

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

8.  Save the file in your site

 You will need to save the file in your site. Now you are ready to go!