Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

[Contribution] OPI: OsC Product Image Module


Parikesit

Recommended Posts

OsCommerce Product Image - OPI Module, is another product image handling with advanced features.

 

Module Name: OsCommerce Product Image - OPI

Release Date: August 17, 2011

Release Version: Version 1.0

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

 

 

 

REQUIREMENTS:

 

  • jQuery & jQuery-UI (included in OsC 2.3)
  • PHP GD library
  • Apache ModRewrite (recommended for Apache server)

 

 

FEATURES:

 

  • Upload image (Ajax),
  • Browse images on server (Ajax),
  • Delete images on server (Ajax),
  • Create new directory inside image folder (Ajax),
  • Admin privileges configurable for: delete image & create new directory
  • Thumbnail configurable,
  • Watermark configurable,
  • Fancy image url (SEO) with Apache ModRewrite (or direct access to PHP image handling for IIS)
  • Multi-languages javascript interface

 

Note:

I created this module based on OsC version 2.3, but I guess this will also works on lower version. Just add jQuery and jQuery-UI to your admin/categories.php page.

 

 

Cheers,

Link to comment
Share on other sites

SNAPSHOTS of OPI

 

OPI: Main View (when creating/editing product)

6055815917

 

OPI: Upload Image Dialog

6056362502

 

OPI: Browse Image Dialog

6056362578

 

OPI: Create Directory Dialog

6055816127

Edited by Parikesit
Link to comment
Share on other sites

Hello

excuse my bad english (I am in France)

Thank's for this work.

All is ok.

How can I activate watermak on images? It's don't work for me . I have not watermark on old image and new image.

 

In admin, when a product have just one image, I can't delete this image.

 

In old system of image, we can add html: Ex for samsung image with youtube extract.

in Opi is this possible?

 

Thank's for this great addon for manage images

Francois

Link to comment
Share on other sites

How can I activate watermak on images? It's don't work for me . I have not watermark on old image and new image.

 

Hi Francois,

 

You can configure watermark on opi_thumbnail.php

 

Line 104: (absolute path to your watermark image)

define('OPI_FS_IMAGES_WATERMARK', str_replace('/', DIRECTORY_SEPARATOR, DIR_WS_IMAGES . '_hidden_/watermarked.png') );

 

Line 110-111:

define('OPI_IMAGES_WM_WMIN', 400);   //set to 0 to disable watermark
define('OPI_IMAGES_WM_HMIN', 100);   //set to 0 to disable watermark

 

OPI_IMAGES_WM_WMIN=400 & OPI_IMAGES_WM_HMIN=100 means that watermark will be added to the image if you request a thumbnail equal or larger than 400 X 100 pixel. If you want to add watermark to every thumbnail, just set OPI_IMAGES_WM_WMIN=1 & OPI_IMAGES_WM_HMIN=1.

 

Btw, watermark only works on thumbnail image.

 

Hope this help,

Cheers

Link to comment
Share on other sites

In admin, when a product have just one image, I can't delete this image.

 

Did you mean "delete" the image from server? or "remove" the image from a product?

 

To "delete" the image from server, that image should be located inside directory or sub-directory of "OPI: Relative Directory". If you want to enable delete all images inside "path_to_your_oscommerce_installation/images/", than just set the value "OPI: Relative Directory" to empty. Login to admin page, than go to:

:: Configuration > Images > OPI: Relative Directory

 

By default "OPI: Relative Directory" value is products (translated to path: path_to_your_oscommerce_installation/images/products/). You can create new directory, upload new image, and delete existing image only relative to the value of this configuration.

 

However, you still can request thumbnail of an image from 'outside' this "OPI: Relative Directory". That's why your existing product-images still appear in admin page (but you can delete them if it's 'outside' "OPI: Relative Directory").

 

In old system of image, we can add html: Ex for samsung image with youtube extract.

in Opi is this possible?

 

That's not possible.

 

But this module works flawlessly with existing OsC image gallery (jQuery). You can find the sample of edited "product_info.php" in the download file inside "oscommerce-2.3.1-edited" folder.

 

Best,

Zaenal

Link to comment
Share on other sites

Hello

thank's for your fast response.

Did you mean "delete" the image from server? or "remove" the image from a product?

 

I create a product ex-->Microsoft IntelliMouse Pro

 

for image whith Opi

button donwnload-->new directory-->mouse-->create

after directory = Mouse (images/products/mouse)

download ex mynewimage.

 

all is ok, new image is download en my product image is here --> products/mouse/microsoft-intellimouse-pro-2.jpg

 

in configuration--images OPI: Relative Directory is products

 

All work great.

 

But if I want no image for this product, if I try to delete image whith X button --> it si not possible I have the waiting image and nothing, when I Save, image is here and not delete.

If I browse server and try to delete this image from server it is not possible

 

alert message Can not delete image: image still in use by other products :: microsoft-intellimouse-explorer-1.jpg

 

If i want some product without image, how can I do?

Thank's

 

Francois

Link to comment
Share on other sites

In admin, when a product have just one image, I can't delete this image.

Francois

Did you mean "delete" the image from server? or "remove" the image from a product?

zaenal

 

Oh, well, I got your point and thanks for pointing that...

 

I try it myself and found that the "preview image" in the left always show the 'spinner' gif animation as if it has not been completed. Technically, the image has been removed from product; it's just minor bug on 'display'.

 

You can make small edit on file ext/jquery/plugins/jquery.oscProductImage.js at line 573 :

 

Change:

$("#opiImageDefault").html('<img src="'+this.options.imageURL.transparent+'" />');

To:

$("#opiImageDefault").removeClass('loading').html('<img src="'+this.options.imageURL.transparent+'" />');

 

Once again, thanks Francois... I will fix it in the next release.

 

Best,

zaenal

Edited by Parikesit
Link to comment
Share on other sites

The addon has been updated.

 

You can download it now in separated download file (http://addons.oscommerce.com/info/8139).

 

See history, and download "jquery.oscProductImage.js - minor bug" file.

 

Best,

zaenal

Link to comment
Share on other sites

 

But if I want no image for this product, if I try to delete image whith X button --> it si not possible I have the waiting image and nothing, when I Save, image is here and not delete.

If I browse server and try to delete this image from server it is not possible

 

alert message Can not delete image: image still in use by other products :: microsoft-intellimouse-explorer-1.jpg

 

If i want some product without image, how can I do?

Thank's

 

Francois

 

Oh... never though anyone want to create product without an image B)

 

Edit your path_to_admin/categories.php. Around line 231, insert the following code:

       } else {
           $sql_data_array['products_image'] = '';
           $sql_data_array['products_images'] = '';
       }

 

The complete block of code will look like this:

       $sql_data_array = array('products_quantity' => (int)tep_db_prepare_input($HTTP_POST_VARS['products_quantity']),
                               'products_model' => tep_db_prepare_input($HTTP_POST_VARS['products_model']),
                               'products_price' => tep_db_prepare_input($HTTP_POST_VARS['products_price']),
                               'products_date_available' => $products_date_available,
                               'products_weight' => (float)tep_db_prepare_input($HTTP_POST_VARS['products_weight']),
                               'products_status' => tep_db_prepare_input($HTTP_POST_VARS['products_status']),
                               'products_tax_class_id' => tep_db_prepare_input($HTTP_POST_VARS['products_tax_class_id']),
                               'manufacturers_id' => (int)tep_db_prepare_input($HTTP_POST_VARS['manufacturers_id']));

       $products_images = isset($_POST['products_images']) ? $_POST['products_images'] : array();
       $products_images = array_unique($products_images);
       if (tep_not_null($products_images)) {
           $sql_data_array['products_image'] = tep_db_prepare_input($products_images[0]);
           $sql_data_array['products_images'] = tep_db_prepare_input(implode(',', $products_images));
       } else {
           $sql_data_array['products_image'] = '';
           $sql_data_array['products_images'] = '';
       }

 

 

alert message Can not delete image: image still in use by other products :: microsoft-intellimouse-explorer-1.jpg

Francois

 

That's right. OPI can not delete an image if that image still in use by any product.

 

Thanks'

zaenal

Edited by Parikesit
Link to comment
Share on other sites

Updated the addon, and now can be downloaded in separated file (http://addons.oscommerce.com/info/8139).

 

See history, and download "categories.php - bug when emptying product image" file.

 

Best,

zaenal

Link to comment
Share on other sites

hi

i have some problems with OPI.

 

I have installed OPI a few days ago but i had some problems like watermark, image display in product info page.

 

So i deside not to use it and I gone back to original categories.php and erase all the files from my server. Unfortunately i did not make a backup from SQL.

 

today i had more time so i decide to reinstall it. None of the images displayed in admin preview and in product info page.

 

Is there any way to solve all these???

 

thx in advance

Link to comment
Share on other sites

hi

i have some problems with OPI.

 

I have installed OPI a few days ago but i had some problems like watermark, image display in product info page.

 

So i deside not to use it and I gone back to original categories.php and erase all the files from my server. Unfortunately i did not make a backup from SQL.

 

today i had more time so i decide to reinstall it. None of the images displayed in admin preview and in product info page.

 

Is there any way to solve all these???

 

thx in advance

 

in admin preview is displaying the loading circle...

Link to comment
Share on other sites

in admin preview is displaying the loading circle...

 

Can you "view source" and find the URL to the images... something like <img src="yourdomain/images/def/adminthumb/...etc" />

 

I would like to know the url to your image.

 

@zaenal

Link to comment
Share on other sites

Can you "view source" and find the URL to the images... something like <img src="yourdomain/images/def/adminthumb/...etc" />

 

I would like to know the url to your image.

 

@zaenal

 

ok i have done it now.

 

Do i have to edit all the files in the edit diretctory????

Link to comment
Share on other sites

Hello

 

I have not watermark on my images.

 

My opi_thumbnails.php

require_once('includes/configure.php');
error_reporting(0);

//NO APACHE REWRITE, remove/commented below line
if (basename($_SERVER['REQUEST_URI']) == basename(__FILE__)) imageScale404(); //preventing direct access to this file

//disable custom mode: crop,auto,clip,width and height request
define('OPI_ENABLE_CUSTOME_MODE', true); //if you disabled it, also edit .htaccess and remove rewriteRule that command customMode

//enable advance apache mod-rewrite (see readme.html)
define('OPI_ENABLE_ADVANCED_REWRITE', true);

define('DIR_FS_OPIFILE_HERE', dirname(__FILE__));                               // absolute path to this file
define('OPI_FS_IMAGES_OPI_PATH', DIR_FS_OPIFILE_HERE . str_replace('/', DIRECTORY_SEPARATOR, '/images/') );             // OSC_PRODUCT_IMAGE_ABSOLUTE_PATH
define('OPI_FS_IMAGES_OPI_THUMB', OPI_FS_IMAGES_OPI_PATH . str_replace('/', DIRECTORY_SEPARATOR, '_thumbnail_/'));      // OSC_PRODUCT_IMAGE_ABSOLUTE_PATH + OSC_PRODUCT_IMAGE_THUMBNAIL_DIRECTORY
define('OPI_FS_IMAGES_WATERMARK', str_replace('/', DIRECTORY_SEPARATOR, DIR_WS_IMAGES . '_hidden_/watermarked.png') );  // watermark file

define('OPI_IMAGES_MAXWIDTH', 1000); //set to 0 to disable
define('OPI_IMAGES_MAXHEIGHT', 1000);//set to 0 to disable
define('OPI_IMAGES_MINWIDTH', 50);   //set to 0 to disable
define('OPI_IMAGES_MINHEIGHT', 50);  //set to 0 to disable
define('OPI_IMAGES_WM_WMIN', 30);   //set to 0 to disable watermark
define('OPI_IMAGES_WM_HMIN', 30);   //set to 0 to disable watermark

/*definedMode*/
$definedMode = array();

//do not edit adminthumb and adminpreview -> for administration page
$definedMode['adminthumb']     = array('mode'=>'clip',  'width'=>80,  'height'=>80);
$definedMode['adminpreview']   = array('mode'=>'width', 'width'=>150, 'height'=>0);

//you can edit/add/remove definedMode's below
$definedMode['display']   = array('mode'=>'width', 'width'=>200, 'height'=>0);
$definedMode['small']     = array('mode'=>'clip',  'width'=>100,  'height'=>100);
$definedMode['large']     = array('mode'=>'auto',  'width'=>600, 'height'=>800);
$definedMode['square']    = array('mode'=>'clip',  'width'=>220, 'height'=>220);
$definedMode['customwidth']     = array('mode'=>'width', 'width'=>150, 'height'=>0);   //width & height must be defined
$definedMode['customheight']    = array('mode'=>'height','width'=>0,   'height'=>150); //width & height must be defined

 

What is not good please

 

Thank's

Francois

Link to comment
Share on other sites

Hello

 

I have not watermark on my images.

 

Thank's

Francois

 

Hi Francois,

 

Did you clean up the thumbnail cache after changing the code?

Just go to admin page: Configuration > Images > OPI: Cleanup Thumbnail

Link to comment
Share on other sites

Hi

thank's for your fast response.

I have not watermark with your solution.

I have an other problem : Opi don't work in categories with IE. It work great with other like Firefox, Opera, Chrome, Safari but not with Internet Explorer.

 

An idea??

Francois

Link to comment
Share on other sites

Hi

about my precedent post.

Some snapshot with Ie and with Firefox.

All is Ok with all browsers, without Ie

I try with YOUR categories_opi.php that I rename categories.php and I have the same result.

With IE http://imageshack.us/photo/my-images/204/opiie.jpg/

With firefox http://imageshack.us/photo/my-images/709/opifirefox.jpg/

 

Thank's

francois

Link to comment
Share on other sites

Im having exactly the same issue as Kosbau, in that I just get a AJAX loading circle and when I click any buttons I just get a constant loading bar.

 

I suspect to do with a wrong path somewhere but I cant find out where. Heres the relevant code. Note that Ive changed the admin address to protect the site;

 

<div id="opiContainer" style="position:relative">
 <!--help dialog-->
 <div id="opiHelpDialog" class="opiDialog" title="Product Image Help">
   <div class="content">

   <h2>OsC Product Image Module<br /><small><a href="http://blog.lokamaya.net" target="_blank">By: zaenal/lokamaya</a></small></h2>
     <dl>
       <dt>Image List</dt>
       <dd>
         <ul>
           <li>You can <b>sort</b>, <b>preview</b> and <b>remove</b> product's images.</li>

           <li>Sort the image by draging it, the <i>first one</i> will become default image. And don't forget to <i>save your work</i> by clicking <b>save</b> button.</li>
         </ul>
       </dd>

       <dt>Upload Image</dt>

       <dd>
         <ul>
           <li>Extension allowed: .gif, .jpg, .jpeg, .png</li>
           <li>After successfully uploading file, the image will be added to product image list automagically. But you still need to save your work by saving the main product form (click button <b>save</b>) .</li>
         </ul>

       </dd>
       <dt>Browse Server</dt>

       <dd>
         <ul>
           <li>Browse the image directory from server.</li>
           <li>Click on <b>add</b> button to add that image to the product.</li>

           <li>Click on <b>trash</b> button will remove the image from server.</li>

         </ul>
       </dd>
</dl>    </div>
 </div>

 <!--upload dialog-->


 <div id="opiUploadDialog" class="opiDialog" title="Upload Image">
   <div class="content"><div class="contentWrap">
     <form name="opiUploadForm" action="http://mysite.co.uk/myadminaddress/opi_productimage.php?action=upload" method="post" target="opiUploadFrame" enctype="multipart/form-data">
         <input type="hidden" name="opi_rename" value="" />

         <div class="dlLeft"><ul id="uploadPreview">
           <li id="uploadPreviewImage">
             <span> IMAGE PREVIEW  <i>not available</i> <b>upgrade your browser!</b> </span>

           </li>
           <li id="uploadPreviewInfo">-</li>
         </ul></div>

         <div class="dlRight"><dl class="dlcentered">
           <dt>Server Directory:</dt>
           <dd>
             <select name="opi_folder" id="opi_folder_upload" title="Select Directory"></select>
           </dd>

           <dt>Choose File:</dt>
           <dd>
             <input type="file" accept="image/*" name="opi_upload" id="opi_upload" title="File to Upload" />
           </dd>
         </dl>
         <div class="loader"><span></span></div></div>
     </form>
   </div></div>

 </div>

 <!--create directory dialog-->

 <div id="opiDirectoryDialog" class="opiDialog" title="New Directory">
   <div class="content"><div class="contentWrap">
     <form action="http://mysite.co.uk/myadminaddress/opi_productimage.php?action=createDirectory" method="post" name="opiDirectoryForm">
         <br /><br /><dl class="dlcentered">
           <dt>Server Directory:</dt>
           <dd>

             <select name="opi_folder" id="opi_folder_new" title="Select Directory"></select>
           </dd>
           <dt>New Directory:</dt>
           <dd>
             <input type="text" name="opi_directory" id="opi_directory" title="Directory Name" />
           </dd>
         </dl>
     </form>

     <div class="loader"><span></span></div>
   </div></div>
 </div>  

 <!--browse dialog-->

 <div id="opiBrowseDialog" class="opiDialog" title="Browse Image">
   <div class="content"><div class="contentWrap">
     <form action="http://mysite.co.uk/myadminaddress/opi_productimage.php?action=browseFiles" method="post" name="opiBrowseForm"><input type="hidden" name="page" id="opi_page_browse" value="1" />
         <dl class="dlcentered">
           <dd>

             <select name="opi_folder" id="opi_folder_browse" title="Select Directory"></select>
           </dd>
         </dl>
         <div style="clear:both"></div>
     </form>
     <div class="loader"><span></span></div>
     <div>
       <ul id="opiImageBrowse" class="opiImageListing"></ul>
       <div style="clear:both"></div>

     </div>
   </div></div>
 </div>
</div>
<script type="text/javascript">
<!--
var oscProductImageHelper = {
 sessionLife: 1440000, 
 cleanup: false, 
 ajaxURL: 'http://mysite.co.uk/myadminaddress/opi_productimage.php',
 imageURL: {path:'http://mysite.co.uk/images/', relative:'products/', medium:'http://mysite.co.uk/images/thumbs/def/adminpreview/', small:'http://mysite.co.uk/images/thumbs/def/adminthumb/', transparent:'images/pixel_trans.gif'},
 privileges: {directory:1,deletes:1},
 language_id:'1',
 products_images: 'SRB50.jpg',
 allowedExtensions: 'gif|jpg|jpeg|png',
 buttons: {add:'Add', back:'Back', cancel:'Cancel', close:'Close', confirm:'Confirm', create:'New Directory', deletes:'Delete', oke:'Ok', preview:'Preview', remove:'Remove', save:'Save', submit:'Submit', upload:'Upload', xBrowse:'Browse Server', xHelp:'Help', xUpload:'Upload Image'},
 labels: {add:'Add to Product', create:'Create New Directory', dirBrowse:'Browse Directory', dirNew:'New Directory', dirTarget:'Target Directory', deletes:'Delete from Server', preview:'Preview Image', remove:'Remove from Product', tips:'* Drag the image to short', page:'Page', of:'of', from:'From', files:'files', pleaseSelect:'Select:'},
 messages: {
   unknown: 'Unknown error',
   confirm_remove: 'Remove this image from current product?',
   confirm_delete: 'Delete this image from server?',
   success_upload: 'Success: Image has been uploaded successfully',
   success_create: 'Success: New directory has been created',
   success_delete: 'Success: Image has been deleted from server',
   error_not_exist: 'Error: Directory does not exist.',
   error_not_writable: 'Error: File/directory is not writeable',
   error_not_readable: 'Error: directory does not exist/readable',
   warning_empty_folder: 'There is no image in this directory',
   error_delete_global: 'Can not delete image: file is not writeable or not found',
   error_delete_empty: 'Can not delete image: file is not writeable or not found',
   error_delete_in_use: 'Can not delete image: image still in use by other products',
   error_delete_privilege: 'You have no privilege to delete image',
   error_select_directory: 'Please select target directory',
   error_file_empty: 'Please select file to upload',
   error_file_extension: 'Extension not allowed',
   error_create_privilege: 'You have no privilege to create new directory',
   error_create_exist: 'Directory already exists',
   error_create_empty: 'Directory name is empty or less than 4 characters',
   error_create_alphanumeric: 'Only alphanumeric, dash and underscore are allowed for directory name',
   error_create_lowercase: 'Directory name must be in lowercase',
   error_create_character: 'Directory name should not be started with dash or underscore'
 }
};
//-->
</script>
<link rel="stylesheet" type="text/css" href="http://mysite.co.uk/ext/jquery/plugins/jquery.oscProductImage.css"></link>
<script type="text/javascript" src="http://mysite.co.uk/ext/jquery/plugins/jquery.oscProductImage.js"></script>


</div>

Link to comment
Share on other sites

Hello, i need help to solve this...

When i try to upload files, I get: “IMAGE PREVIEW not available upgrade your browser!

I can’t Choose Files...wacko.png

 

I’m using Firefox 3.6.21

 

Sorry my bad English.

Cheers.

 

PD: Works well in Chrome…happy.png

Link to comment
Share on other sites

just I have not watermarks

Francois

 

Sorry, if it's a little to late...

 

I have updated and uploaded new opi_thumbnail.php in separated download file (http://addons.oscommerce.com/info/8139). I hope this will fix this issue.

 

And I also added new feature to the watermark.

Now you can set the position and opacity of your watermark.

 

//TL (top-left), TC (top-center), TR (top-right), CL (center-left), CC (center-center), CR (center-right), BL (bottom-left), BC (bottom-center), and BR (bottom-right)
define('OPI_IMAGES_WM_POSITION', 'CC');
define('OPI_IMAGES_WM_OPACITY', 20); 

 

Cheers,

@zaenal

Link to comment
Share on other sites

Hello, i need help to solve this...

When i try to upload files, I get: “IMAGE PREVIEW not available upgrade your browser!

I can’t Choose Files...wacko.png

 

I’m using Firefox 3.6.21

 

Sorry my bad English.

Cheers.

 

PD: Works well in Chrome…happy.png

 

 

"Image Preview" only available for browser that support window.createObjectURL or window.webkitURL. Newest version of Chrome, Firefox and Safari support this javascript method. Unfortunately, none of IE version support this.

 

But... even your browser does not support this method, you still able to uplad the image.

 

This is just local image preview (the image still in your PC and not been uploaded to server). It's just fancy feature, so you can see your image before it been uploaded to server.

Link to comment
Share on other sites

Im having exactly the same issue as Kosbau, in that I just get a AJAX loading circle and when I click any buttons I just get a constant loading bar.

 

Hi Craig,

 

It's seem the .htaccess file did not configured properly.

 

Did you use Apache with modRewrite enabled?

 

 

Best,

@zaenal

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...