Display images three to a row, then new a row

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?
davidawhiteAsked:
Who is Participating?
 
mrichmonConnect With a Mentor Commented:
Yes.  And the cfset should go inbetween the cfif and cfloop lines....
0
 
pinaldaveCommented:
<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
 
Renante EnteraSenior PHP DeveloperCommented:
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
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
pinaldaveCommented:
entrance2002 why you have better idea then me... :) (smiles)
Yes he is better suggestion!!!
--Pinal
0
 
Renante EnteraSenior PHP DeveloperCommented:
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
 
mrichmonCommented:
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
 
mrichmonCommented:
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
 
mrichmonCommented:
More details of this CSS method with examples are here:

http://realworldstyle.com/thumb_float.html
0
 
davidawhiteAuthor Commented:
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
 
mrichmonCommented:
Yes - in my table example each image is in its own td
0
 
Renante EnteraSenior PHP DeveloperCommented:
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
 
mrichmonCommented:
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
 
mrichmonCommented:
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
 
davidawhiteAuthor Commented:
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
 
mrichmonCommented:
Try setting a variable first like this :

<cfset temp = images.recordcount mod 3>

Then <cfloop index="n" from="#temp#" to="3">
0
 
davidawhiteAuthor Commented:
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
 
davidawhiteAuthor Commented:
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
 
mrichmonCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.