Code to display clickable tumbnails

6 posts by 2 authors in: Forums > CMS Builder
Last Post: July 6, 2010   (RSS)

By (Deleted User) - July 5, 2010 - edited: July 5, 2010

Hi,

Need simple code to display inside the item page (not the listing page) a tumbnail of the image and beneath it, the title of the image. The tumbnail should also be clickable so when a site visitor clicks on the image it will display the full image.

Also, I need the code to display somthing if there is no images associated with the listing. Somthing like "no image available".

Any help will be greatly apreciated.

The code I got from the HTML code genetator follows.

<!-- STEP 2a: Display Uploads for field 'images' (Paste this anywhere inside STEP2 to display uploads) -->
<!-- Upload Fields: num, createdTime, tableName, fieldName, recordNum, preSaveTempId, filePath, filename, extension, thumbFilePath, isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight, info1, info2, info3, info4, info5 -->
<?php foreach ($minyanRecord['images'] 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 ?>
<!-- STEP2a: /Display Uploads -->

Re: [RapidWeb] Code to display clickable tumbnails

By Jason - July 5, 2010

Hi,

You could try something like this:

<?php if($minyanRecord['images']): ?>
<?php foreach ($minyanRecord['images'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a href="<?php echo $upload['urlPath'];?>"> <img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt='' /></a><br/>
<?php echo $upload['filename']; ?><br />
<?php endif ?>
<?php endforeach ?>
<?php else: ?>
No Image Available <br />
<?php endif ?>


If there are images in the "images" field, it will display a thumbnail for each one. Clicking on the thumbnail will send the user to the full sized image. Below the thumbnail, it will also display the files name.

If there are no images in the "images" field, it will output the words "No Image Available".

Give this a try and let me know if you run into any issues.

Hope this helps.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

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

Re: [Jason] Code to display clickable tumbnails

By (Deleted User) - July 5, 2010

Thank you for your quick reply.

I copied your code exactly and it does not work.

This is the page:

http://www.koshertravelinfo.com/minyan/minyan.php

Am I missing a line of code?

Re: [RapidWeb] Code to display clickable tumbnails

By Jason - July 6, 2010

Hi,

I took a look at the page and it seems that it's working for a file called test_image.jpg. I'm not seeing any errors.

Could you let me know the results that you're expecting? Also, if you attach the .php file you're working with I can take a closer look at this for you.

Thanks.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

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

Re: [Jason] Code to display clickable tumbnails

By (Deleted User) - July 6, 2010

It is working now... I could not figure out why is was not working. But the image upload was a bitmap image and it came up as a "download". I changed it to a JPG format and it came up fine. 2 more questions:

Why if I ad another picture, it duplicates BOTH pictures:
http://www.koshertravelinfo.com/minyan/minyan.php

Also, I want the "Title" to post under the picture, not the file name.