Dynamic Image Viewer/Selector
A very cool 'Image Viewer/Selector' that incorporates the ability for a user/admin to upload their own photos/images, include those in my 'Viewer/Selector' automatically, and then allows them to select that image for use in their article.
In creating dynamic and self-updateable websites for many businesses and organizations, one issue that I had always stumbled on was a way for users to have the ability to select images to go along with the news articles they were creating. So I created a very cool 'Image Viewer/Selector' that gave them that flexibilty. Once I tackled that issue, I realized I had a workable solution but it still required me adding images by hand to that 'Selector'. To truly make this dynamic I would need to incorporate the ability for the user/admin to upload their own photos/images, include those in my 'Viewer/Selector' automatically, and then allow them to select that image for use in their article. Dynamic Image Viewer/Selector
(Page Two)

STEP ONE: Creating The DB and Upload Page

OK, our first goal is to create the database where our image path and details will reside, and the upload form to get the information into that DB. I have attached a simple version of the required DB below if you don't have much experience in Access, but it shouldn't be difficult.

(Remember, this tutorial creates the 'Viewer/Selector' page and the upload page, NOT the 'News Creation' page. Use this to add functionality to your existing news pages.)



DB SETUP
1.) Open Access and create a new DB calling it CCMDB.mdb. Create a table titled ImageViewer and create the following columns with the same titles as shown in the image below:

EXAMPLE:
Make sure that your Field Names are the same as shown to avoid confusion for this tutorial.

IMAGE_TITLE: This field will be used to store a user/admin defined title for the image to aid in use.
IMAGE_PATH: This field is where the PureASP Upload extension will place the uploaded image's physical path.
DOWNLOAD SAMPLE ACCESS 2000 DB


2.) Now setup your DSN connection in DWMX so that we can utilize the DB contents going forward - title your DSN CCMDB and your MX Connection connCCMDB.

If you are unfamiliar with this process check out these links:
Setting Up A DSN In Windows
Connecting to a Database




CREATING IMAGE UPLOAD PAGE/FORM

Next, we are going to create a page with a very simple image upload form utilizing the PureASP Upload extension.

1.) Create a new ASP page and title it image_upload.asp, and a blank page called view_images.asp which will be our redirect page.
2.) Create a simple form containing the following fields that are found in our DB - a text field for Image Title, a file field for Image Path and a 'Submit' button.
• (To insert these items, simply select 'Insert' > 'Form Objects' then select each item.)

Form Name = image_upload
Image Title Text Field = image_title
Image Path File Field = image_path



3.) Go ahead and create a folder in your website called uploads that will be the destination for our images.
4.)
Now we need to apply the PureASP Upload extension to this form:

• Start by expanding your 'Application' tab on the right hand side and selecting 'Server Behaviors'.
• Press the (+) sign and then select 'UDZone' > 'Pure ASP Upload 2.09'
• Fill in the following information shown below, then press 'OK'.



(NOTE: We are not going to use any of the settings on the 'Advanced' section of this extension for this tutorial, but I suggest using them under normal circumstances to control the size of images uploaded for a more consistent and controllable environment.)


5.) Now we need to setup the 'Insert Record' behavior to add the DB-insert code:

• In the 'Application' tab on the right hand side select 'Server Behaviors'.
• Press the (+) sign and then select 'Insert Record'
• Fill in the following information shown below, then press 'OK'.



Once these steps are done, you should have a working image upload form.


NEXT PAGE - STEP TWO: Creating The Viewer/Selector Page



Jeremy Conn

Jeremy ConnJeremy Conn has been involved in web development and graphic design since 1995. Interested in art & music all his life, Jeremy was drawn into web design after being given a copy of the original Dreamweaver product. Since that time, Jeremy has started Conn Creative Media, a design agency that he runs with his beautiful wife, Andrea, from Portland, Oregon. "I learned much of what I know about DW development from sites like DMXZone, so I feel strongly about giving back and doing my part to keep this amazing community running. Much thanks to George Petrov and the whole DMXZone team." - Jeremy

See All Postings From Jeremy Conn >>

Place your comment about Dynamic Image Viewer/Selector




You must me logged in to write a comment
Comments
RE: Comments
April 28, 2003 by lynnette Browne
I've read it and followed through to the end. Works just as shown in the snapshots. I wouldn't class this as intermediate though, but I guess it can be. Intermediate would be more like i.e text text tex ... readmore(<- link) or the image is activated to popup to a larger view. But i must say, I really liked it, it gave me some ideas (i'm in a block right now). like porting it to php, jsp and or aspx, the possiblities are endless. Nice and really working tutorial. (4 stars, because i do not really think it was intermediate).
Same tutorial in Php
January 30, 2003 by Max larokka

It would be great to get the "same" tutorial but applied to DMX/Php/Mysql(PhpmyAdmin)

Maybe also adding how to make a "detail page" too

It would be so useful

Please

Thank you so much in advance

Max ;)

RE: Link does not work
January 17, 2003 by Jeremy Conn
Fixed the link, so the DB is now downloadable.
RE: Comments
January 16, 2003 by Ian Anderson

Good stuff. Nice solution to a recurring problem.

See all 10 Comments