[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Display images three to a row, then new a row

Posted on 2004-10-24
18
Medium Priority
?
323 Views
Last Modified: 2013-12-24
I have a bunch of thumb nail images I'd like to display on a gallery page-  three to a row. Does anyone have any easy way for a beginner ColdFusion "programmer" to make this work?
0
Comment
Question by:davidawhite
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 4
  • 3
  • +1
18 Comments
 
LVL 21

Expert Comment

by:pinaldave
ID: 12397587
<cfoutput>
<table><tr>
<cfloop index = "ListElement"
   list = "yourthumbnaillist"
   delimiters = ",">
     
       <td>#indexthumb1#</td>
 <cfif index/3 eq int(index/3)>
        </tr>
</cfif>
</cfloop>
</tr>
</table>
</cfoutput>

you can run this over query... also this logic has one flow if there is last </tr> it will be not printed but your browser will do the job for you so you do not need to worry... actually, I have better logic at office which takes care of all this thing but it will confuse you so I am skipping it...for the moment... try this..

Regards,
---Pinal
0
 
LVL 14

Expert Comment

by:Renante Entera
ID: 12397836
Hello davidawhite!

You can also use do it in this manner :

<cfparam name="tempList" default="1st,2nd,3rd,4th,5th,6th,7th,8th,9th">

<table border="1">
<tr>
<cfloop index="i" from="1" to="#ListLen(tempList)#">
  <cfoutput>
    <td>#ListGetAt(tempList,i)#<td>
    <cfif i mod 3 eq 0>
      </tr><tr>
    </cfif>
  </cfoutput>
</cfloop>
</table>

Hope this helps.  Just try.


Goodluck!
eNTRANCE2002 :-)
0
 
LVL 21

Expert Comment

by:pinaldave
ID: 12397859
entrance2002 why you have better idea then me... :) (smiles)
Yes he is better suggestion!!!
--Pinal
0
Learn Veeam advantages over legacy backup

Every day, more and more legacy backup customers switch to Veeam. Technologies designed for the client-server era cannot restore any IT service running in the hybrid cloud within seconds. Learn top Veeam advantages over legacy backup and get Veeam for the price of your renewal

 
LVL 14

Expert Comment

by:Renante Entera
ID: 12397890
pinaldave thanks for your compliments ... :)

Actually, I'm just trying to help anybody in here as long as I have the knowledge to share with ...


Regards!
eNTRANCE2002 :-)
0
 
LVL 35

Expert Comment

by:mrichmon
ID: 12401218
Okay do you want fixed 3 per row?

If so then you use a table, but I would use this solution instead:

<table border="1">
<tr>
  <cfoutput query="yourquery">
    <!--- print cell --->
    <td><img alt='Picture' src="#yourfield#"><td>
   <!--- determine if we need to end row --->
    <cfif yourquery.currentRow mod 3 eq 0>
      </tr>
    </cfif>
    <!--- determine if we need to start a new row --->
    <cfif yourquery.currentrow LT yourquery.recordcount>
       <tr>
    </cfif>
  </cfoutput>
     <!--- complete table if necessary --->
    <cfif yourquery.recordcount mod 3 NEQ 0>
      <cfloop index="n" from="#evalutate(yourquery.recordcount mod 3)#" to="3">
           <td>&nbsp;</td>
      </cfloop>
       </tr>
    </cfif>
</table>

The difference is that it also completes partial rows if you don't have a multiple of 3 also you nevver end up with invalid html like you could with either of the above solutions.


 
0
 
LVL 35

Expert Comment

by:mrichmon
ID: 12401262
Or if you don't want 3 fixed per row this will give you as many as will fit per row on each person's screen:

(good for galleries)

div.container {
  border: 2px dashed #333;
  background-color: #fff;
  }

div.spacer {
  clear: both;
  }

div.float {
  float: left;
  width: 120px;
  padding: 10px;
  }
 
div.float p {
   text-align: center;
   }

<div class="container">

<cfoutput query="yourquery">
<div class="float">
  <img alt='Picture' src="#yourimagefield#"><br>
  <p>#yourcaptionfield#</p>
</div>
</cfoutput>


<div class="spacer">
  &nbsp;
</div>

</div>
0
 
LVL 35

Expert Comment

by:mrichmon
ID: 12401267
More details of this CSS method with examples are here:

http://realworldstyle.com/thumb_float.html
0
 

Author Comment

by:davidawhite
ID: 12403333
Sorry I forgot one thing. I want each image in the row to be in it's own TD. Sorry I didn't include that from the beginning.
0
 
LVL 35

Expert Comment

by:mrichmon
ID: 12404517
Yes - in my table example each image is in its own td
0
 
LVL 14

Expert Comment

by:Renante Entera
ID: 12406575
Hello mrichmon!

I think you need to review your posted code.

On this line :
    <!--- determine if we need to start a new row --->
    <cfif yourquery.currentrow LT yourquery.recordcount>
       <tr>
    </cfif>

Most probably, it will always return true since every "currentrow value" is less than "query.recordcount value" unless it reaches to the maximum "currentrow value" which is also the "query.recordcount value".  So, the result would be one column per row of the table.

Perhaps, you should have to insert the tag "<tr>" on this line :
   <!--- determine if we need to end row --->
    <cfif yourquery.currentRow mod 3 eq 0>
      </tr>
      <tr> <!--- Inserting it here --->
    </cfif>

Actually, it's the same concept with my posted comments.

Just correct me if I'm wrong ...


Regards!
eNTRANCE2002 :-)
0
 
LVL 35

Expert Comment

by:mrichmon
ID: 12412026
Whoops.

You are correct that I made a mistake, but that is not the solution either as that will cause a new row even when out of records.

This is what it should have been...

<table border="1">
<tr>
  <cfoutput query="yourquery">
    <!--- print cell --->
    <td><img alt='Picture' src="#yourfield#"><td>
   <!--- determine if we need to end row --->
    <cfif yourquery.currentRow mod 3 eq 0>
      </tr>
 <!--- determine if we need to start a new row --->
    <cfif yourquery.currentrow LT yourquery.recordcount>
       <tr>
    </cfif>
    </cfif>
  </cfoutput>
     <!--- complete table if necessary --->
    <cfif yourquery.recordcount mod 3 NEQ 0>
      <cfloop index="n" from="#evalutate(yourquery.recordcount mod 3)#" to="3">
           <td>&nbsp;</td>
      </cfloop>
       </tr>
    </cfif>
</table>
0
 
LVL 35

Expert Comment

by:mrichmon
ID: 12412041
Hit return early by accident....

What I did was move my if test INSIDE the <cfif yourquery.currentRow mod 3 eq 0> test so that we end the row and then only create a new row if there are more records left.

Thanks for pointing out the mistake..
0
 

Author Comment

by:davidawhite
ID: 12426243
Thanks for all your guys help, sorry it took me so long to get back to this (family emergency), anyway I tried it and got the following error message:

Method "evalutate" with 1 arguments is not in class coldfusion.runtime.CFPage  
 
 
The Error Occurred in C:\CFusionMX\wwwroot\Business\Ken Meyers\gallery1.cfm: line 53
 
51 :      <!--- complete table if necessary --->
52 :     <cfif images.recordcount mod 3 NEQ 0>
53 :       <cfloop index="n" from="#evalutate(images.recordcount mod 3)#" to="3">

Any ideas? Thanks- Dave
 
0
 
LVL 35

Expert Comment

by:mrichmon
ID: 12426393
Try setting a variable first like this :

<cfset temp = images.recordcount mod 3>

Then <cfloop index="n" from="#temp#" to="3">
0
 

Author Comment

by:davidawhite
ID: 12426724
Have to admit I'm new to this and haven't used loops much at all. After inserting the cfset temp tag would the section of code that produced the error look like this:

51 :      <!--- complete table if necessary --->
52 :     <cfif images.recordcount mod 3 NEQ 0>
53 :     <cfloop index="n" from="#temp#" to="3">

Thanks- Dave
0
 
LVL 35

Accepted Solution

by:
mrichmon earned 2000 total points
ID: 12426788
Yes.  And the cfset should go inbetween the cfif and cfloop lines....
0
 

Author Comment

by:davidawhite
ID: 12427389
That worked perfect, thank you so much for your help. This is one of those things I don't quite understand everything in the code but need to get it done right now, I hope some day soon to read more so I can understand what I'm doing instead of just getting it to work. I don't know what the mod 3 stuff is but I'll read up on it as soon as possible. Thanks again- Dave
0
 
LVL 35

Expert Comment

by:mrichmon
ID: 12428075
Oh it is easy.

Let me explain to you...


(NOTE I had a typo - the loop should end at 2 not 3 <cfloop index="n" from="#temp#" to="2"> - see below for why)


number mod 3 says take number and divide by 3.  Instead of returning the result return the remainder.

Here are some examples:
10 mod 3 would be 1 (since 3 goes into 10 3 times and has 1 left over)
9 mod 3 would be 0 (since 3 goes into 9 3 times and has 0 left over)
2 mod 3 would be 2 (since 3 goes into 2 0 times and has 2 left over)
16 mod 3 would be 1 (since 3 goes into 16 5 times and has 1 left over)


SO what the code does is logic like this:

Create the top of the table

Next Create the start of the first row

Now start looping over each record
    Print the current record in a cell
    If the current record number is divisible evenly by 3 (mod 3 = 0) then we know there are already 3 images in this row so end row
    Now we need to test if there are any records left
    If there are records left (currentrow < recordcount) then we need to start a new row for the remaining images
 End Loop

Notice that the last thing we did was create a new row if there were images left and then inserted the last image.

This means that if there were 4 images it would look like this:

<table>
<tr>
<td> image 1</td>
<td> image 2</td>
<td> image 3</td>
</tr>
<tr>
<td> image 4</td>


Notice that if we just stuck a </table> then we would have invalid HTML because the row would not be complete.

So some people say just do </tr></table>  Which is valid HTML, but now you are missing cells from the last row ( 1st row has 3 cells and last row only has 1).  THis can cause problems in some browsers.

SO that is where the last part comes in.

<!--- complete table if necessary --->
    <cfif yourquery.recordcount mod 3 NEQ 0>
       <cfset temp = images.recordcount mod 3>
      <cfloop index="n" from="#temp #" to="2">
           <td>&nbsp;</td>
      </cfloop>
       </tr>
    </cfif>
</table>

This part says if the recordcount mod 3 is not 0 - ie the total numer of images is not evenly divisible by 0 (in this case 4 mod 3 = 1 so it is not evenly divisible) then we need to add some blank cells to complete the table.

The loop says go from the result of the division (in this case 1) up to 2 - note the reason that it is 2 here is that 3-1 = 2 and modular arithmetic (finding remainders) is always from 0 (no remainder) to 1 less than the target number (because a number always has a remainder of 0 when divided by itself).

So it says start at the current remainder... in our case 4 mod 3 = 1 and create any additional cells we need.  SO we get:

<td>&nbsp;</td><!--- when n = 1 --->
<td>&nbsp;</td><!--- when n = 2 --->

now we are at the end of the loop.  Notice that we created exactly the number of cells that were missing.  Then we can add the </tr></table> and have complete, valid html.

Note that if we had had 5 images then the final loop would have only created 1 extra cell and if we had had 6 images no extra cells would have been created.

Hope that helps.

     
0

Featured Post

Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
The purpose of this video is to demonstrate how to connect a WordPress website to Google Analytics. This will be demonstrated using a Windows 8 PC Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php :…
The purpose of this video is to demonstrate how to automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
Suggested Courses

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question