8 replies [Last post]
antsa's picture
Offline
Joined: 02/18/2013
Juice: 61
Was this information Helpful?

Hi,

I'm working on a Drupal 7 / Ubercart 3 site, and I'm currently theming the product pages.

The problem I'm facing is that when all the product images I upload are show up the same size. What I'd like to do is to have the first product image as the class uc_product and the rest of the images as the uc_product_list class. I would also like have the thumbnails on one line instead of being on multiple lines (see attachment).

I have colorbox installed and functioning well.

At the moment my node--product.tpl.php looks this for the images:

  <?php  if ($view_mode == 'teaser')
    print
render($content['uc_product_image']['0']);
    else
    print
render($content['uc_product_image']);
   
?>
PreviewAttachmentSize
Screen Shot 2013-04-08 at 12.50.54.pngScreen Shot 2013-04-08 at 12.50.54.png123.47 KB
antsa's picture
Offline
Joined: 02/18/2013
Juice: 61
Re: Product image thumbnails Ubercart 3

I got it solved. It might not be the best way to do it, but I made it through a content field. I created a field called productimage and created a field--field-productimage.tpl.php for it. Here's the content of that template file.

<div class="<?php print $classes; ?>"<?php print $attributes; ?>>
  <?php
  
echo '<a href="' . file_create_url($element['#object']->uc_product_image['und'][0]['uri']) . '" class="colorbox" rel="' . $element['#object']->nid . '"><img class="image-style-uc-product" src="' . file_create_url($element['#object']->uc_product_image['und'][0]['uri']) . '" alt="' . $element['#object']->title . '" title="' . $element['#object']->title . '"width="400" height="400"/></a><br>';
   
   
$images = $element['#object']->uc_product_image['und'];
   
$maara = 1;
   
$kuvat = count($images);
   
$kuvat--;

        while (

$maara <= $kuvat):
               
$kuva = file_create_url($element['#object']->uc_product_image['und'][$maara]['uri']);
                echo
'<a href="' . $kuva . '" class="colorbox" rel="' . $element['#object']->nid . '"><img class="image-style-uc-thumbnail" src="' . $kuva . '" alt="' . $element['#object']->title . '" title="' . $element['#object']->title . '" width="100" height="100"/></a>';
               
$maara++;
       
        endwhile;
 
?>

   
</div>

Attached is a screenshot of the working site.

AttachmentSize
Screen Shot 2013-04-10 at 10.53.13.png 299.74 KB
holljac's picture
Offline
Joined: 11/13/2011
Juice: 5
Product display style

It's been a long time since you posted this but I hope you get this message. This looks like how I would like to display multiple pictures of products. Can you help me understand a few things?

When you created the file "field--field-productimage.tpl.php", where did you place it. In the theme folder or in one of the ubercart subfolders, like ubercart/uc_product?

When you say you created a new field, I assume you meant in the content type "product" with a type and widget of "Image". Is that correct? Manage display is set to colorbox with 100x100 thumbnail, etc?

If you could help me, I would be eternally grateful...

Curt

antsa's picture
Offline
Joined: 02/18/2013
Juice: 61
Re: Product display style

Sorry I haven't notices these questions...

Yes, content type is product and widget type is image.

the tpl.php -file is placed in the templates -directory of your theme for example /sites/all/themes/storefront/templates/

anil's picture
Offline
Joined: 01/08/2014
Juice: 3
Ubercart

Dear Sir,
I am beginner in drupal. I have working on a e-commerce project. I use ubercart module. I create more product post. but really i want like this :

http://www.flipkart.com/mens-clothing/winter-seasonal-wear/pr?p%5B%5D=fa...

plz check it.

Plz help me sir.

what requirement

antsa's picture
Offline
Joined: 02/18/2013
Juice: 61
Re: Ubercart

Doing that requires creating a new theme/view for your catalog, that's different than what I've done here.

antsa's picture
Offline
Joined: 02/18/2013
Juice: 61
Re: Product image thumbnails Ubercart 3

I was able to make this happen a lot smarter by editing my node--product.tpl.php -file. Here's the part of my code that handles the ubercart product images:

<?php
       
print render($content['uc_product_image']['0']);
        echo
"<br>";
       
$picturecount = 1;
      
$pictures = count($node->uc_product_image['und']);
       
$pictures--;

        while (

$picturecount <= $pictures):
        print
render($content['uc_product_image'][$picturecount]);
       
$picturecount++;
      
        endwhile;
        echo
"<br>";
?>

With this code you don't have to have any additional fields added to the 'product' content type. From the www.yoursite.com/admin/structure/types/manage/product/display -menu you what image type is used on the first image and the rest of the images. All this code does is simply arrange the thumbnail images next to each other instead of on top of each other.

The code also works with colorbox

Attached here is an image of how the code renders the product images.

AttachmentSize
product_themed.png 107.9 KB
TR
TR's picture
Offline
Bug FinderFAQ ModeratorGetting busy with the Ubercode.
Joined: 11/05/2007
Juice: 3292
Re: Re: Product image thumbnails Ubercart 3

You know, I have a big problem with post like this because what you describe in the initial post as what you *want* is what Ubercart actually gives you AS A DEFAULT. The undesired behaviour you see is entirely of your own doing.

BY DEFAULT, if you install Ubercart, you will have the main (first) product image as a large image, fitting a box of 250px x 250px, (the uc_product image style) displayed in a div of class main-product-image. Any other images attached to the product will be displayed in a second div of class more-product-images, sized to fit in a 35px x 35px box (the uc_thumbnail image style), and arranged horizontally in a row underneath the main product image.

Additionally, if you have colorbox or some other image widget installed, Ubercart will automatically attach that to the images, so if the user clicks on the main image or any of the thumbnail images then ALL the images may be cycled through in the colorbox/lightbox/etc.

So the reason you had a problem in the first place is because you weren't using the defaults; you created/used your own theme which overrode all the Ubercart defaults then you spent all this time and effort trying to recreate what Ubercart already has out-of-the-box.

But please don't suggest that any of what you've decribed above is *necessary* to get the desired behaviour in Ubercart. In particular, creating a node-product.tpl.php is almost guaranteed to break things unless you really understand what you're doing.

<tr>.
antsa's picture
Offline
Joined: 02/18/2013
Juice: 61
Re: Re: Re: Product image thumbnails Ubercart 3

I haven't been able to accomplish horizontal thumbnails even with uc_thumbnail image style.