Please start any new threads on our new site at https://forums.sqlteam.com. We've got lots of great SQL Server experts to answer whatever question you can come up with.

 All Forums
 Development Tools
 Other Development Tools
 Creating an ASP image gallery

Author  Topic 

Eagle_f90
Constraint Violating Yak Guru

424 Posts

Posted - 2005-09-10 : 20:28:11
I am trying to creat an image gallery in ASP that pulls the image information from a database. My problem is I can not figure out the right way to display 4 images in a table row then start the next set of 4 in the next row. Can anyone tell me what I am missing?

<%do while not rs.eof%>
<tr>
<td><img src="images/ffxi/<%response.write trim(rs("subset")) & "/thmb/thmb-" & trim(rs("image"))%>" alt="<%trim(rs("alttext"))%>" /></td>
<td><img src="images/ffxi/<%response.write trim(rs("subset")) & "/thmb/thmb-" & trim(rs("image"))%>" alt="<%trim(rs("alttext"))%>" /></td>
<td><img src="images/ffxi/<%response.write trim(rs("subset")) & "/thmb/thmb-" & trim(rs("image"))%>" alt="<%trim(rs("alttext"))%>" /></td>
<td><img src="images/ffxi/<%response.write trim(rs("subset")) & "/thmb/thmb-" & trim(rs("image"))%>" alt="<%trim(rs("alttext"))%>" /></td>
<td><img src="images/ffxi/<%response.write trim(rs("subset")) & "/thmb/thmb-" & trim(rs("image"))%>" alt="<%trim(rs("alttext"))%>" /></td>
</tr>
<%rs.movenext
loop%>


--
If I get used to enving others...
Those things about my self I pride will slowly fade away.
-Stellvia

robvolk
Most Valuable Yak

15732 Posts

Posted - 2005-09-10 : 21:09:05
  1. Well, you've got FIVE table cells there, for one thing...

  2. You aren't doing an rs.MoveNext between any of them, so you're just display the same image(s) four (sorry, five) times...

  3. This is going to become very slow once you start reaching 50-75 images on a page ... rs.MoveNext is half a step above tectonic drift

  4. Tables are probably NOT a good layout choice for this, in fact they are probably THE WORST choice. Unless you absolutely must align these images with some kind of header, or they are of wildly varying sizes, you are better off using this approach:
http://www.alistapart.com/articles/practicalcss/

The other reason for avoiding tables is some day, you WILL want to go to 3 columns, or 5 (sorry, four) and you'll end up rewriting ASP code to do it. The article describes a method that would require nothing more than changing a CSS style file. It can also dynamically wrap images based on window size (or not, it's your choice) which a table cannot do.

And with a little extra work, you could program it so that the ASP code can read the setting from the database, and you won't have to rewrite ANY code or CSS.
Go to Top of Page

Eagle_f90
Constraint Violating Yak Guru

424 Posts

Posted - 2005-09-10 : 21:33:01
I am aware of peoples dislike for using tables I personaly like them, but lets put aside our differant layout code methodes here and lets stop teasing me on doing one two many copy and pastes. I come here for help not redicule, but if the people hear are sick of me just tell me and I will find other places that are willing to help. I am, unfortunaly, not very good with ASP like the rest of the people here are. If I add an rs.movenext between the td calls I will eventualy get the error '80020009' once all the images are displayed. What would your suggest way of avoiding the slow down that is supposed to happen when I start displaying 50 or more images?

--
If I get used to enving others...
Those things about my self I pride will slowly fade away.
-Stellvia
Go to Top of Page

robvolk
Most Valuable Yak

15732 Posts

Posted - 2005-09-10 : 22:56:24
The method I use (no pun intended) is the GetString method of the ADO Recordset object. It will convert an entire recordset to a string, and you can specify the column and row separators you'd like. It is also infinitely faster than MoveNext and Response.Write. If you were putting one image per table cell, you could do something like this:

rs.Open "select '<img src=""images/ffxi/' + subset + '/thmb/thmb-' + image + '"" alt=""' + alttext + '"">' from myTable", cn
images=rs.GetString(,,"","</td><td>","")
... intervening code ...

<table><tr><td><%= images %></td></tr></table>

Normally you would never include HTML markup in a query, but in this case it lets you build the entire table with one command. Unfortunately, the requirement of having 4 cells per row won't allow this to work. Again, I'm suggesting that you avoid tables because it's making this more complicated than it needs to be. Here is a quick and easy CSS version that you can adjust far more easily than you think:

<%...code, open connection...
rs.Open "select '<img src=""images/ffxi/' + subset + '/thmb/thmb-' + image + '"" alt=""' + alttext + '"">' from myTable", cn
images=rs.GetString(,,"","","")
rs.Close
cn.Close %>


<html><head><style>
#thumbnails { float: left; width: 450; }
#thumbnails img { float: left; width: 100px; height: 100px; margin: 0px; border: 1px solid black; }
</style></head>
<body>... other HTML ...
<div id="thumbnails"><%= images %></div>
</body></html>


By changing the width for the thumbnails section, and for the img items (see bolded text above) you can change the number of images you display per row with simple ratios, plus a little extra for padding, borders, etc. And you completely avoid the problems with tables, loops, MoveNext, and EOF errors, not to mention reducing the ASP code to practically nothing (there are only 2 ASP code blocks in that example)

I would recommend at least trying it and see if the results are close to your expected output. It will take far less work getting this technique to look like a table than to write the code to create the table the way you want it.
Go to Top of Page

Eagle_f90
Constraint Violating Yak Guru

424 Posts

Posted - 2005-09-11 : 10:53:45
I actualy figured out a solution to my problem this morning before I checked my email to find your response. What I did was add a counter and when that counter reaches 4 it printed the tr commands.

<%do while not rs.eof%>
<td><a href="large.asp?<%=trim(rs("image"))%>"><img src="../../cgi-bin/fileprotection/fileprotection.pl?file=images/ffxi/
<%response.write trim(rs("subset")) & "/thmb/thmb-" & trim(rs("image"))%>" alt="<%trim(rs("alttext"))%>" /></a></td>
<%i = i + 1
if i = 4 then%>
</tr>
<tr>
<%i = 0
end if
rs.movenext
loop%>


I think I will be going with this solution (although your CSS one does look like it will work too), but can you explain why you think the rs.movenext will become slow after about 50 images so I can better understand your consern on that.

--
If I get used to enving others...
Those things about my self I pride will slowly fade away.
-Stellvia
Go to Top of Page

robvolk
Most Valuable Yak

15732 Posts

Posted - 2005-09-11 : 16:02:51
Rs.MoveNext is a cursor operation, and you've spent enough time on SQL Team to know what that means.

In addition to MoveNext, you're also doing repeated calls to Response.Write within the loop. Every time you reference an object, there is some overhead associated. It may not be much, but when multiplied by X iterations of a loop, it becomes significant.

The original example you posted has 20 object references, 15 function calls, plus a MoveNext and EOF check for EVERY ITERATION of the loop. Even a few microseconds of overhead for each of these will add up very quickly. The new version you've written, even though you've reduced the references and function calls, isn't much better. The "&" concantenation operator is notoriously inefficient in VBScript, and you've had to add an IF check as well.

The GetString example has 2 object references, period, regardless of the number of rows being processed, and all of the overhead is processed before the HTML is.
Go to Top of Page

Eagle_f90
Constraint Violating Yak Guru

424 Posts

Posted - 2005-09-11 : 18:19:00
I see what your saying now and have been thinking on it. I remember that last year a solution was given to a problem I had that pulled all the results into an array (I think it was an array) so I did not have to keep connecting back to the DB. Is this what the getstring does or am I thinking of another method? And would that elemenate alot of the slow down?

--
If I get used to enving others...
Those things about my self I pride will slowly fade away.
-Stellvia
Go to Top of Page

robvolk
Most Valuable Yak

15732 Posts

Posted - 2005-09-11 : 18:27:46
You're thinking of GetRows, and yes, it is just as fast as GetString. While it would be much faster than looping through a recordset, it's still looping, and the code is still more complicated than necessary.
Go to Top of Page
   

- Advertisement -