Can I get cms builder to create listings within these div boxes?

4 posts by 2 authors in: Forums > CMS Builder
Last Post: June 10, 2014   (RSS)

By willydoit - June 9, 2014

Hi all,

I am in the middle of rewriting one of our sites and am using a pre-created template the reasons for which I wont bore you with, anyway one of the pages supplied with the package is this one http://www.buybridish.co.uk/about.htm and I noticed the box designs under meet the team, the code for which is copied below. The code creates a set of three boxes.

What I would like to be able to do is have cmsbuilder create one of these div boxes for each of the listings in the database but to also create a new row after each three.

Is this possible, I would rather not use tables as the main reason for the rewrite is to create a site which is fully responsive and caters for mobile and tablet display as well as the usual desktop.

The coding of the pages facilitates our responsive needs so I want to stick as close to the existing coding as possible.

I know this can be done with tables but is it possible to do it using div tags such as the ones in the example below?

I am not a programmer of either php or css which makes the matter a tad difficult but any advice as to if it could be done would be appreciated.

Thanks in advance for any help provided

<div class="row-fluid">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="Pages/Site/themed-images/placeholders/200x150/holder1-200x150.jpg" alt="ALT NAME" class="img-circle">
<div class="caption">
<h3>Agent Name</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Facebook</a> <a href="#" class="btn">Tweet</a></p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="Pages/Site/themed-images/placeholders/200x150/holder2-200x150.jpg" alt="ALT NAME" class="img-circle">
<div class="caption">
<h3>Agent Name</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Facebook</a> <a href="#" class="btn">Tweet</a></p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="Pages/Site/themed-images/placeholders/200x150/holder3-200x150.jpg" alt="ALT NAME" class="img-circle">
<div class="caption">
<h3>Agent Name</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Facebook</a> <a href="#" class="btn">Tweet</a></p>
</div>
</div>
</li>
</ul>
</div>

By claire - June 9, 2014

Hi Willy

CMSB can definitely do this, but it does involve mucking about with some PHP loops and conditional statements. You can't really get away from it, unfortunately.

If you post the generated viewer listings code here, I'll just merge it into what you've got below. Hopefully you'll see how it works so you'll be able to use something similar elsewhere if you need to.

--------------------

Claire Ryan
interactivetools.com

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

By willydoit - June 10, 2014

Hi Claire,

Thanks for that, I have copied my generated code below, just a couple of things which may be relevent.

1) It may be easier than I first thought as I suspect the css elements of the page may automatically ensure that the display is limited to just three boxes per line, the design is supposed to be responsive so have my fingers crossed that it will work that way.

 2) Being a listings page I only need limited info in each box which will be the name of the establishment, 1 image thumbnail (I can sort out which one once I create an appropriate size) and the summary description. 

My end code will be more complicated as I have three different types of listings "Featured" "Standard" and "Complimentary" and the listings will be sorted into order when displayed, however I am confident I can sort that once I have got the listings created in the div working.

I have created what I think should be the correct code to display the appropriate fields within the box below but, but would appreciate it if you could advise if this would work and possibly amend where required where I have got it wrong.

Thanks in advance for your help.

<div class="row-fluid">
<ul class="thumbnails">

<?php foreach ($self_cateringRecords as $record): ?>

<li class="span4">
<div class="thumbnail">

<?php foreach ($record['uploads'] as $index => $upload): ?>
<?php if ($index >= 1) { continue; } // limit uploads shown ?>


<img src="<?php echo $upload['thumbUrlPath'] ?>" alt="<?php echo htmlencode($record['establishment_name']) ?>" class="img-circle">

<?php endforeach ?>


<div class="caption">
<h3><?php echo htmlencode($record['establishment_name']) ?></h3>
<p><?php echo htmlencode($record['summary']) ?></p>
<p><a href="<?php echo $record['_link'] ?>"><?php echo $record['_link'] ?></a></p>
</div>
</div>
</li>

<?php endforeach ?>

</ul>
</div>

Generated Code Below..............

<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php
/* STEP 1: LOAD RECORDS - Copy this PHP code block near the TOP of your page */

// load viewer library
$libraryPath = 'cmsAdmin/lib/viewer_functions.php';
$dirsToCheck = array('/home/sites/bridlington.net/public_html/','','../','../../','../../../');
foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }

// load records from 'self_catering'
list($self_cateringRecords, $self_cateringMetaData) = getRecords(array(
'tableName' => 'self_catering',
'orderBy' => 'RAND()',
'loadUploads' => true,
'allowSearch' => false,
));

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
body { font-family: arial; }
.instructions { border: 3px solid #000; background-color: #EEE; padding: 10px; text-align: left; margin: 25px}
</style>
</head>
<body>

<!-- INSTRUCTIONS -->
<div class="instructions">
<b>Sample List Viewer - Instructions:</b>
<ol>
<?php /*><li style="color: red; font-weight: bold">Rename this file to have a .php extension!</li><x */ ?>
<li><b>Remove any fields you don't want displayed.</b></li>
<li>Rearrange remaining fields to suit your needs.</li>
<li>Copy and paste code into previously designed page (or add design to this page).</li>
</ol>
</div>
<!-- /INSTRUCTIONS -->

<!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<h1>Self Catering - List Page Viewer</h1>
<?php foreach ($self_cateringRecords as $record): ?>
Record Number: <?php echo htmlencode($record['num']) ?><br/>
Featured Listing: <?php echo htmlencode($record['featured_listing']) ?><br/>
views: <?php echo htmlencode($record['views']) ?><br/>
Establishment Name: <?php echo htmlencode($record['establishment_name']) ?><br/>
Address: <?php echo htmlencode($record['address']) ?><br/>
Location (value): <?php echo $record['location'] ?><br/>
Location (label): <?php echo $record['location:label'] ?><br/>
Telephone inc Area Code: <?php echo htmlencode($record['telephone']) ?><br/>
E-Mail Address: <?php echo htmlencode($record['email']) ?><br/>
Website Address inc HTTP://: <?php echo htmlencode($record['website']) ?><br/>
Google Maps Code: <?php echo htmlencode($record['google_maps_code']) ?><br/>
House number and street: <?php echo htmlencode($record['street']) ?><br/>
town: <?php echo htmlencode($record['town']) ?><br/>
Postcode: <?php echo htmlencode($record['postcode']) ?><br/>
Accommodation Type (value): <?php echo $record['accommodation_type'] ?><br/>
Accommodation Type (label): <?php echo $record['accommodation_type:label'] ?><br/>
Number of Units: <?php echo htmlencode($record['number_of_rooms']) ?><br/>
Price per week from: <?php echo htmlencode($record['price']) ?><br/>
Summary: <?php echo htmlencode($record['summary']) ?><br/>
Description: <?php echo $record['description']; ?><br/>
Open Christmas (value): <?php echo $record['open_christmas'] ?><br/>
Open Christmas (label): <?php echo $record['open_christmas:label'] ?><br/>
Open New Year (value): <?php echo $record['open_new_year'] ?><br/>
Open New Year (label): <?php echo $record['open_new_year:label'] ?><br/>
Open all Year (value): <?php echo $record['open_all_year'] ?><br/>
Open all Year (label): <?php echo $record['open_all_year:label'] ?><br/>
En-Suite Available (value): <?php echo $record['en_suite'] ?><br/>
En-Suite Available (label): <?php echo $record['en_suite:label'] ?><br/>
TV available (value): <?php echo $record['tv'] ?><br/>
TV available (label): <?php echo $record['tv:label'] ?><br/>
Cot Available (value): <?php echo $record['cot_available'] ?><br/>
Cot Available (label): <?php echo $record['cot_available:label'] ?><br/>
Family Units (value): <?php echo $record['family_rooms'] ?><br/>
Family Units (label): <?php echo $record['family_rooms:label'] ?><br/>
Central Heating (value): <?php echo $record['central_heating'] ?><br/>
Central Heating (label): <?php echo $record['central_heating:label'] ?><br/>
Sea Views Available (value): <?php echo $record['sea_views_available'] ?><br/>
Sea Views Available (label): <?php echo $record['sea_views_available:label'] ?><br/>
Resident Manager (value): <?php echo $record['resident_manager'] ?><br/>
Resident Manager (label): <?php echo $record['resident_manager:label'] ?><br/>
Bed Linen Provided (value): <?php echo $record['bed_linen_provided'] ?><br/>
Bed Linen Provided (label): <?php echo $record['bed_linen_provided:label'] ?><br/>
Towels Provided (value): <?php echo $record['towels_provided'] ?><br/>
Towels Provided (label): <?php echo $record['towels_provided:label'] ?><br/>
Laundry Facilities (value): <?php echo $record['laundry_facilities'] ?><br/>
Laundry Facilities (label): <?php echo $record['laundry_facilities:label'] ?><br/>
Totally Non-Smoking Establishment (value): <?php echo $record['totally_non_smoking'] ?><br/>
Totally Non-Smoking Establishment (label): <?php echo $record['totally_non_smoking:label'] ?><br/>
Pets Accepted (value): <?php echo $record['pets_accepted'] ?><br/>
Pets Accepted (label): <?php echo $record['pets_accepted:label'] ?><br/>
Swimming Pool (value): <?php echo $record['swimming_pool'] ?><br/>
Swimming Pool (label): <?php echo $record['swimming_pool:label'] ?><br/>
Gym or Health Club (value): <?php echo $record['gym'] ?><br/>
Gym or Health Club (label): <?php echo $record['gym:label'] ?><br/>
Wi-Fi Facilities (value): <?php echo $record['wi_fi_facilities'] ?><br/>
Wi-Fi Facilities (label): <?php echo $record['wi_fi_facilities:label'] ?><br/>
Children Welcome (value): <?php echo $record['children_welcome'] ?><br/>
Children Welcome (label): <?php echo $record['children_welcome:label'] ?><br/>
Single Sex Groups Accepted (value): <?php echo $record['single_sex_groups_accepted'] ?><br/>
Single Sex Groups Accepted (label): <?php echo $record['single_sex_groups_accepted:label'] ?><br/>
Disabled Facilities (value): <?php echo $record['disabled_facilities'] ?><br/>
Disabled Facilities (label): <?php echo $record['disabled_facilities:label'] ?><br/>
Wheelchair Access (value): <?php echo $record['wheelchair_access'] ?><br/>
Wheelchair Access (label): <?php echo $record['wheelchair_access:label'] ?><br/>
Passenger Lift (value): <?php echo $record['passenger_lift'] ?><br/>
Passenger Lift (label): <?php echo $record['passenger_lift:label'] ?><br/>
Stair Lift (value): <?php echo $record['stairlift'] ?><br/>
Stair Lift (label): <?php echo $record['stairlift:label'] ?><br/>
Ground Floor Rooms (value): <?php echo $record['ground_floor_rooms'] ?><br/>
Ground Floor Rooms (label): <?php echo $record['ground_floor_rooms:label'] ?><br/>
Guide / Assistance Dogs Accepted (value): <?php echo $record['guide_assistance_dogs_accepted'] ?><br/>
Guide / Assistance Dogs Accepted (label): <?php echo $record['guide_assistance_dogs_accepted:label'] ?><br/>
Disabled Parking Facilities (value): <?php echo $record['disabled_parking_facilities'] ?><br/>
Disabled Parking Facilities (label): <?php echo $record['disabled_parking_facilities:label'] ?><br/>
Free Parking on Premises (value): <?php echo $record['free_parking_on_premises'] ?><br/>
Free Parking on Premises (label): <?php echo $record['free_parking_on_premises:label'] ?><br/>
Parking Permits for Guests (value): <?php echo $record['parking_permits'] ?><br/>
Parking Permits for Guests (label): <?php echo $record['parking_permits:label'] ?><br/>
Credit Cards Accepted (value): <?php echo $record['credit_cards'] ?><br/>
Credit Cards Accepted (label): <?php echo $record['credit_cards:label'] ?><br/>
Reductions for Children (value): <?php echo $record['reductions_for_children'] ?><br/>
Reductions for Children (label): <?php echo $record['reductions_for_children:label'] ?><br/>
Reductions for Senior Citizens (value): <?php echo $record['reductions_for_senior_citizens'] ?><br/>
Reductions for Senior Citizens (label): <?php echo $record['reductions_for_senior_citizens:label'] ?><br/>
Latitude: <?php echo htmlencode($record['latitude']) ?><br/>
longitude: <?php echo htmlencode($record['longitude']) ?><br/>
_link : <a href="<?php echo $record['_link'] ?>"><?php echo $record['_link'] ?></a><br/>

<!-- STEP 2a: Display Uploads for field 'uploads' (Paste this anywhere inside STEP2 to display uploads) -->
<!-- Upload Fields: extension, thumbFilePath, isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight, info1, info2, info3, info4, info5 -->
Uploads: (Copy the tags from below that you want to use, and erase the ones you don't need)
<blockquote>
<?php foreach ($record['uploads'] as $index => $upload): ?>
<?php if ($index >= 1) { continue; } // limit uploads shown ?>

Upload Url: <?php echo $upload['urlPath'] ?><br/>


Thumb Url: <?php echo $upload['thumbUrlPath'] ?><br/>
Thumb2 Url: <?php echo $upload['thumbUrlPath2'] ?><br/>
Thumb3 Url: <?php echo $upload['thumbUrlPath3'] ?><br/>
Thumb4 Url: <?php echo $upload['thumbUrlPath4'] ?><br/><br/>
Download Link: <a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/><br/>

Image Tags:<br/>
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" />
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" />
<img src="<?php echo $upload['thumbUrlPath2'] ?>" width="<?php echo $upload['thumbWidth2'] ?>" height="<?php echo $upload['thumbHeight2'] ?>" alt="" />
<img src="<?php echo $upload['thumbUrlPath3'] ?>" width="<?php echo $upload['thumbWidth3'] ?>" height="<?php echo $upload['thumbHeight3'] ?>" alt="" />
<img src="<?php echo $upload['thumbUrlPath4'] ?>" width="<?php echo $upload['thumbWidth4'] ?>" height="<?php echo $upload['thumbHeight4'] ?>" alt="" /><br/>

info1 (Title) : <?php echo htmlencode($upload['info1']) ?><br/>
info2 (Caption) : <?php echo htmlencode($upload['info2']) ?><br/><br/>

Extension: <?php echo $upload['extension'] ?><br/>
isImage: <?php if ($upload['isImage']): ?>Yes<?php else: ?>No<?php endif ?><br/>
hasThumbnail: <?php if ($upload['hasThumbnail']): ?>Yes<?php else: ?>No<?php endif ?><br/>
<hr/>

<?php endforeach ?>
</blockquote>
<!-- STEP2a: /Display Uploads -->

<hr/>
<?php endforeach ?>

<?php if (!$self_cateringRecords): ?>
No records were found!<br/><br/>
<?php endif ?>
<!-- /STEP2: Display Records -->

</body>
</html>