Products: CMS Builder: Plugins & Add-ons: 3 coloumns listing + some more... : Interactivetools.com Forum

Home: Products: CMS Builder: Plugins & Add-ons:
3 coloumns listing + some more...

mingyq
User

Jul 9, 2010, 11:00 AM

Post #1 of 17 (7024 views)
Shortcut

3 coloumns listing + some more...	Can't Post

Hello

We are developing a new site for a client using CMS Builder + Basic Listings template. The client wants to list ALL products in the database on the same overview page and then link to the specification page for each product.

My Questions:
1. How do we create a 3 coloumn listing?
2. Having some problems with "formatting". When trying to add a comma in between to php statements, it automatically add a space before the comma. How can you avoid that? See sample here: http://www.castlekid.ca/testimonials.php
mingyq wrote on Wednesday May 26 , 2010 should look like mingyq wrote on Wednesday May 26, 2010

Any help would be appreciated.

(This post was edited by mingyq on Jul 14, 2010, 12:20 PM)

gkornbluth
Veteran

Jul 11, 2010, 7:04 PM

Post #2 of 17 (7016 views)
Shortcut

Re: [mingyq] 3 coloumns listing + some more... [In reply to]	Can't Post

Hi mingyq,

For the 3 column listing would it be possible to adapt this recipe from my CMSB Cookbook? http://ww.thecmsbcookbook.com

Best,

Jerry Kornbluth

LIMITING THE AMOUNT OF COLUMNS IN A MULTI ROW IMAGE DISPLAY
If you want to set up sets of rows that you want to wrap, you’ll have to wrap your table inside a table. Here’s a 2 row example using the thumbnail2 image as a link to a detail page, separate Title and Subtitle fields, a hidden border for IE and a fixed height for the image cell so that everything lines up nicely.

Code

<table width="100%" border="0" cellpadding="5"> 
<tr> 
<td align="center" > 
<tr> 
<?php foreach ($your_sectionRecords as $record): ?><?php foreach ($record['image'] as $upload): ?> 
 <td align="center" width="50%"> 
<table> 
<tr> 
<td height="350" valign="bottom"><a href="<?php echo $record['_link'] ?>"><img src="<?php echo $upload['thumbUrlPath2'] ?>" width="<?php echo $upload['thumbWidth2'] ?>" height="<?php echo $upload['thumbHeight2'] ?>" alt="" style="border:hidden" /></a> 
</td> 
<tr> 
</tr> 
<td ><div align="center" class="medium-title"><?php echo $record['title'] ?></div> 
<div align="center" class="medium-text"><?php echo $record['sub_title'] ?></div></td></tr></table> 
</td> 
<?php $maxCols=2; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?> 
<?php endforeach ?> <?php endforeach ?> 
</tr> 
</table>

Again, Use your own variable names instead of $your_sectionRecord, but the line in red can stay the same.

*** If you’re going to use that little code snippet multiple times on the same page, just use a different variable instead of $count or it will remember the count from the last section and increment that.

Instead of this:

Code

<?php $maxCols=5; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?>

Use this:

Code

<?php $maxCols=5; if (@++$count1 % $maxCols == 0): ?></tr><tr><?php endif; ?> 
 
<?php $maxCols=5; if (@++$count2 % $maxCols == 0): ?></tr><tr><?php endif; ?> 
 
<?php $maxCols=5; if (@++$count3 % $maxCols == 0): ?></tr><tr><?php endif; ?>

The first CMS Builder reference book is now available on-line!
http://www.thecmsbcookbook.com

mingyq
User

Jul 14, 2010, 12:22 PM

Post #3 of 17 (6982 views)
Shortcut

Re: [mingyq] 3 coloumns listing + some more... [In reply to]	Can't Post

Thanks Jerry. This worked like a charm.

Do you know how to get rid of the space in my question 2?

mingyq

mingyq
User

Jul 26, 2010, 7:48 PM

Post #4 of 17 (4753 views)
Shortcut

Re: [mingyq] 3 coloumns listing + some more... [In reply to]	Can't Post

OK, so I got this to work with both 3 coloumns (http://www.castlekid.ca/prices.php) and testing with 5 coloumns in an image gallery based on Uploads (http://www.castlekid.ca/gallery_test2.php).

However, how can I get the images in the test gallery (http://www.castlekid.ca/gallery_test2.php) to "popup" like in the original Gallery (http://www.castlekid.ca/Gallery.php) when using this 3 coloumn method? (I get the images to load in a new window, but the JavaScript popup looks so much nicer!)

MingyQ

Jason
Staff / Moderator

Jul 27, 2010, 9:10 AM

Post #5 of 17 (4672 views)
Shortcut

Re: [mingyq] 3 coloumns listing + some more... [In reply to]	Can't Post

Hi MingyQ,

Right now, you're making each image a link that opens in a new browser window.

What you need to do is to output your image tags in the same format as you were before (Note: This should not affect your new layout).

The format you were using previously looked like this:

Code

<div id="*FILE NAME" class="gallery_image"> 
  <img src="imgsize.php?w=*WIDTH*&h=*HEIGHT*&img=*IMAGE PATH*" /></div>

So you can try changing where you output your images to look like this: (NOTE: I don't have access to your files, so this solution is untested)

Code

<div id="<?php echo $upload['filename'];?>" class="gallery_image"> 
<img src="imgsize.php?w=<?php echo $upload['width'];?>&h=<?php echo $upload['height'];?>&img=<?php echo $upload['urlPath'];?>" width="<?php echo $upload['thumbWidth2'] ?>" height="<?php echo $upload['thumbHeight2'] ?>" alt="" style="border:hidden" /></div>

Hope this helps.
---------------------------------------------------
Jason Sauchuk - Programmer
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

mingyq
User

Jul 27, 2010, 10:40 AM

Post #6 of 17 (4666 views)
Shortcut

Re: [Jason] 3 coloumns listing + some more... [In reply to]	Can't Post

Thanks Jason

It looks like that in theory works, however I can't get the images to show up (neither thumbnails nor the large image), see http://www.castlekid.ca/gallery_test3.php
I've only changed the code for the small castles:

<div id="<?php echo $upload['UrlPath'];?>" class="gallery_image"> <img src="imgsize.php?w=<?php echo $upload['width'];?>&h=<?php echo $upload['height'];?>&img=<?php echo $upload['thumbUrlPath'];?>" width="<?php echo $upload['thumbWidth2'] ?>" height="<?php echo $upload['thumbHeight2'] ?>" alt="" style="border:hidden" /></div>

What am I doing wrong?

MingyQ

Jason
Staff / Moderator

Jul 27, 2010, 10:45 AM

Post #7 of 17 (4664 views)
Shortcut

Re: [mingyq] 3 coloumns listing + some more... [In reply to]	Can't Post

Hi,

Try changing:
<?php echo $upload['UrlPath'];?>
to:
<?php echo $upload['urlPath'];?>

It is case sensitive. Give that a try and let me know if that helps.
---------------------------------------------------
Jason Sauchuk - Programmer
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

mingyq
User

Jul 27, 2010, 10:59 AM

Post #8 of 17 (4662 views)
Shortcut

Re: [Jason] 3 coloumns listing + some more... [In reply to]	Can't Post

Nope, did not help, also see attachment.

MingyQ

Attachments:

gallery_test3.php (19.8 KB)

Jason
Staff / Moderator

Jul 27, 2010, 11:08 AM

Post #9 of 17 (4661 views)
Shortcut

Re: [mingyq] 3 coloumns listing + some more... [In reply to]	Can't Post

Hi,

If you take a look at the source code, you'll see that the width and height for these images have been set to 0. What you could do is just hard code in a width and a height. From the previous page, it was set like this:
width="300" height="201".

Hope this helps.
---------------------------------------------------
Jason Sauchuk - Programmer
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

mingyq
User

Jul 27, 2010, 11:35 AM

Post #10 of 17 (4660 views)
Shortcut

Re: [Jason] 3 coloumns listing + some more... [In reply to]	Can't Post

Inching closer:

As you see below I also changed the 'thumbWidth2' and 'thumbHeight2' as these are not active. I also hardcoded the size as you mentioned, see below:

<div id="<?php echo $upload['urlPath'];?>" class="gallery_image"> <img src="imgsize.php?w=600&h=401&img=<?php echo $upload['thumbUrlPath'];?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" style="border:hidden" /></div>

These changes resulted in the "Red Square", see http://www.castlekid.ca/gallery_test3.php

However, still no images showing up. The path when right clicking on the red square is: http://www.castlekid.ca/imgsize.php?w=600&h=401&img=/cmsAdmin/uploads/thumb/small-spiderman-jumping-castle_002.jpg which is an image in that folder! The large image also exist in the Uploads folder (cmsAdmin/uploads/small-spiderman-jumping-castle_002.jpg), so why are they not showing?

MingyQ

MingyQ

Jason
Staff / Moderator

Jul 27, 2010, 11:42 AM

Post #11 of 17 (4659 views)
Shortcut

Re: [mingyq] 3 coloumns listing + some more... [In reply to]	Can't Post

Hi,

I think it may have to do with the script. The id for the div is supposed to be the filename, not the file path.

Try changing it to this:

Code

<div id="<?php echo $upload['filename'];?>" class="gallery_image">

mingyq
User

Jul 27, 2010, 12:01 PM

Post #12 of 17 (4656 views)
Shortcut

Re: [Jason] 3 coloumns listing + some more... [In reply to]	Can't Post

Scratching my head, nope this didn't help either, any other suggestions? Would it help if I gave you the FTP login?

MingyQ

Jason
Staff / Moderator

Jul 28, 2010, 8:17 AM

Post #13 of 17 (4587 views)
Shortcut

Re: [mingyq] 3 coloumns listing + some more... [In reply to]	Can't Post

Sure, email it to jason@interactivetools.com and I'll take a look.
---------------------------------------------------
Jason Sauchuk - Programmer
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Jason
Staff / Moderator

Jul 29, 2010, 9:07 AM

Post #14 of 17 (4575 views)
Shortcut

Re: [mingyq] 3 coloumns listing + some more... [In reply to]	Can't Post

Hi,

I took a look at the code, and it looks like in your Gallery.php page, your selecting information from a table that contains youtube links. This information is used to create flash objects. This is not happening in your gallery_test3.php page.

Because this is dealing with a third party script, it's a little more involved than what we deal with in the forum. We would be more than happy to look into this issue further through our consulting service:
www.interactivetools.com/hire-us/

Hope this helps.
---------------------------------------------------
Jason Sauchuk - Programmer
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Rusty
User

Feb 17, 2011, 6:11 AM

Post #15 of 17 (2641 views)
Shortcut

Re: [Jason] 3 coloumns listing + some more... [In reply to]	Can't Post

I want to know why putting this within a foreach to list records (w/ a limit of 3 set within the table query) this works:

THIS WORKS

Code

<?php $maxCols=3; if (@++$count % $maxCols == 0): ?><div class="plan_box last"> 
 <?php else: ?><div class="one_third"><?php endif; ?>

THIS WORKS

Properly assigning DIV "one_third" to the first two div's, and then "plan_box last" to the third and final div.

But this:

Code

<?php $counter = 0; 
while ( $counter <= 1 ) { 
	echo "<div class=\"one_third\">"; 
	 $counter = $counter + 1; 
} 	echo "<div class=\"plan_box last\">"; 
?>

makes all kinds of mumbo jumbo madness, doing what I want, but three times for each item listed within the FOREACH:

Code

<div class="one_third"><div class="one_third"><div class="plan_box last">

It's not that I don't love the fact that I finally hammered this out, however, I just wish I knew what was going on with the % where it's checking to see if $maxCols is equal to zero. I see the IF statement, I see the @ sign (to suppress errors/warnings) I see the counter, but to me it seems backwards. Someone care to fill me in on the steps that are happening there?

BTW that works awesome, and will be very useful for defining custom CSS for the last item in a particular list (when used within a FOREACH).

Keywords I used to search. php counter auto increment list foreach multiple columns limit
Rusty

(This post was edited by Rusty on Feb 17, 2011, 6:12 AM)

Rusty
User

Feb 17, 2011, 6:18 AM

Post #16 of 17 (2639 views)
Shortcut

Re: [Rusty] 3 coloumns listing + some more... [In reply to]	Can't Post

One other thing When working with a List Page, how can you go about incorporating CMS FOREACH to set it up to make let's say a 3x3 grid, 3 rows of 3. Obviously some kind of counter would be necessary, to increment for each of the 9 records, and we can use the above code to force it to a new row...
Rusty

Jason
Staff / Moderator

Feb 17, 2011, 9:44 AM

Post #17 of 17 (2622 views)
Shortcut

Re: [Rusty] 3 coloumns listing + some more... [In reply to]	Can't Post

Hi Rusty,

"%" is the modulus operator in PHP, which means it returns the remainder of the the left hand side divided by the right hand side.

What this is doing is looking for multiples of 3. So every time $count is a multiple of 3, the answer will be 0:
ie
3 % 3 = 0
6 % 3 = 0
9 % 3 = 0
etc

This is a good way of handling it if you don't know how many records you'll actually be dealing with.

As for using a foreach to create a grid of 3 x 3, you could do something similar to this example:

Code

<?php 
 
$maxRows  = 3; 
$maxCols  = 3; 
 
$colCount = 0; 
$rowCount = 1; 
 
?> 
 
<?php foreach ($productRecords as $record): ?> 
   
  <?php if($rowCount < $maxRows){ break;} ?> 
   
  <?php if (++$colCount % $maxCols == 0): ?> 
    <div class="plan_box last"> 
    <?php $rowCount++ ;?> 
       
   <?php else: ?> 
     <div class="one_third"> 
       
   <?php endif; ?> 
 
   <?php echo $record['title'];?> 
    
     </div> 
      
 <?php endforeach ?>

Hope this helps get you started.
---------------------------------------------------
Jason Sauchuk - Programmer
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

interactivetools.com

Company Info

Contact Us

Newsletter

interactivetools.com

Company Info

Contact Us