Getting an image and thumbnail to appear
5 posts by 2 authors in: Forums > CMS Builder
Last Post: July 20, 2015 (RSS)
By CommonSenseDesign - July 17, 2015 - edited: July 17, 2015
I want to display a showcase on this page: http://www.gaiasgardens.ca/home.php . The text content is showing up okay, but when I drop in the CMSB code for the images, it throws everything off.
Here's the code:
<ul id="og-grid" class="og-grid">
<?php foreach ($homepage_showcaseRecords as $record): ?>
<li>
<a href="<?php echo htmlencode($record['link']) ?>" data-largesrc="img/1.jpg" data-title="<?php echo htmlencode($record['title']) ?>" data-subtitle="<?php echo htmlencode($record['subheading']) ?>" data-description="<?php echo htmlencode($record['content']) ?>">
<img src="img/thumbs/1.jpg" alt=""/>
</a>
</li>
<?php endforeach ?>
</ul>
This is the CMSB code I need to use to replace the large image and thumbnail:
<?php foreach ($record['image'] as $index => $upload): ?>
<img src="<?php echo htmlencode($upload['urlPath']) ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" />
<img src="<?php echo htmlencode($upload['thumbUrlPath']) ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" />
<?php endforeach ?>
Any suggestions, please?
By gkornbluth - July 18, 2015 - edited: July 18, 2015
Hi,
I don't know what package you're using to create your slide show, but just a guess at a start, I noticed that alt, width and height do not appear in the static code.
Try taking those out. That will also eliminate the extra double quotes that are sometimes part of the problem.
I'd also try putting the <?php foreach ($record['image'] as $index => $upload): ?> outside the first <li>
For a full featured slide show package I've had some really good results with the Royals Slider and have documented a number of CMSB applications in my CMSB Cookbook at http://www.thecmsbcookbook.com
Good luck,
Jerry Kornbluth
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
I'll give this a try and let you know what happens.
Thanks, Jerry.
Okay, here's what I did. I substituted the static image code for the code generated by CMSB.
This is the static image version:
<ul id="og-grid" class="og-grid">
<?php foreach ($homepage_showcaseRecords as $record): ?>
<li>
<a href="<?php echo htmlencode($record['link']) ?>" data-largesrc="img/1.jpg" data-title="<?php echo htmlencode($record['title']) ?>" data-subtitle="<?php echo htmlencode($record['subheading']) ?>" data-description="<?php echo htmlencode($record['content']) ?>">
<img src="img/thumbs/1.jpg" alt="img01"/>
</a>
</li>
<?php endforeach ?>
</ul>
And this is the CMSB image version:
<ul id="og-grid" class="og-grid">
<?php foreach ($homepage_showcaseRecords as $record): ?>
<?php foreach ($record['image'] as $index => $upload): ?>
<li>
<a href="<?php echo htmlencode($record['link']) ?>" data-largesrc="<img src="<?php echo htmlencode($upload['urlPath']) ?>"/>" data-title="<?php echo htmlencode($record['title']) ?>" data-subtitle="<?php echo htmlencode($record['subheading']) ?>" data-description="<?php echo htmlencode($record['content']) ?>">
<img src="<?php echo htmlencode($upload['urlPath']) ?>"/>
</a>
</li>
<?php endforeach ?>
<?php endforeach ?>
</ul>
Unfortunately, there's still something weird happening on the live page: http://gaiasgardens.ca/home-cmsb.php.
It's the code in bold that's causing the problem, because when I remove it, this is what I get on the live page: http://gaiasgardens.ca/home.php The correct thumbnail is showing up, but I can't figure out how to make the large image appear when you click on the thumbnail. When I put in <img src="<?php echo htmlencode($upload['urlPath']) ?>, that's when the weird stuff happens.
Any suggestions, please?
By gkornbluth - July 20, 2015 - edited: July 20, 2015
No way to test it, but if the static code works, something like this might work...
I replaced each piece of the static code with the equivalent CMSB code. If it doesn't work, try replacing the working static code, one piece at a time, and see where it breaks by comparing the source code for each.
I'm assuming that work-gallery.php is the homepage_showcase detail page that you want to click/tap to.
<?php foreach ($homepage_showcaseRecords as $record): ?>
<li><ul id="og-grid" class="og-grid">
<a href="work-gallery.php?<?php echo $record['num']?>" data-large src="<?php foreach ($record['image'] as $index => $upload): ?><?php echo htmlencode($upload['urlPath']) ?><?php endforeach ?>" data-title="<?php echo htmlencode($record['title']) ?>" data-subtitle="<?php echo htmlencode($record['subheading']) ?>" data-description="<?php echo htmlencode($record['content']) ?>">
<img src="<?php foreach ($record['image'] as $index => $upload): ?><?php echo htmlencode($upload['thumbUrlPath']) ?> alt="<?php echo htmlencode($upload['filename']) ?>"<?php endforeach ?>"/>
</a>
</li>
<?php endforeach ?>
Best,
Jerry Kornbluth
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php