Thumbnail Images on Listings Level

7 posts by 2 authors in: Forums > CMS Builder
Last Post: December 19, 2007   (RSS)

By rasbro - December 19, 2007

I was wondering what the best way is to display product thumbnail images on the listings page?

For example, when I have a multi-page section with a list viewer and page viewer being used, I would like the thumbnail images for the products appearing on the category pages (list viewer) like they do for each of the product pages (page viewer). I hope that makes sense.

What tags do I use on the list viewer page for displaying the product thumbnail images like on the page viewer page?

Thanks,
Brian

Re: [rasbro] Thumbnail Images on Listings Level

By Dave - December 19, 2007

Try copying the "Step 3: Display Uploads" block from the Page Viewer and pasting it inside the "Step 2: Display Record List" block in the "List Viewer".

Let me know if you have any other problems with that.
Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Thumbnail Images on Listings Level

By rasbro - December 19, 2007

I pasted the display uploads block from the page viewer into the list viewer page and this is what I got:

Notice: Undefined variable: record in /home/path-of-site/page.php on line 80
getUploads: no 'recordNum' value specified!

Do I need to alter something?

Thanks,
Brian

Re: [rasbro] Thumbnail Images on Listings Level

By Dave - December 19, 2007

You need to make sure it's inside the foreach loop in step2 and that you're using the same variable name (in this case $record). So if your step2 block looks like this in your list viewer:

<?php foreach ($listRows as $record): ?>
...
<?php endforeach ?>


Then past your upload viewer code inside that. Like this:

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

<?php foreach (getUploads($options['tableName'], 'uploads2', $record['num']) as $upload): ?>
...
<?php endforeach ?>

<?php endforeach ?>


If that doesn't help you can attach the listViewer file (or private message it to me) and I'll have a look.
Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Thumbnail Images on Listings Level

By rasbro - December 19, 2007

Yep, that did it. I didn't have the code within the foreach loop. Nice to know now how to configure it.

Now, I wonder if there is a way to have the product thumbnail appear smaller on the category list page than it does for the product page, without just changing the width and height attributes. Can I do this without adding a new section for this purpose?

Thanks,
Brian

Re: [rasbro] Thumbnail Images on Listings Level

By Dave - December 19, 2007

You can specify two different size for image uploads. So if you need 1 fullsize image and 2 thumbnail sizes you'd have to do it some other way. But if two different thumbnail sizes would work you can do it like this: (Both sizes are set in the field editor and apply to new uploads only).

The first size is set with "Resize images larger than...". Any images uploaded larger than this will automatically be resized. You can display these images like this:

<img src="<?php echo $upload['urlPath'] ?>"
width="<?php echo $upload['width'] ?>"
height="<?php echo $upload['height'] ?>" />


The second one is the thumbnail created with "Create image thumbnails". That will automatically get created if enabled and can be displayed like this:

<img src="<?php echo $upload['thumbUrlPath'] ?>"
width="<?php echo $upload['thumbWidth'] ?>"
height="<?php echo $upload['thumbHeight'] ?>" />


And if you want to just let the browser resize it, using the thumbnail will give you less distortion since it's already smaller and specifying only height or width will make the browser figure out the right resize ratio:

<img src="<?php echo $upload['thumbUrlPath'] ?>" width="50" />

Hope that helps.
Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Thumbnail Images on Listings Level

By rasbro - December 19, 2007

That definitely does help Dave! I thought I might be limited to those options, but I think I can live with the browser resize option for my smaller version of the thumbnail.

Thanks for the great explanation!

Brian