• Home
• Tutorials
• Forums
• Reference
• Developers
• Advertise
• About Us

Creating Dynamic Image Galleries

Creating a dynamic image gallery 
--------------------------------


Please Note that this is one of three tutorials
included in the Women Application that i created
that can be seen in action at 

http://webdev.webleicester.co.uk/test/women/

and is freely downloadable here 

http://webdev.webleicester.co.uk/test/women.zip

One of the first things people usually start to think about when they start coldfusion tends to be an Image gallery, wether its for personal sites for online games or more for a shopping cart on an e-commerce site, it's a very sought after method.

This tutorial will be looking at how to make an image gallery, where you will be able to upload a full sized image, and it automatically resize it to create a thumbnailed picture for you.

For ease of use, the image will be stored in a directory NOT in the database itself,

First off download the tutorial files here http://webdev.webleicester.co.uk/test/women.zip It contains a C++ CFX Tag that you will have to install on the server, it is free and commercially available to use tag, If you are not sure how install the tag, please read the documentation with the CF Server software or just search the net

--------------
The Database
--------------

Database name: Women

Table names : Women
                    Categories
                    Nationality
                    Votes

Women : 
-------
    id = Autonumber
    Name = Text
    dob = Text
    shot_desc = Text
    Appearance = Text
    Category = Numeric
    Nationality = Numeric
    thumb_img = Text
    full_img = Text
    views = numeric (Required : YES , Default 0)
    date_created = numeric

Categories :
------------
    cat_id = Autonumber
    category = Text


Nationality :
-------------
    nat_id = Autonumber
    Nationality = Text

Votes :
-------
    vote_id = Autonumber
    woman_id = int (4)
    one = int (4)
    two = int (4)
    three = int (4)
    four = int (4)
    five = int (4)
    avg_vot = decimal
    totalvotes = int (4)
-------------------------------------


Application.cfm
---------------
As ever, the application will have recurring details so we don't
have to keep repeating info over and over and if anything changes
we just change the one source, not have to change every single file

the application will look like this

<CFAPPLICATION NAME="women" sessionmanagement="yes">

<!--- the name of the DB --->
<CFSET APPLICATION.DSN = "women"> 

<!--- default URL of Thumbnails --->
<CFSET APPLICATION.thumb= "http://yoururl/women/images/thumbs">

<!--- default URL of Full Images --->
<CFSET APPLICATION.full= "http://yoururl/women/images/full">

<!--- default Physical Location of Thumbnails --->
<CFSET APPLICATION.thumbpath= "c:\yourdir\women\images\thumbs">

<!--- default Physical Location of Full Images --->
<CFSET APPLICATION.fullpath= "c:\yourdir\women\images\full">

<!--- default URL of Admin directory --->
<CFSET APPLICATION.admin= "http://yoururl/women/admin">

<!--- default URL of Index.cfm --->
<CFSET APPLICATION.index= "http://yoururl/women/index.cfm">

<!--- default ROOT of Site --->
<CFSET APPLICATION.root= "http://webdev.webleicester.co.uk/test/women">

<!--- default URL or Stats --->
<CFSET APPLICATION.stats= "http://webdev.webleicester.co.uk/test/women/stats/index.cfm">

<!--- default URL Location of stats --->
<CFSET APPLICATION.statsurl= "http://webdev.webleicester.co.uk/test/women/stats">

<!--- default Physical location of stats --->
<CFSET APPLICATION.statsdir= "e:\webdev\test\women\stats">


Now we have the Application done, lets show you how we will
add the women that will populate our pages!!!


Start.cfm
---------
(/women/admin/start.cfm)
here we have the starting point to adding the details of the
first person we are going to add, 
the form consists of

    Name (text box called 'name')
    Date Of Birth (text box called 'dob')
    Short Description (text box called 'short_desc')
    Category (Drop down box, Film = 1, TV = 2, SuperModel = 3, Music = 4, Amateur = 5, called 'category')
    Nationality (Drop down box, American = 1, British = 2, Australian = 3, Japanese = 4, called 'nationality')

uses <FORM ACTION="#application.admin#/step2.cfm" METHOD="Post">


Step2.cfm
---------
(women/admin.step2.cfm)
Now we add to the database what we put from the last form

---
<CFQUERY NAME="AddWoman" DATASOURCE="#application.dsn#" debug>
    INSERT INTO women (
                                name, 
                          dob, 
                          short_desc,
                          app,
                          cat,
                          nat,
                          date_created
                        )
                        VALUES (
                          '#Form.name#',
                          '#Form.dob#',
                          '#Form.short_desc#',
                          '#Form.app#',
                          '#Form.cat#',
                          '#Form.nat#',
                          #CreateODBCDateTime(Now())#
                        )
</CFQUERY>
---

then we get the last id by doing this

---
<cfquery datasource="#application.dsn#" name="GetLastID">
    SELECT MAX(id) as lastID
    FROM women
</cfquery>
---

then we add to the votes table so we can make sure
the lady in question can be voted for!!

---
<cfset woman_id = #GetLastID.lastID#>

<CFQUERY NAME="AddVotes" datasource="#application.dsn#">
    INSERT INTO votes (woman_id)
    VALUES ('#woman_id#')
</CFQUERY>
---

Now we can just put in the form so we can upload the file

---
<CFOUTPUT QUERY="GetProducts">
    <FORM ACTION="#application.admin#/finish.cfm" enctype="multipart/form-data" METHOD="Post">
        File : <INPUT type="File" name="filename" size="20"><br>
        ID : <select size="1" name="id">
                  <option value="#GetLastID.LastID#">#GetLastID.LastID#</option>
              </select>
---



Finish.cfm
----------
Now we upload the file from the last page


---
<CFFILE action="UPLOAD"
            filefield="filename"
            destination="#application.fullpath#"
            nameconflict="MAKEUNIQUE">

<CFFILE action="upload"
            FILEFIELD="FileName"
            DESTINATION="#application.thumbpath#"
            NAMECONFLICT="makeunique">

<CFSET filepath="#application.thumbpath#">
<CFSET file_to_thumbnail = "#filepath#\#file.serverfile#">
<CFSET thumb_filename = "#filepath#" & "\thumb_" & "#file.serverfile#">
<CFSET thumb_displaypath = "#application.thumb#" & "/thumb_" & "#file.serverfile#">
---

MAKEUNIQUE, means that if you are trying to upload a file, but there is already a file with that name, it will just give it the file name and then the next number after ie, you are uploading image.jpg, if image.jpg exists, it uploads it as image1.jpg

So now what we've done is uploaded two files one to /images/thumbs and /images/full but at the moment, they are both the full size so now we resize it

---
<CFX_IMAGE ACTION="IML"
         FILE="#file_to_thumbnail#"
         COMMANDS="
                ## thumbnail sizes
                setvar x=100
                setvar y=100

                ## Resizing to thumbnail -- defaults to 100 wide
                resize <x>

                ## write it!
                write #thumb_filename#">
---

then we update the database with the locations

---
<CFQUERY NAME="AddFullImage" DATASOURCE="#application.dsn#" debug>
    UPDATE  women 
    SET       full_img='#application.full#/#file.serverfile#'
    WHERE   id='#Form.id#'
</CFQUERY>

<CFQUERY NAME="AddThumbimage" DATASOURCE="#application.dsn#" debug>
    UPDATE     women 
    SET          thumb_img='#application.thumb#/thumb_#file.serverfile#'
    WHERE      id='#Form.id#'
</CFQUERY>
---

at the very end of all of this you should do this

---
<CFFILE ACTION="DELETE" FILE="#filepath#\#file.serverfile#">
---

so we delete the image in /images/thumbs that was fullsized


now we can output the information, and show the two images!!

And this brings us to the end of the tutorial, the zip file has a complete package where you can Add/Edit the women View All women or view women by nationality or category View how many times a woman has been seen Vote for the woman in question or create a dynamic bar chart based on page hits or average votes!

The main use that this has been is more for a shopping cart the reason there is no removal code for images and women is that in an ecommerce site situation, removing products would tamper with older orders, so if you need, for whatever reason to go back to that order, it can cause problems because the products they ordered long ago are no longer there its best to create a Visible column so that anything with 1 will not be shown.