3 coloumns listing + some more...

By mingyq - July 9, 2010 - edited: July 14, 2010

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.

Re: [mingyq] 3 coloumns listing + some more...

By gkornbluth - July 11, 2010

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.

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

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

Use this:

<?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!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Re: [mingyq] 3 coloumns listing + some more...

By mingyq - July 14, 2010

Thanks Jerry. This worked like a charm.

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

mingyq

Re: [mingyq] 3 coloumns listing + some more...

By mingyq - July 26, 2010

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

Re: [mingyq] 3 coloumns listing + some more...

By Jason - July 27, 2010

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:
<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)


<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 - Project Manager
interactivetools.com

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

Re: [Jason] 3 coloumns listing + some more...

By mingyq - July 27, 2010

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

Re: [mingyq] 3 coloumns listing + some more...

By Jason - July 27, 2010

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 - Project Manager
interactivetools.com

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

Re: [mingyq] 3 coloumns listing + some more...

By Jason - July 27, 2010

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 - Project Manager
interactivetools.com

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

Re: [Jason] 3 coloumns listing + some more...

By mingyq - July 27, 2010

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[/#336699]), so why are they not showing?

MingyQ

MingyQ