Jump to content


Corporate Sponsors


Latest News: (loading..)

* * * * * 5 votes

[Contribution] OPI: OsC Product Image Module


121 replies to this topic

#41 roopak

  • Community Member
  • 8 posts
  • Real Name:Roopak Jha
  • Gender:Male

Posted 10 September 2011, 09:39

Hi Thanks for response,

View PostParikesit, on 10 September 2011, 09:02, said:


If I don't mistaken, the image did not show because there is trailling slash before image: "/autotech//images/thumbs/". Maybe that's the problem.
  • Can you try to access below image directly on your browser?



    localhost/autotech/images/thumbs/def/adminthumb/TIK-AUC-23[1].jpg
  • If you can access that url, try to "view source" and find:



    var oscProductImageHelper = {
      ...
      ajaxURL: ???,
      imageURL: ???,
      ...
    }
    
    What the value of imageURL? Is that "http: / / localhost/autotech//images/"?
NO that trailing slash is not an issue, I tried removing that extra slash. Value of image url (in admin while editing the product) is the same that I provide you in my earlier post.

View PostParikesit, on 10 September 2011, 09:02, said:


_thumbnail_ is cache folder. Only images that previously loaded will exist in that folder.

So What to do so that all images should come through _thumbnail_. Currently My system have 100 products which consist of one images each. And all that Images resides in localhost/autotech/images/.

Please help me out.

#42 roopak

  • Community Member
  • 8 posts
  • Real Name:Roopak Jha
  • Gender:Male

Posted 10 September 2011, 09:46

Sorry, it was my mistake.

Images are showing. Only issue remains is while I click on upload image or browse server. Its showing popup with loading image, nothing after that.

#43 roopak

  • Community Member
  • 8 posts
  • Real Name:Roopak Jha
  • Gender:Male

Posted 10 September 2011, 09:50

One more thing I noticed is, Now deleting on images delete from database, but that image resides in the "adminpreview" & "adminthumb" folders. You should add the code of deleting images also. M I right ?

#44 roopak

  • Community Member
  • 8 posts
  • Real Name:Roopak Jha
  • Gender:Male

Posted 10 September 2011, 09:54

View PostParikesit, on 10 September 2011, 09:02, said:

If you can access that url, try to "view source" and find:

  • What the value of imageURL? Is that "http: / / localhost/autotech//images/"?
imageURL: {path:'http://localhost/autotech/images/', relative:'', medium:'http://localhost/autotech/images/thumbs/def/adminpreview/', small:'http://localhost/autotech/images/thumbs/def/adminthumb/', transparent:'images/pixel_trans.gif'},

#45 roopak

  • Community Member
  • 8 posts
  • Real Name:Roopak Jha
  • Gender:Male

Posted 12 September 2011, 06:07

Hi Parikesit,

Still waiting for your response :
Only issue remains is while I click on upload image or browse server. Its showing popup with loading image, nothing after that.

Now no extra "/" is there but then also its showing that loading image.

#46 Parikesit

  • Community Member
  • 263 posts
  • Real Name:zaenal
  • Gender:Male
  • Location:Bandung, Indonesia

Posted 12 September 2011, 09:04

View Postroopak, on 12 September 2011, 06:07, said:

Hi Parikesit,

Still waiting for your response :
Only issue remains is while I click on upload image or browse server. Its showing popup with loading image, nothing after that.

Now no extra "/" is there but then also its showing that loading image.

Hi,

Is there any javascript error message when loading "edit/new product" page?

If you use Firefox, try to add this addon https://addons.mozilla.org/en-US/firefox/addon/web-developer/ to verify javascript error.

Best,

#47 Parikesit

  • Community Member
  • 263 posts
  • Real Name:zaenal
  • Gender:Male
  • Location:Bandung, Indonesia

Posted 12 September 2011, 09:06

View Postroopak, on 10 September 2011, 09:50, said:

One more thing I noticed is, Now deleting on images delete from database, but that image resides in the "adminpreview" & "adminthumb" folders. You should add the code of deleting images also. M I right ?

Yes, you right. I'll add that to next release.

Thank you,
@zaenal

#48 LourenvanGarderen

  • Community Member
  • 1 posts

Posted 12 September 2011, 21:42

Hi,

I am having problems installing OPI on a OsCommerce 2.3.1 (manually updated). I installed al the admin filed e.d., but keep getting this page: http://bayimg.com/kakLlAaDA. It doesn't give any errors or something, so I don't know where to start looking for problems..

Thanks in advance!

#49 francois21

  • Community Member
  • 68 posts
  • Real Name:francois
  • Gender:Male
  • Location:France

Posted 13 September 2011, 19:48

Hello
I think you use IE in compatibility mode.
Try with firefox, if it is good, desable compatibility mode in IE.
Francois

#50 Lyyar

  • Community Member
  • 1 posts
  • Real Name:Bartosz

Posted 14 September 2011, 21:31

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

#51 Parikesit

  • Community Member
  • 263 posts
  • Real Name:zaenal
  • Gender:Male
  • Location:Bandung, Indonesia

Posted 16 September 2011, 06:35

View PostLyyar, on 14 September 2011, 21:31, said:

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:
  • Linux or nix server
  • Mod_Rewrite enabled
  • 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 by Parikesit, 16 September 2011, 06:38.


#52 Parikesit

  • Community Member
  • 263 posts
  • Real Name:zaenal
  • Gender:Male
  • Location:Bandung, Indonesia

Posted 16 September 2011, 17:40

View PostParikesit, on 16 September 2011, 06:35, said:

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:
  • Linux or nix server
  • Mod_Rewrite enabled
  • PHP GD enabled

Sorry, it's should be:
  • Apache server with mod_rewrite enabled
  • 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.

#53 buzzlightyear

  • Community Member
  • 2 posts
  • Real Name:Philip Hennessy

Posted 17 September 2011, 16:47

View PostParikesit, on 16 September 2011, 17:40, said:


Sorry, it's should be:
  • Apache server with mod_rewrite enabled
  • 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

#54 Parikesit

  • Community Member
  • 263 posts
  • Real Name:zaenal
  • Gender:Male
  • Location:Bandung, Indonesia

Posted 18 September 2011, 11:56

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

#55 Parikesit

  • Community Member
  • 263 posts
  • Real Name:zaenal
  • Gender:Male
  • Location:Bandung, Indonesia

Posted 21 September 2011, 19:35

OPI Version 2.0 (full package)

Attached File  upload-image.jpg   32.63K   16 downloads

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)




View PostParikesit, on 18 September 2011, 11:56, said:

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

#56 gfasal

  • Community Member
  • 342 posts
  • Real Name:George
  • Gender:Male
  • Location:Sevilla, Spain

Posted 26 September 2011, 19:29

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

Attached Files


OSC 2.3.1
INSTALLED:Document Manager / Monthly Sales and Tax Returns / Batch Print Invoices / Ultimate HTML EMAILs / AJAX Attribute Manager / OSC PDF Catalog / Move Bookmarks / Sort Order / Easy Populate / Sales Reports / Low Stock Report / Admin: Model # on Category / Product Administration Screen / Mini images in admin / SLiCK reCaptcha / Google + / Beautiful Breadcrumbs / 2.3.1 - Banner Language Mod / ADD New Page / EASY MAP (google) v.3.0 / Who's Online Enhancement for 2.3.1 / Admin Notes / scrambled order number / remove_unused_images / Quantity Select / Unit Weight / Product Specifions (filter results) / AJAX Product Attributes/ Attribute Codes/ Date & Order No. to Invoice/ O.P.I. 2.0 / Attribute Images / Manual Order Editor / Attributes Clone / Order Editor / Create Order / Company VAT No. / Add customer/ CKEditor 2.3.1 / Page Manager / Default images via admin / Percentage Shipping Price / QTPro / Scroll to Top / PDF Invoice / Featured Products / Product Listing Enhancements / AutoBackups / ..Custom Admin Mods /

#57 gfasal

  • Community Member
  • 342 posts
  • Real Name:George
  • Gender:Male
  • Location:Sevilla, Spain

Posted 27 September 2011, 14:25

No worries - crack it!!
OSC 2.3.1
INSTALLED:Document Manager / Monthly Sales and Tax Returns / Batch Print Invoices / Ultimate HTML EMAILs / AJAX Attribute Manager / OSC PDF Catalog / Move Bookmarks / Sort Order / Easy Populate / Sales Reports / Low Stock Report / Admin: Model # on Category / Product Administration Screen / Mini images in admin / SLiCK reCaptcha / Google + / Beautiful Breadcrumbs / 2.3.1 - Banner Language Mod / ADD New Page / EASY MAP (google) v.3.0 / Who's Online Enhancement for 2.3.1 / Admin Notes / scrambled order number / remove_unused_images / Quantity Select / Unit Weight / Product Specifions (filter results) / AJAX Product Attributes/ Attribute Codes/ Date & Order No. to Invoice/ O.P.I. 2.0 / Attribute Images / Manual Order Editor / Attributes Clone / Order Editor / Create Order / Company VAT No. / Add customer/ CKEditor 2.3.1 / Page Manager / Default images via admin / Percentage Shipping Price / QTPro / Scroll to Top / PDF Invoice / Featured Products / Product Listing Enhancements / AutoBackups / ..Custom Admin Mods /

#58 Parikesit

  • Community Member
  • 263 posts
  • Real Name:zaenal
  • Gender:Male
  • Location:Bandung, Indonesia

Posted 28 September 2011, 05:46

View Postgfasal, on 26 September 2011, 19:29, said:

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

#59 Parikesit

  • Community Member
  • 263 posts
  • Real Name:zaenal
  • Gender:Male
  • Location:Bandung, Indonesia

Posted 28 September 2011, 06:26

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/'.

Quote

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 by Parikesit, 28 September 2011, 06:37.


#60 Parikesit

  • Community Member
  • 263 posts
  • Real Name:zaenal
  • Gender:Male
  • Location:Bandung, Indonesia

Posted 28 September 2011, 10:52

View PostParikesit, on 28 September 2011, 05:46, said:

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
    }
?>