16 replies [Last post]
RickA's picture
Offline
Joined: 02/03/2009
Juice: 71
Was this information Helpful?

Not sure if this really an Ubercart issue but here goes. Being a newbie, I could really use some help.

I want to get the category image on the category page of my Ubercart store ([path]/catalog/7) to be clickable so that it opens up to a larger size using imagecache just like the product images do. The category page is displaying a thumbnail of the original image. The source code says the image that appears is stored as [path]/sites/default/files/imagecache/uc_thumbnail/image.jpg. The preset uc_thumbnail governs its size.

Is there a way to make this image clickable to full size?

srubin's picture
Offline
Joined: 02/18/2009
Juice: 13
Re: Getting Category Images to Enlarge with ImageCache

I have been trying to accomplish this for weeks. There are many threads on here asking the same question, but with no answer. Perhaps it can't be done. I have posted some of the things I've tried (getting close enough to generate the photo, but not in thickbox). If I find anything, I'll post here. I at least found the controlling code. I put the theme_uc_catalog_product_grid function (found near the end of uc_catalog.module) inside template.php in my theme folder to make changes. You need to change THEME_uc_catalog(...) to YOURTHEMENAME_uc_catalog and it takes control. Meanwhile, this is my explanation/question in another thread:

http://www.ubercart.org/forum/support/7732/how_2_change_appearance_catal...

I've been trying to change to thickbox on the grid for weeks and have to finally ask for directions....

I have tried turning on thickbox on the content page, and then created a new imagecache preset called 'grid_page' in case there was something wrong with product_list, but that doesn't help.

I have now replaced the theme_uc_catalog_product_grid with this:

if (module_exists('imagecache') && isset($product->field_image_cache) && file_exists($product->field_image_cache[0]['filepath'])) {
$imagelink = l(theme('imagecache', 'grid_page', $product->field_image_cache[0]['filepath'], $product->title, $product->title), $product->field_image_cache[0]['filepath'], array(), null, null, false, true);
}

Now I get the full image link, but not in thickbox. I see in the product pages there is a _fid on the name, but I can't seem to get it to work. I don't think it is picking up the 'grid_page' setting either, since I altered the size of what I want and it's still the same as before. It doesn't do any better with 'product_list' or 'product'.

Any help would be MUCH appreciated.

Thanks!

TR
TR's picture
Offline
Bug FinderFAQ ModeratorGetting busy with the Ubercode.
Joined: 11/05/2007
Juice: 3424
Re: Re: Getting Category Images to Enlarge with ImageCache

To get thickbox to work on click the anchor tag has to have class=thickbox. See theme_uc_product_image() for an example of the syntax. Modify your theme_uc_catalog_product_grid() and you should have what you need.

<tr>.
srubin's picture
Offline
Joined: 02/18/2009
Juice: 13
Re: Re: Re: Getting Category Images to Enlarge with ImageCache

I have tried inserting class="thickbox" everywhere in the following line:

$imagelink = l(theme('imagecache', 'grid_page', $product->field_image_cache[0]['filepath'], $product->title, $product->title), $product->field_image_cache[0]['filepath'], array(), null, null, false, true)

should I be putting it somewhere else?

TR
TR's picture
Offline
Bug FinderFAQ ModeratorGetting busy with the Ubercode.
Joined: 11/05/2007
Juice: 3424
Re: Re: Re: Re: Getting Category Images to Enlarge with ImageCac
<tr>.
RickA's picture
Offline
Joined: 02/03/2009
Juice: 71
Re: Re: Re: Re: Re: Getting Category Images to Enlarge with Imag

Is this the answer? If so, what do I do with it?

TR
TR's picture
Offline
Bug FinderFAQ ModeratorGetting busy with the Ubercode.
Joined: 11/05/2007
Juice: 3424
Re: Re: Re: Re: Re: Re: Getting Category Images to Enlarge with

I was responding to srubin. The answer to your question is you need to override the theme function that displays the catalog. srubin described the process above, but he didn't get the code quite right.

<tr>.
srubin's picture
Offline
Joined: 02/18/2009
Juice: 13
Re: Re: Re: Re: Re: Re: Getting Category Images to Enlarge with
RickA's picture
Offline
Joined: 02/03/2009
Juice: 71
Re: Re: Re: Re: Re: Re: Re: Getting Category Images to Enlarge w

I just discovered that you have posted a solution with detailed instructions. Thank you very much for all your work.

I am going to try it as soon as I get a chance but I am wondering if it will work with lightbox. I am using Lightbox instead of Thickbox per the recommendation of TopNotch themes. See Free 29 Page Ubercart Guide from Top Notch Themes!

Update: Stephanie at TopNotch Themes says Drupal 5 used Thickbox while Drupal 6 uses Lightbox2.

Lyle's picture
Offline
AdministratoreLiTe!
Joined: 08/07/2007
Juice: 6846
Re: Re: Re: Re: Re: Re: Re: Re: Getting Category Images to Enlar

In Drupal 6, Ubercart can use either Thickbox or Lightbox2. There's a setting to switch between them in the Product settings now.

RickA's picture
Offline
Joined: 02/03/2009
Juice: 71
Re: Re: Re: Re: Re: Re: Re: Re: Re: Getting Category Images to E

Then would it be preferable to change my Ubercart settings to Thickbox since the fix is written that way or edit the fix to call Lightbox instead?

josteinhanssen's picture
Offline
Joined: 04/06/2009
Juice: 6
Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Getting Category Images

Here's what I did to get the images to open in lightbox (in Drupal 6):

- copy function theme_uc_catalog_product_grid($products) to your template.php file
- replace:

if (module_exists('imagecache') && isset($product->field_image_cache) && file_exists($product->field_image_cache[0]['filepath'])) {
      $imagelink = l(theme('imagecache', 'product_list', $product->field_image_cache[0]['filepath'], $product->title, $product->title), "node/$nid", array('html' => TRUE));
    }
    else {
      $imagelink = '';
    }

with:

if (module_exists('imagecache') && isset($product->field_image_cache) && file_exists($product->field_image_cache[0]['filepath'])) {
      $imagelink = l(theme('imagecache', 'product_list', $product->field_image_cache[0]['filepath'], $product->title, $product->title), $product->field_image_cache[0]['filepath'], array('html' => TRUE, 'attributes' => array('rel' => 'lightbox[catalog]', 'title' => $product->body, 'alt' => $product->body)));
    }
    else {
      $imagelink = '';
    }

I've also added the body element (the main content/description) to the the title and alt tags. If you want the title instead, replace $product->body with $product->title.

Got to admit that I'm pretty new at programming and PHP, but it seems to work for me...

dontpanic's picture
Offline
Joined: 04/05/2009
Juice: 40
am i missing something?

I copied over the function to template.php

changed
function theme_uc_catalog_product.....
to
function twilight_uc_catalog_product.....

then updated the code from the previous post.

The catalog thumbnails are still linking to their product nodes instead of the lightbox...

am i missing something?
---
UPDATE:
Went to admin>performance> clear caches. lightbox works on the catalog page now.

dontpanic's picture
Offline
Joined: 04/05/2009
Juice: 40
Add Cart LInks?

I would like to use the cart links api to put an "Add to Cart" link in the lightbox popup.

The html looks like this.. ( from this page: http://drupal.org/node/356124 )

<a href="images/image-1.jpg" rel='lightbox[][&lt;a href="http://www.yourlink.com"&gt;View Image Details&lt;/a&gt;]'>image #1</a>

I'm a beginner at php, is it easy to include this in the php code so it dynamically creates the correct cart link for each product?

josteinhanssen's picture
Offline
Joined: 04/06/2009
Juice: 6
Re: Add Cart LInks?

I was actually thinking about doing something like that for myself later, but haven't got around to look closer at it... I guess you can use lightbox' inline-function and a custom theme for your product nodes to achieve something like that..

Maybe you can try this:

if (module_exists('imagecache') && isset($product->field_image_cache) && file_exists($product->field_image_cache[0]['filepath'])) {
      $imagelink = l(theme('imagecache', 'product_list', $product->field_image_cache[0]['filepath'], $product->title, $product->title), "node/$nid", array('html' => TRUE, 'attributes' => array('rel' => 'lightmodal[catalog]', 'title' => $product->body, 'alt' => $product->body)));
    }
    else {
      $imagelink = '';
    }

Then you have to make a custom node-product.tpl.php-file and theme your cartlink in here, along with any other information you want..

Haven't tried this so I don't know if it'll work, and it may be a little unconvenient.. Let me know if you have any success.

Ilja's picture
Offline
Joined: 02/11/2011
Juice: 6
Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Getting Category Ima

where exactly do i need to copy the function inside the template.php file? i keep getting parse errors, no experience with php overrides at all i admit..

conchur's picture
Offline
Joined: 03/22/2009
Juice: 32
Re: Getting Category Images to Enlarge with ImageCache

All of the replies and related posts seem to be about adding Lightbox functionality to the grid images (i.e. products in the selected category). I understand from RickA's original post that he wants the category image (appearing top-right of the category page) to also use the lightbox feature. If that is the case, then it's not the 'theme_uc_catalog_product_grid' you want but the 'theme_uc_catalog_browse' function.

This function is in modules/ubercart/uc_catalog/uc_catalog.pages.inc

You need to copy the function and replace the following line (line 81 in uc_catalog.pages.inc):

$output .= theme('imagecache', 'uc_thumbnail', $catalog->image['filepath'], $catalog->name, $catalog->name, array('class' => 'category'));

with this new code which simply applies a similar function to that used for the product picture:

$image_widget = uc_product_get_image_widget();
$image_widget_func = $image_widget['callback'];

if ($image_widget) {
  $output .= '<a href="'. imagecache_create_url('product_full', $catalog->image['filepath']) .'" title="'. $catalog->name .'"'. $image_widget_func(0) .'>';
}
$output .= theme('imagecache', 'uc_thumbnail', $catalog->image['filepath'], $catalog->name, $catalog->name, array('class' => 'category'));
if ($image_widget) {
  $output .= '</a>';
}

Then put the new function somewhere in your theme template.php as YOURTHEME_uc_catalog_browse, as previously discussed.

HTH.