5 posts by 2 authors in: Forums > CMS Builder
Last Post: April 7, 2017   (RSS)

Hi, All.

I'm working on transferring a client's CMSB site from an old template to a new, responsive one. There's a slideshow on the left of the product pages, which looks like this: http://www.masselsmarine.com/2017/marineBoatsDetail0.php.

This is the slideshow code on the page:

<ul id="product-slider" class="product-item-slider product-image">

<li class="item hoverStyle" data-thumb="images/151AllSport.jpg" valign="middle">
<img src="images/151AllSport.jpg">
</li>

<li class="item hoverStyle" data-thumb="images/16XterminatorD_001.jpg" valign="middle">
<img src="images/16XterminatorD_001.jpg">
</li>

<li class="item hoverStyle" data-thumb="images/16-proSport-SC-OVERHEAD.jpg" valign="middle">
<img src="images/16-proSport-SC-OVERHEAD.jpg">
</li>

etc...

</ul>

And this is the image code generated by CMSB:

<?php foreach ($marineRecord['gallery'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /><br/>
<?php elseif ($upload['isImage']): ?>
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /><br/>
<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/>
<?php endif ?>
<?php endforeach ?>

Can someone push me in the right direction to integrate the two, please?

Try this?

<ul id="product-slider" class="product-item-slider product-image">

<?php foreach ($marineRecord['gallery'] as $upload): ?>
<li class="item hoverStyle" data-thumb="<?php echo $upload['thumbUrlPath'] ?>" valign="middle">
<img src="<?php echo $upload['urlPath'] ?>">
</li>
<?php endforeach ?>

</ul>

Cheers,

Tim Forrest
Toledoh Enterprises
www.toledoh.com.au

Thanks so much, Tim. That does the job; e.g. http://www.masselsmarine.com/2017/marineBoatsDetail.php?16-Xterminator-D-177.

As you can see, though, the imported images are distorted when they're the main one that's displayed. Do you think that might be a stylesheet issue?

Attachments:

default.css 61K

Yeah.

Try changing 

.product-image .item img {

  1. width100%;
  2. height100%;

}

to 

.product-image .item img {

  1. width100%;
  2. heightauto;

}

but there may be some required dimensions for the images?

Cheers,

Tim Forrest
Toledoh Enterprises
www.toledoh.com.au