[Contribution] OPI: OsC Product Image Module

[Parikesit]

Hello

I installed OPI with no problems. But it doesn't work for me as it should. First of all my .htpasswd was off. When editing product I saw ajax circle icons. Next browse images ... OPI founds images but it couldn't show it ... rows of ajax icons loading ... .htpasswd is on now. OPI can't find any images. In both cases uploading image looks like endless uploading ...

.htaccess file is prepared according to manual.

Any help will be very useful.

Regards

Bartosz

 

 

 

First, try to load your image with your browser directly.

 

For example, if you have an image at yourdomain/images/myimage.jpg, load it with following url: yourdomain/images/thumbs/def/adminpreview/myimage.jpg.

 

If you can't load the image with that url, the problem should be in your .htaccess configuration. You have to make sure you use:

1. Linux or nix server
   
2. Mod_Rewrite enabled
   
3. PHP GD enabled
   

 

Second, if you can load the image... the problem should be in OPI setting in your admin page. View source and find below text:

 

var oscProductImageHelper = {
 ...
 ajaxURL: ???,
 imageURL: ???,
 ...
}

 

 

@zaenal

Edited September 16, 2011 by Parikesit

[Parikesit]

If you can't load the image with that url, the problem should be in your .htaccess configuration. You have to make sure you use:

1. Linux or nix server
   
2. Mod_Rewrite enabled
   
3. PHP GD enabled
   

 

Sorry, it's should be:

1. Apache server with mod_rewrite enabled
   
2. PHP GD enabled
   

If you use IIS server or Apache without mod_rewrite, well... the image thumbnail can only be accessed directly to opi_thumbnail.php.

[Guest]

 

Sorry, it's should be:

1. Apache server with mod_rewrite enabled
   
2. PHP GD enabled
   

If you use IIS server or Apache without mod_rewrite, well... the image thumbnail can only be accessed directly to opi_thumbnail.php.

 

 

Hi Parikesit,

 

Does this mean that your unable to configure the module for IIS even with the j/s file you hoped would work.

If this is the case is there any possibility of putting together a help file as to how you might configure opi_thumbnail.php to work with IIS.

 

Many thanks

 

Philip

[Parikesit]

README :

Quick Fix for IIS (mod_rewrite not available)

 

#Step 1: edit opi_thumbnail.php

Commented or remove line 93

if (basename($_SERVER['REQUEST_URI']) == basename(__FILE__)) imageScale404(); //preventing direct access to this file

 

make sure OPI_ENABLE_ADVANCED_REWRITE=true at line 99

define('OPI_ENABLE_ADVANCED_REWRITE', true);

 

 

#Step 2: edit admin/includes/classes/productImageHandlerTpl.inc

Find and replace line below:

 

imageURL: {path:'<?php echo OPI_HELPER_CATALOG_IMAGES; ?>', relative:'<?php echo OPI_HELPER_RELATIVE_DIR; ?>', medium:'<?php echo OPI_HELPER_CATALOG_IMAGES . 'thumbs/def/adminpreview/'; ?>', small:'<?php echo OPI_HELPER_CATALOG_IMAGES . 'thumbs/def/adminthumb/'; ?>', transparent:'images/pixel_trans.gif'},

replace with:

 

imageURL: {path:'<?php echo OPI_HELPER_CATALOG_IMAGES; ?>', relative:'<?php echo OPI_HELPER_RELATIVE_DIR; ?>', medium:'<?php echo tep_catalog_href_link('opi_thumbnail.php', 'def=adminpreview&file='); ?>', small:'<?php echo tep_catalog_href_link('opi_thumbnail.php', 'def=adminthumb&file='); ?>', transparent:'images/pixel_trans.gif'},

 

No further editing required. I've tested it on my machine.

 

 

TESTING

------------

 

- yourdomain/images/myimage.jpg => URL: yourdomain/opi_thumbnail.php?def=adminpreview&file=myimage.jpg

- yourdomain/images/myfolder/otherimage.jpg => URL: yourdomain/opi_thumbnail.php?def=adminpreview&file=myfolder/otherimage.jpg

 

 

***

 

If custom mode enabled -> define('OPI_ENABLE_CUSTOME_MODE', true);

you can load your image with specific mode, width and height

 

Mode=[auto,clip,width,height,crop]

 

Clip URL => yourdomain/opi_thumbnail.php?mode=clip&width=80&height=80&file=myimage.jpg

Crop URL => yourdomain/opi_thumbnail.php?mode=crop&width=80&height=80&file=myimage.jpg

Auto URL => yourdomain/opi_thumbnail.php?mode=auto&width=80&height=80&file=myimage.jpg

Width URL => yourdomain/opi_thumbnail.php?mode=width&width=80&file=myimage.jpg

Height URL => yourdomain/opi_thumbnail.php?mode=height&height=80&file=myimage.jpg

------------

 

Best,

@zaenal

[Parikesit]

OPI Version 2.0 (full package)

 

 

NEW FEATURES:

+ Add checkbox to enable/disable "auto-rename" when uploading image.

+ New configuration "OPI: mod_rewrite enabled"

 

CHANGELOG (Version 2.0)

New Features:

- New configuration "OPI: mod_rewrite enabled" (for IIS, set to false)

- Add checkbox to enable/disable "auto-rename" when uploading image.

- (And cumulative new features from previous update)

 

Enhancement:

- Some javascript enhancement.

 

Bug fix:

- Remove image thumbnail from cache when deleting image

- product_images not included when duplicating product

- (And cumulative bug fix from previous update)

 

 

 

 

README :

Quick Fix for IIS (mod_rewrite not available)

 

#Step 1: edit opi_thumbnail.php

 

With the new version, IIS users just need to edit opi_thumbnail.php as mentioned above and set Configuration > Images > OPI: mod_rewrite enabled to false.

 

@zaenal

[OSC-Sevilla]

I have quite a heavily modified Product_info.php page - is there a manual that shows what lines to change or add?

 

My fancy box is not showing the additional images - have used file compare (winmerge)--- but not making much progress: 3+ hours.

 

file attached is my raw product_info.php page-

 

so if anyone could throw it up and have a quick look that would be great - fresh eyes!

 

 

many thanks - ONE REALLY GREAT MOD - just what was needed!!!!

 

Thank you

[OSC-Sevilla]

No worries - crack it!!

[Parikesit]

I have quite a heavily modified Product_info.php page - is there a manual that shows what lines to change or add?

 

Replace/edit (arround line 35) product query by adding p.products_images after p.products_image

   $product_info_query = tep_db_query("select p.products_id, pd.products_name, pd.products_description, p.products_model, p.products_quantity, p.products_image, pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available, p.manufacturers_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");

with

   $product_info_query = tep_db_query("select p.products_id, pd.products_name, pd.products_description, p.products_model, p.products_quantity, p.products_image, p.products_images, pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available, p.manufacturers_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");

 

Since we don't need another query to table TABLE_PRODUCTS_IMAGE, remove line related to it, and replace with following code

 

<?php
   if (tep_not_null($product_info['products_image'])) {
  $pi_query = tep_db_query("select image, htmlcontent from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . (int)$product_info['products_id'] . "' order by sort_order");
  $products_images = explode(',', $product_info['products_images']);
  //if (tep_db_num_rows($pi_query) > 0) {//
  if (sizeof($products_images) > 1) {

?>
   <div id="piGal" style="float: right;">
  <ul>
<?php
    $pi_counter = 0;
    foreach ($products_images as $pi) {
	    $pi_counter++;
	    $pi_entry = '	    <li><a href="';
	    $pi_entry .= tep_href_link(DIR_WS_IMAGES . 'thumbs/def/large/' . $pi);
	    $pi_entry .= '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . 'thumbs/def/display/' . $pi) . '</a>';
	    $pi_entry .= '</li>';
	    echo $pi_entry;
    }
?>
  </ul>
   </div>
<script type="text/javascript">
$('#piGal ul').bxGallery({
 maxwidth: 300,
 maxheight: 200,
 thumbwidth: <?php echo (($pi_counter > 1) ? '75' : '0'); ?>,
 thumbcontainer: 300,
 load_image: 'ext/jquery/bxGallery/spinner.gif'
});
</script>
<?php
  } else {
?>
   <div id="piGal" style="float: right;">
  <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . 'thumbs/def/large/' . $product_info['products_image']) . '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . 'thumbs/def/display/' . $product_info['products_image'], addslashes($product_info['products_name']), null, null, 'hspace="5" vspace="5"') . '</a>'; ?>
   </div>
<?php
  }
?>
<script type="text/javascript">
$("#piGal a[rel^='fancybox']").fancybox({
 cyclic: true
});
</script>
<?php
   }
?>

 

If you want to see it in action, here my modified products_info.php page http://www.rhinebutik.com/id/product_info.php?products_id=2 . Fell free to try because I disable create account and checkout.

 

@zaenal

[Parikesit]

Another catalog files you should consider to edit:

• popup_image.php
  
• product_reviews.php
  
• product_reviews_info.php
  
• product_reviews_write.php
  
• products_new.php
  
• reviews.php
  
• shopping_cart.php
  
• specials.php
  
• includes/modules/also_purchased_products.php
  
• includes/modules/new_products.php
  
• includes/modules/product_listing.php
  
• includes/modules/boxes/bm_reviews.php
  
• includes/modules/boxes/bm_specials.php
  
• includes/modules/boxes/bm_whats_new.php
  

Find "products_image" in that files, similar to...

 

- tep_image(DIR_WS_IMAGES . $product_info['products_image'], ...)

- tep_image(DIR_WS_IMAGES . $review['products_image'], ...)

- tep_image(DIR_WS_IMAGES . $products_new['products_image'], ...)

- tep_image(DIR_WS_IMAGES . $products['products_image'], ...)

- tep_image(DIR_WS_IMAGES . $reviews['products_image'], ...)

- tep_image(DIR_WS_IMAGES . $specials['products_image'], ...)

- tep_image(DIR_WS_IMAGES . $products[$i]['image'], ...) -> in shopping_cart.php

- tep_image(DIR_WS_IMAGES . $orders['products_image'], ...)

- tep_image(DIR_WS_IMAGES . $new_products['products_image'], ...)

- tep_image(DIR_WS_IMAGES . $listing['products_image'], ...)

- tep_image(DIR_WS_IMAGES . $random_product['products_image'], ...)

 

Edit it by adding 'thumbs/def/small/' after DIR_WS_IMAGE, and make null for width and height, so it will look like

 

tep_image(DIR_WS_IMAGES . 'thumbs/def/small/' . $product_info['products_image'], addslashes($product_info['products_name']), null, null, 'hspace="5" vspace="5"')

 

You can change 'thumbs/def/small/' to other OPI config, for example for popup_image.php you can use 'thumbs/def/large/'.

 

If you want to see it in action, here my modified products_info.php page http://www.rhinebuti...p?products_id=2 . Fell free to try because I disable create account and checkout.

 

The english version is here http://www.rhinebutik.com/en/product_info.php?products_id=2 .

 

@zaenal

Edited September 28, 2011 by Parikesit

[Parikesit]

Since we don't need another query to table TABLE_PRODUCTS_IMAGE, remove line related to it, and replace with following code

 

<?php
if (tep_not_null($product_info['products_image'])) {
  $pi_query = tep_db_query("select image, htmlcontent from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . (int)$product_info['products_id'] . "' order by sort_order");

 

Ahh, sorry... wrong copy paste

 

Replace all lines related to TABLE_PRODUCTS_IMAGES with:

 

<?php
   if (tep_not_null($product_info['products_image'])) {
  $products_images = explode(',', $product_info['products_images']);
  if (sizeof($products_images) > 1) {

?>
   <div id="piGal" style="float: right;">
  <ul>
<?php
    $pi_counter = 0;
    foreach ($products_images as $pi) {
	    $pi_counter++;
	    $pi_entry = '	    <li><a href="';
	    $pi_entry .= tep_href_link(DIR_WS_IMAGES . 'thumbs/def/large/' . $pi);
	    $pi_entry .= '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . 'thumbs/def/display/' . $pi) . '</a>';
	    $pi_entry .= '</li>';
	    echo $pi_entry;
    }
?>
  </ul>
   </div>
<script type="text/javascript">
$('#piGal ul').bxGallery({
 maxwidth: 300,
 maxheight: 200,
 thumbwidth: <?php echo (($pi_counter > 1) ? '75' : '0'); ?>,
 thumbcontainer: 300,
 load_image: 'ext/jquery/bxGallery/spinner.gif'
});
</script>
<?php
  } else {
?>
   <div id="piGal" style="float: right;">
  <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . 'thumbs/def/large/' . $product_info['products_image']) . '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . 'thumbs/def/display/' . $product_info['products_image'], addslashes($product_info['products_name']), null, null, 'hspace="5" vspace="5"') . '</a>'; ?>
   </div>
<?php
  }
?>
<script type="text/javascript">
$("#piGal a[rel^='fancybox']").fancybox({
 cyclic: true
});
</script>
<?php
   }
?>

[maxemus]

This is an great Idea. I downloaded a clean version of 2.3.1 to test it on. I get no previews in admin section. and no image being displayed on product info page (just the spinner). I delete the image off the product but still have it as a thumb all over but the product page.

[maxemus]

I think I found something. it has to do with 'thumbs/def/display/' I have uploaded new images and still there is no directory of thumbs to access the images

[maxemus]

Having the option for an external link is great. like to link a movie from youtube or what not.

[Parikesit]

Hi Raphael,

 

I'm affraid I miss something here because I did not get enough information to answer.

 

I get no previews in admin section. and no image being displayed on product info page (just the spinner).

 

Such symptoms occurs due to any of below:

• using IIS or Apache without modRewrite enabled
  --> set Configuration > Images > OPI: mod_rewrite enabled to false
  
• .htaccess does not configured properly
  --> see opi-advanced.htaccess in the download archieve.
  
• folder catalog:images/_thumbnail_ not writeable
  --> chmod it to 755 (or 775, 777 in several hosting server)
  

I have uploaded new images and still there is no directory of thumbs to access the images

The image should be in folder catalog:/images/products/... There will be no images/thumbs/ folder in your server. It's virtually exists by configuring .htaccess with modRewrite enabled.

 

Having the option for an external link is great. like to link a movie from youtube or what not.

The idea here is to have as many images for our products, without having to upload small/medium/big ones. Then OPI thumbnailer will serve us to produce any image in any size.

 

That's why OPI can not support video, flash, or other file format. Only gif, jpg and png are supported.

 

Best,

@zaenal

Edited October 1, 2011 by Parikesit

[Parikesit]

OPI: TIGHTEN-UP SECURITY

File change: opi_thumbnail.php

 

I just uploaded the new opi_thumbnail.php. There is no new feature in this one, only some enhancement in security issue by sanitizing all user input (global variable _GET).

 

Big thanks to Te Taipo for his advice.

 

DOWNLOAD: http://addons.oscommerce.com/info/8139

(click on "History" tab to see old release)

 

NEW INSTALLATION

--------------------------

• Download full package from previous release (OPI 2.0)
  
• Replace opi_thumbnail.php with the new one.
  

UPGRADE INSTALLATION

 

---------------------------------

• Backup your old opi_thumbnail.php.
  
• If you previously made some configuration change to the old one, do similar changes to this new opi_thumbnail.php.
  
• Upload the new opi_thumbnail.php.
  

 

@zaenal

[OSC-Sevilla]

will this module work with easy populate???

[Parikesit]

will this module work with easy populate???

 

I downloaded the last version of EP (v2-77a) and try to figure out how to make OPI works with it. It's seem it just as easy as add new variable to product's $custom_fields array.

 

Open easypopulate.php, find line below (arround line 300)

$custom_fields[TABLE_PRODUCTS] = array();

 

Insert products_images to the array: 'products_images'=>'OPI'

$custom_fields[TABLE_PRODUCTS] = array('products_images' => 'OPI');

 

I've never use EP, but I'm sure above patch will works.

 

@zaenal

Edited October 4, 2011 by Parikesit

[OSC-Sevilla]

PERFECT!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANX

[OSC-Sevilla]

Seem to be working well but i carnt see any watermark - also is there a way that when you remove the image in Admin (product entry page) it also deletes the files saved in "_thumbnail_"

 

This would save lots of time and confusion. - is there a mod to do this??

[Parikesit]

Hi Gemma,

 

Seem to be working well but i cant see any watermark

 

 

To set your watermark, open opi_thumbnail.php file. Edit some configuration below:

 

 

define('OPI_FS_IMAGES_WATERMARK', OPI_FS_IMAGES_OPI_PATH . str_replace('/', DIRECTORY_SEPARATOR, '_hidden_/watermarked.png') );  // watermark file

define('OPI_IMAGES_WM_WMIN', 600);
define('OPI_IMAGES_WM_HMIN', 600); 
define('OPI_IMAGES_WM_POSITION', 'CC');
define('OPI_IMAGES_WM_OPACITY', 20); 

 

 

 

 

also is there a way that when you remove the image in Admin (product entry page) it also deletes the files saved in "_thumbnail_"

 

If you "remove" the images before deleting a product, the thumbnail will be cleaned up. But if you delete product directly without removing it's images (or you use EP to update product and/or products_images) then the _thumbnail_ will not be cleaned up.

 

The easiest way to deal with... after updating products, for example using EP, go to Configurations > Images > OPI: Cleanup Thumbnail, then set it value to true (then go back to edit/access/view product or categories to make it 'executed'.) Now you will have an empty _thumbnail_ folder.

 

@zaenal

[Guest]

I have installed the addon, but i get the following errors on my admin page when trying to add a photo to a product. I checked those lines but i cant tell what is wrong. I'm pretty new to php. I am using osCommerce v2.3.1.

 

Warning: reset() [[url="http://www.chubbiessurf.com//admin/function.reset"]function.reset[/url]]: Passed variable is not an array or object in /home/dereklee/public_html/chubbiessurf.com/admin/includes/classes/object_info.php on line 17

Warning: Variable passed to each() is not an array or object in /home/dereklee/public_html/chubbiessurf.com/admin/includes/classes/object_info.php on line 18

 

I am also getting a "loading image" on the product page where i would normally upload a new photo.

 

This photo shows both issues. https://picasaweb.google.com/lh/photo/H96UIvgSCLOvo8IP4KvZFA?feat=directlink

 

 

Thanks in advance! Bryan

singleton1981@gmail.com

[Parikesit]

Hi Bryan,

 

This photo shows both issues. https://picasaweb.go...feat=directlink

 

I can't view the image.

 

Warning: reset() [[url="http://www.chubbiessurf.com//admin/function.reset"]function.reset[/url]]: Passed variable is not an array or object in /home/dereklee/public_html/chubbiessurf.com/admin/includes/classes/object_info.php on line 17

Warning: Variable passed to each() is not an array or object in /home/dereklee/public_html/chubbiessurf.com/admin/includes/classes/object_info.php on line 18

 

Something wrong, but not from OPI. Do you install other addon?

 

Just a quick fix

from your admin folder, go to includes/application_top.php, find line/text like "error_reporting()", then change it like below:

//Set the level of error reporting
 error_reporting(0);

 

Best,

@zaenal

 

 

 

Note: for your security concern...

When trying to ask in the forum, hide/mask your real path/root and don't announce it to the world, moreover you also provide your domain and your gmail .

[Guest]

Zaenal,

Thank you for the response. I will try to upload the photo again when i get home. The problem is that when I am on the product page, i only get the loading animations and they never actually load anything so I am unable to upload any pictures to the product. They just sit there spinning :P

[Guest]

Attached is the image as promised. I hope you can open this one. Do you have any idea what may cause this. I thought I read somewhere earlier in this post that it may be caused by the .htaccess but i checked mine and it looks good (to me anyway).

 

I have not installed any other addons, but I am using a template (this one). Sadly the makers of this expensive template are only interested in selling me more services and will not offer any support.

 

http://i158.photobucket.com/albums/t81/bryanlee1981/OPI_Errors-1-1.jpg

 

Thanks again!

[Johnatan]

Hi Parikesit,

 

thnx or useful add-on, I like it very much.

I'll use it on my new shop, but I need your help (advice).

I don't have all pictures, but path to it exist in database.

Before I used Easy-no-picture addon to shows, if I don't have image (there is no file in images dir) shows default image "nopic.jpg".

 

here is the code:

catalog/includes/functions/html_output.php

////
// The HTML image wrapper function
if ( (empty($src) || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {
$src=DIR_WS_IMAGES.'nopic.jpg';
//no image url when you upload the product.
}
//for what`s the url like :'images/aa/'
if(!file_exists($src)||strlen(strstr($src,"."))<=0){
$src=DIR_WS_IMAGES.'nopic.jpg';
}
//over

 

When I instaslled your contrib, everything is fine but only in product_info.php page nopic.jpg appears instead of image until you click on it to increase

 

Do u have some advice

 

greeting from croatia

J.