Login | Sign up | Toll-Free: 1-800-752-0455
 
 

Forum

 

2 posts by 2 authors in: Forums > CMS Builder Community
Last Post: January 7, 2016

Hey All.

I'm pretty happy that I got this working - thought I'd share.

http://thelakesdolphinpoint.com.au/now-selling/

I received this plan from the illustrator as an SVG, and opened it as code rather than as an image.  I then identified each component (polygon, polylines etc) and copied that data into records within CMSB. ie. I broke the single image into manageable lots for sale.

I then associated additional information with each record, such as "sold/available/onhold" etc and regenerated the SVG using the code generator from CMSB - but now allowing me to identify each component and adding CSS classes to them.

<?php foreach ($lotsRecords as $record): ?>
<<?php echo htmlencode($record['svg_type']) ?> id="<?php echo htmlencode($record['new_lot']) ?>" class="lot <?php echo strtolower($record['status:label']) ?> lotModalLaunch" data-toggle="modal" data-id="<?php echo htmlencode($record['new_lot']) ?>" <?php echo ($record['code']) ?>/>
<?php endforeach ?>

I've now got a fully responsive image map - managed by CMSB.  It will display without loss of quality at any scale, for websites / mobile apps etc.  File size 70kb (the PDF version is 800kb)

There's a bit of messing around with SVG's, and making them scale properly in IE is a pain - but good result in the end. Will be great to extend this to more animated navigational elements, interactive info-graphics etc.

Cheers,

Tim Forrest
Toledoh Enterprises
www.toledoh.com.au