making the images on listingDetail into a 4 x 5 format
2 posts by 2 authors in: Forums > CMS Builder: Plugins & Add-ons
Last Post: May 25, 2010 (RSS)
By sale101 - May 24, 2010
Hello,
I am interested in making the images on the web page, listingDetail.php, appear in a 4 x 5 format, rather than 1 x many.
My customer asked for this format; 4 pictures across X 5 rows of pictures.
Can you show me how to do this?
I have CMS builder 2.xx and the Basic Realty add-on.
The listingDetail.php file is in the Basic Realty.
I have a start at setting up my customer's web page; see it at www.condoviabeach.com - then select listings, then select the specific listing.
Right now the images of the condo's room are in a 1 x many format [ 1 across, and 'many' vertical'].
Thank you.
sale101 ................. engineer@iwe.us.com
I am interested in making the images on the web page, listingDetail.php, appear in a 4 x 5 format, rather than 1 x many.
My customer asked for this format; 4 pictures across X 5 rows of pictures.
Can you show me how to do this?
I have CMS builder 2.xx and the Basic Realty add-on.
The listingDetail.php file is in the Basic Realty.
I have a start at setting up my customer's web page; see it at www.condoviabeach.com - then select listings, then select the specific listing.
Right now the images of the condo's room are in a 1 x many format [ 1 across, and 'many' vertical'].
Thank you.
sale101 ................. engineer@iwe.us.com
Re: [sale101] making the images on listingDetail into a 4 x 5 format
By gkornbluth - May 25, 2010 - edited: May 25, 2010
Hi Sale 101,
Here's and excerpt from my CMSB Cookbook http://www.thecmsbcookbook.com that might set you in the right direction.
LIMITING THE AMOUNT OF COLUMNS IN A SINGLE ROW IMAGE DISPLAY
The CSS way is to have each image in a div that has something like: style="float: left; width: 200px". This will make them flow from left to right and wrap when they run out of space (you can put them inside a bigger fixed width container).
Or with a table you can have one table cell per image and insert a closing and opening TR every X images. Here's a code snippet that does that:
Which is just a way of saying "Every 2 images insert "</tr><tr>"".
Here’s a single 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.
Use your own variable names instead of $your_sectionRecords, but the maxCols line can stay the same.
If you actually need to limit the rows to 5 and then create a "next" page for the next 20 images, there's a recipe for that as well.
Best,
Jerry Kornbluth
Here's and excerpt from my CMSB Cookbook http://www.thecmsbcookbook.com that might set you in the right direction.
LIMITING THE AMOUNT OF COLUMNS IN A SINGLE ROW IMAGE DISPLAY
The CSS way is to have each image in a div that has something like: style="float: left; width: 200px". This will make them flow from left to right and wrap when they run out of space (you can put them inside a bigger fixed width container).
Or with a table you can have one table cell per image and insert a closing and opening TR every X images. Here's a code snippet that does that:
<?php $maxCols=4; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?>
Which is just a way of saying "Every 2 images insert "</tr><tr>"".
Here’s a single 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>
<?php foreach ($your_sectionRecords as $record): ?><?php foreach ($record['image'] as $upload): ?>
<td align=”center” 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" /><br /><div align="center" class="medium-title"><?php echo $record['title'] ?></div>
<div align="center" class="medium-text"><?php echo $record['sub_title'] ?></div></a>
</td>
<?php $maxCols=4; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?>
<?php endforeach ?><?php endforeach ?>
</tr>
</table>
Use your own variable names instead of $your_sectionRecords, but the maxCols line can stay the same.
If you actually need to limit the rows to 5 and then create a "next" page for the next 20 images, there's a recipe for that as well.
Best,
Jerry Kornbluth
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
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php