Solved

Display images three to a row, then new a row

Posted on 2004-10-24
309 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
Question by:davidawhite
    18 Comments
     
    LVL 22

    Expert Comment

    by:pinaldave
    <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
    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 22

    Expert Comment

    by:pinaldave
    entrance2002 why you have better idea then me... :) (smiles)
    Yes he is better suggestion!!!
    --Pinal
    0
     
    LVL 14

    Expert Comment

    by:Renante Entera
    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
    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
    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
    More details of this CSS method with examples are here:

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

    Author Comment

    by:davidawhite
    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
    Yes - in my table example each image is in its own td
    0
     
    LVL 14

    Expert Comment

    by:Renante Entera
    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
    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
    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
    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
    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
    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:
    Yes.  And the cfset should go inbetween the cfif and cfloop lines....
    0
     

    Author Comment

    by:davidawhite
    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
    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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone. Privacy Policy Terms of Use

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Now that Expression Web 4.0 (http://www.microsoft.com/expression/products/Upgrade.aspx) is free if you buy or have the full version of Expression Web 3.0, now is the best time to  migrate from FrontPage to Expression Web (http://www.frontpage-to-exp…
    Article by: kevp75
    Hey folks, 'bout time for me to come around with a little tip. Thanks to IIS 7.5 Extensions and Microsoft (well... really Windows 8, and IIS 8 I guess...), we can now prime our Application Pools, when IIS starts. Now, though it would be nice t…
    The purpose of this video is to demonstrate how to insert an Iframe into WordPress. 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 : Open Page or Post…
    The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…

    875 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

    Need Help in Real-Time?

    Connect with top rated Experts

    8 Experts available now in Live!

    Get 1:1 Help Now