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 Three)

STEP TWO: Creating The Viewer/Selector Page

Currently we have our form to add images to our website and to store the image's path and title in our DB. Now lets create the page that will allow us to display those images and titles for the user to see.

(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.)



CREATE THE VIEWER PAGE
1.) Open up the blank ASP page titled view_images.asp.
2.) Humor me and create a simple text link at the top of this page that links to the image_upload.asp page... thanks.
3.)
Now we want to setup a recordset that will display the contents of our ImageViewer table in Access.

• Start by expaning your 'Application' tab on the right hand side and selecting 'Bindings'.
• Press the (+) sign and then select 'Recordset (Query)'
• Fill in the following information shown below, then press 'OK'.



4.) Now we need to setup a repeat region on our page to show our images and their titles.

• Create a table with 1 column and 2 rows.


• Place your cursor into the left table cell, then select 'Insert' > 'Image' from the DW menu.
• Since we want this image to be dynamic and not static, select 'Data Sources' instead of the default 'File System' at the top.
• Now select our source, which will be the 'Image_Path' data source from our recordset as seen below - then press 'OK'.



• Now we need to place our cursor in the right table cell and select 'Insert' > 'Application Objects' > 'Dynamic Text' from the DW menu.
• Select our title data source 'Image_Title' from the recordset and then press 'OK'.



• This should leave us with the result below which should show a text link to the upload page, then pull the images and titles from our DB'



5.) Now we need to make this table a 'Repeat Region' so that all the images/titles from the DB will be displayed.

• Select the table and expand the 'Application' tab on the right hand side and select 'Server Behaviors'.
• Press the (+) sign and then select 'Repeat Region'
• Make sure you have the 'rsImages' recordset selected, choose 'All Records', then press 'OK'.


Our view_images.asp page should now accurately reflect a dynamic listing of images that have been uploaded to the DB. Go ahead and add some images with the form and make sure it is working OK.





NEXT PAGE - STEP THREE: Making The Viewer Images Links



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 >>

Comments

Comments

October 28, 2002 by Jeremy Conn
I am interested in what people think and if they have gone through this tutorial yet.

RE: Comments

October 29, 2002 by Jason Olkowski
I think this is well written Jeremy.  I went through it and it flows well and all makes sense. I can see a lot of applications for this.  -Thanks.

RE: Comments

January 13, 2003 by Justin Pardee

Great tutorial!! Where did you get all your images from for your demo? There's a great variety, and obviously they need to be royalty-free. Again- Great job!
-Justin

RE: RE: Comments

January 13, 2003 by Jeremy Conn
Those images were all royalty-free images purchased through Digital Vision. (http://www.digitalvisiononline.com)
See all 10 Comments

You must me logged in to write a comment.