Product Image Scaling and Lightbox Effect

[gamehermit]

OK…first of all I want to say that there is absolutely nothing wrong with the cart This issue is strictly from a lack of forethought on my part…in other words a self-induced problem I couldn’t be happier with the cart!

Basically, when i set up all of my products I used a product image that was a 500 X 500 .jpg and scaled it down to 148 X 148 via CSS. This allowed me to have a nice product grid display with a lightbox effect to the full size image. That being said…it’s working like a champ….except that I never took into account the bandwidth and cpu load rescaling that many products would have during busy times

So…now I’m trying to think of the least burdensome way to correct my mistake. So I started digging around and had an idea but I’m not sure if this is feasible.

I’m using the following product display shortcode:

Code:

[wp_eStore_category_products_fancy id=19 style=3 order=3]

It looks like this shortcode comes from (eStore-extra-shortcodes/shortcode_include.php) then gets this (eStore_extra_get_fancy_thumb_code($ret_product)) value from (eStore-extra-shortcodes/eStore_extra_product_display_helper.php) with the following function:

********************************

Code:

function eStore_extra_get_fancy_thumb_code($ret_product,$w=125,$h=125)
{
if(get_option(‘eStore_enable_smart_thumb’))
{
$thumb_img = get_extra_eStore_smart_thumb($ret_product->thumbnail_url,$w,$h);
}
else
{
$thumb_img = $ret_product->thumbnail_url;
}
if(!empty($ret_product->target_thumb_url))
{
$output .= ‘target_thumb_url.'” title=”‘.$ret_product->name.'”><img src=”‘.$thumb_img.'” alt=”‘.$ret_product->name.'” />‘;
}
else
{
$output .= ‘<div id=”lightbox”>thumbnail_url.'” rel=”lightbox” title=”‘.$ret_product->name.'”><img src=”‘.$thumb_img.'” alt=”‘.$ret_product->name.'” /></div>’;
if(!empty($ret_product->additional_images))
{
$product_images = explode(‘,’,$ret_product->additional_images);
foreach ($product_images as $image)
{
$output .= ‘name.'”>‘;
}
}
}
return $output;
}

********************************

I’m not using a product URL so it looks like the standard light box effect and thumbnail is being set here:

********************************

Code:

else
{
$output .= ‘<div id=”lightbox”>thumbnail_url.'” rel=”lightbox” title=”‘.$ret_product->name.'”><img src=”‘.$thumb_img.'” alt=”‘.$ret_product->name.'” /></div>’;

********************************

So here’s where I don’t know if my idea will work or not…

Let’s say that for Product 1 I originally specified a 500 X 500 image called product1.jpg. This is the image that is scaled to the 148 X 148 that I have specified for my product thumb and the light box shows this in its’ full size when the thumb in clicked.

Now I like being able to click on the thumb to see a larger image but was trying to figure out how I could specify a thumb image that was 148 X 148 that wouldn’t need to be scaled when the page rendered. So…If i were to create a second image called 148product1.jpg that was 148 X 148 and uploaded it to the server…could I adjust the code to accept that as the product image and still have the original image (product1.jpg) server as the “lightbox” image?

My question is…can I append the name of the .$thumb_img. with something like the following?:

********************************

Code:

else
{
$output .= ‘<div id=”lightbox”>thumbnail_url.'” rel=”lightbox” title=”‘.$ret_product->name.'”><img src=”‘http://url_to_148_imagethumb/148&#8221;.$thumb_img.'” alt=”‘.$ret_product->name.'” /></div>’;

********************************

Basically I’m trying to rename the product1.jpg to 148product1.jpg for the .$thumb_img. value which would leave all the product data the same n the store management and the original image to serve for the “lightbox” effect but have a smaller image for the thumb that doesn’t need to be scaled.

I know this is a long shot…but if it won’t work do you have any suggestions as to what will? LOL…like I said before…I did this one to myself…there nothing at all wrong with the cart

Thanks so much,

Jack

[gamehermit]

I think I figured something out! WOOT…coffee is kicking in

I only have one image per product so I don’t need to display additional images. BUT I was thinking that I might be able to use the additional images field.

I changed this bit:

***************************

Code:

else
{
$output .= ‘<div id=”lightbox”>thumbnail_url.'” rel=”lightbox” title=”‘.$ret_product->name.'”><img src=”‘.$thumb_img.'” alt=”‘.$ret_product->name.'” /></div>’;
if(!empty($ret_product->additional_images))
{
$product_images = explode(‘,’,$ret_product->additional_images);
foreach ($product_images as $image)
{
$output .= ‘name.'”>‘;
}
}

***************************

to:

***************************

Code:

else
{
$output .= ‘<div id=”lightbox”>additional_images.'” rel=”lightbox” title=”‘.$ret_product->name.'”><img src=”‘.$thumb_img.'” alt=”‘.$ret_product->name.'” /></div>’;
[code]

Basically I replaced the “.$ret_product->thumbnail_url.” in the $output line with “.$ret_product->additional_images.” … so now when I click on the thumbnail the “lightbox” link goes to the additional image instead of the original product image.

So to make everything work, I replaced the original product image with a 148 X 148 .jpg file so no scaling occurs when the page loads. Next I added the original 500 X 500 .jpg image to the “Additional Images” field in the back office.

Lastly, I removed this code that displays the additional images:
***************************
[code]
{
$product_images = explode(‘,’,$ret_product->additional_images);
foreach ($product_images as $image)
{
$output .= ‘name.'”>‘;
}
}

***************************

Kind of backwards but it works

Now the only problem I’m having is I’m not sure how to bulk update the current products through CSV to DB. Can I import a new CSV with just the thumb nail url and the additional url and just have those values updated for the existing products?

Jack

[gamehermit]

Happy Dance ~ Happy Dance!!!! The above worked like a charm I’m now getting scores of 88 – 90 on all of my product pages with Google Page Speed (up from the low 40’s).

All of the product thumbs are un-scaled 148px X 148px images that when clicked open a larger (second) image in “lightbox”. As for the question of uploading the data…I watched the uber cool video by Kirk and learned all I needed to know about importing and exporting via phpMyAdmin: http://www.tipsandtricks-hq.com/how-to-easily-import-or-export-any-of-your-wordpress-database-content-using-phpmyadmin-3415

It might not have ben the “best” fix but it’s working great for us….you can check out one of the product pages here:

http://www.pumpkinlady.com/pumpkin-carving-patterns/pumpkin-carving-patterns-cats-and-witches-pumpkin-carving-patterns/

Jack

[Author]

Posts