Post by gsk » Mon Apr 04, 2011 5:40 pm

This is my first post in the forum, and I would like to congratulate all opencart developers and also all people that are supporting this project.
It's an excellent piece of software, and although I do not own an online store, neither make any profit based on opencart, I would like to offer my little effort to this project.

Just into the point:
Default opencart file manager is a real pain when dealing with product images.
The solution provided here is based on the agile uploader (a totaly free component, more info here: http://www.shift8creative.com/projects/ ... index.html), that in my opinion is excellent for a cart product image uploading (and not only).

Tested OpenCart Versions:
================
1.4.9.3, 1.4.9.4

What does it do:
================
1. Image resize on client side using flash and jquery
2. Batch image selection and resize at once
3. 2 clicks process to select all images for a product (and of course auto resize) and upload

Pros:
================
1. Batch image selection from your PC (using shift or alt keys)
2. Batch image auto resize to predefined size
3. Batch image upload to opencart image directory
4. Save lots of time manipulating images
5. Save network bandwidth as the images get resized before upload
6. Save host disk space
7. Uploaded image quality is excellent

Tip:
================
Product admins browser need Adobe Flash 10 or later to be installed (it's only for the admins, not the cart visitors)

How to install:
==================
Unzip and upload the contents of the admin folder to the admin of your OpenCart install.
Only a couple of opencart core files are slightly modified to add the component's code.

Screenshot:
================
agile_uploader.jpg

agile_uploader.jpg (65.27 KiB) Viewed 21283 times

Demo:
================
http://technology.comoj.com/admin/
username:test
password:test

Download:
================ I hope this helps lots of opencart funs to do their job more productive, when working on their cart products.

Enjoy,
George
Last edited by gsk on Thu Apr 21, 2011 3:43 am, edited 4 times in total.

gsk
New member

Posts

Joined
Mon Apr 04, 2011 1:46 am

Post by micdansan » Tue Apr 19, 2011 11:46 am

Tried this module. It only upload images for the "Additional Images" it doesn't upload images in the "MAIN Product". Is there any module that would replace "the current COMPLICATED IMAGE MANAGER" to "simple file upload field"?

New member

Posts

Joined
Fri Apr 01, 2011 10:25 pm

Post by gsk » Tue Apr 19, 2011 4:30 pm

I could alter this module by the following way:
Remove the main product image from the Data tab, and add a radio button next to the images on the Image tab, so you can choose which one of all images will be the main product image.
This would require core files modification.
Feel free to comment on that.

gsk
New member

Posts

Joined
Mon Apr 04, 2011 1:46 am

Post by gsk » Wed Apr 20, 2011 3:25 am

Ok, that was easier that I first thought of.
I have modified my first post with the new modification.
Now you can upload all images at once, and just select which of them will be the main product image.

Enjoy.

gsk
New member

Posts

Joined
Mon Apr 04, 2011 1:46 am

Post by micdansan » Wed Apr 20, 2011 9:25 am

gsk wrote:Ok, that was easier that I first thought of.
I have modified my first post with the new modification.
Now you can upload all images at once, and just select which of them will be the main product image.

Enjoy.
GSK this is the best Image manager compared to the current image manager of OC. It loads fast and now I can select an IMAGE to set as Main Product Image. I recommend this! Thumbs UP! GSK..

New member

Posts

Joined
Fri Apr 01, 2011 10:25 pm

Post by micdansan » Wed Apr 20, 2011 11:36 am

By the GSK, you miss 1 thing... How about the Image manager in the category section(Add Categories w/ images). Can you include it in your module?

New member

Posts

Joined
Fri Apr 01, 2011 10:25 pm

Post by micdansan » Wed Apr 20, 2011 2:13 pm

and also GSK!, the image I upload also appear in "Additional Images"(If I upload only 1 image it also appear in the Additional Images). Making duplicate images.

Can you fix this?

New member

Posts

Joined
Fri Apr 01, 2011 10:25 pm

Post by gsk » Thu Apr 21, 2011 12:43 am

I will look into this.

gsk
New member

Posts

Joined
Mon Apr 04, 2011 1:46 am

Post by gsk » Thu Apr 21, 2011 1:43 am

micdansan wrote:and also GSK!, the image I upload also appear in "Additional Images"(If I upload only 1 image it also appear in the Additional Images). Making duplicate images.

Can you fix this?
In order to avoid this issue, please do the following modification:
In catalog/controller/product/product.php:

find:

Code: Select all

			if ($product_info['image']) {
				$image = $product_info['image'];
			} else {
				$image = 'no_image.jpg';
			}
and after add:

Code: Select all

                        $this->data['extra'] = $this->model_tool_image->resize($image, $this->config->get('config_image_additional_width'), $this->config->get('config_image_additional_height'));
In file catalog/view/theme/default/template/product/product.tpl:

replace:

Code: Select all

      <a tab="#tab_image"><?php echo $tab_image; ?>  (<?php echo count($images); ?>)</a>
with:

Code: Select all

      <a tab="#tab_image"><?php echo $tab_image; ?>  (<?php echo count($images)-1; ?>)</a>
also replace:

Code: Select all

        <?php foreach ($images as $image) { ?>
            <div style="display: inline-block; float: left; text-align: center; margin-left: 5px; margin-right: 5px; margin-bottom: 10px;"><a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="thickbox" rel="gallery"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" style="border: 1px solid #DDDDDD; margin-bottom: 3px;" /></a><br />
            <span style="font-size: 11px;"><?php echo $text_enlarge; ?></span></div>
        <?php } ?>
with:

Code: Select all

        <?php foreach ($images as $image) { ?>
          <?php if ($image['thumb'] != $extra) { ?>
            <div style="display: inline-block; float: left; text-align: center; margin-left: 5px; margin-right: 5px; margin-bottom: 10px;"><a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="thickbox" rel="gallery"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" style="border: 1px solid #DDDDDD; margin-bottom: 3px;" /></a><br />
            <span style="font-size: 11px;"><?php echo $text_enlarge; ?></span></div>
          <?php } ?>
        <?php } ?>
This should do the trick.

gsk
New member

Posts

Joined
Mon Apr 04, 2011 1:46 am

Post by micdansan » Sat Apr 23, 2011 1:47 pm

Thanks! gsk! It work! No more duplicate images..

How about the the image manager in Adding Categories, can you replace it with your module?
Last edited by micdansan on Sat Apr 23, 2011 5:43 pm, edited 1 time in total.

New member

Posts

Joined
Fri Apr 01, 2011 10:25 pm

Post by LeorLindel » Sat Apr 23, 2011 4:58 pm

formatting and translation

In admin\controller\catalog\product.php

Find:

Code: Select all

		$this->data['text_none'] = $this->language->get('text_none');
Add after:

Code: Select all

		$this->data['text_add_images'] = $this->language->get('text_add_images');
		$this->data['text_upload_server'] = $this->language->get('text_upload_server');

In admin\language\english\catalog\product.php

Find:

Code: Select all

$_['text_option_value']      = 'Option Value';
Add after:

Code: Select all

$_['text_add_images']		 = 'Add image(s):
$_['text_upload_server']	 = 'Upload to Server';
In admin\view\template\catalog\product_form.tpl

Find:

Code: Select all

        </table>
      </div>
    </form>
	<form id="multipleDemo" enctype="multipart/form-data">
            <h2>Add Images</h2>
            <div id="multiple"></div>
	</form>
	<a class="button" onClick="document.getElementById('agileUploaderSWF').submit();"><span>Upload to Server</span></a>

  </div>
Replace with:

Code: Select all

        </table>
		</form>
		<form id="multipleDemo" enctype="multipart/form-data">
		  <h2><?php echo $text_add_images; ?></h2>
		  <div id="multiple"></div>
		</form>
		  <a class="button" onClick="document.getElementById('agileUploaderSWF').submit();"><span><?php echo $text_upload_server; ?></span></a>
		<br />
		<br />
      </div>
  </div>

Tous les packs de langues Française depuis la v1.4.7 et toutes les versions intégrales 100 % Français sont disponibles sur le Portail Officiel Français.

Image


User avatar
Active Member

Posts

Joined
Mon Feb 22, 2010 8:05 pm

Post by gsk » Sat Apr 23, 2011 8:48 pm

Nice LeorLindel. I'm glad that other people find this module useful.
@micdansan: I will add this to categories images also :)

gsk
New member

Posts

Joined
Mon Apr 04, 2011 1:46 am

Post by micdansan » Sat Apr 23, 2011 9:18 pm

Thanks GSK! This module is very useful indeed!

New member

Posts

Joined
Fri Apr 01, 2011 10:25 pm

Post by gsk » Thu Apr 28, 2011 4:20 am

Well, here it is.
This new download includes all above code and also rapid uploading images for categories.

You can get it here: Comments or questions are welcome.

Enjoy!

gsk
New member

Posts

Joined
Mon Apr 04, 2011 1:46 am

Post by micdansan » Fri Apr 29, 2011 8:39 am

Thanks.. GSK uploading images in categories also 100% working! ;)

New member

Posts

Joined
Fri Apr 01, 2011 10:25 pm

Post by micdansan » Sat Apr 30, 2011 3:26 pm

gsk., another issue i notice using this MOD.

Add image button loads very slow and sometimes it doesn't show at all. I need to refresh the page or click BACK on the browser. Details see image:
issue.jpg

issue.jpg (10.52 KiB) Viewed 21057 times

is there a way to replace this button. Why not replace it with a standard button or like the UPLOAD TO SERVER button

Anyone help?

New member

Posts

Joined
Fri Apr 01, 2011 10:25 pm

Post by eric1998 » Sun May 01, 2011 9:34 am

Hi everybody,
Good work gsk, i'm very impressed.
I have a question !
How can i change the size of the box like on the pictures.
Thank you
box.jpg

box.jpg (111.64 KiB) Viewed 21040 times


http://wm-distribution.com ---- OC 1.5.1.3


User avatar
New member

Posts

Joined
Sat Apr 02, 2011 10:39 pm

Post by gsk » Sun May 01, 2011 10:31 pm

Hi eric,

Thanks for your kind words!
Regarding your issue, there is not much someone could do to help by looking at the attached screenshot.
Could you explain more of your issue, or probably provide a link, if this is a test site?
The issue seems not related to this mod, but to image manager in the opencart core.

gsk
New member

Posts

Joined
Mon Apr 04, 2011 1:46 am

Post by eric1998 » Mon May 02, 2011 12:14 am

Hi gsk,
Thanks for fast reply.
If you look at the extrem right of the screenshot you view 2 scrollbar for the image manager like the picture.
If possible to have 2 or 3 lines of pictures ?
More view in the image manager ?
manager.jpg

manager.jpg (39.12 KiB) Viewed 21024 times

Sorry for my bad english :0)
Thank you

http://wm-distribution.com ---- OC 1.5.1.3


User avatar
New member

Posts

Joined
Sat Apr 02, 2011 10:39 pm

Post by alexmbra » Mon May 02, 2011 1:20 pm

Hi.

Great work! I was going to make something like this myself,because the default image manager was driving me crazy. But you save some time with this. So, thanks.

Anyway, I found a problem. This code allows you do add the same image twice into the database. Perhaps you could add a code to only add into database if is not there already.

Also, is there a way to add a option to choose the destination folder for the uploaded images?

Flash Ctt Tracking V2
Animated Flash Header Banner V3
Animated Flash Banner V2
Rastreamento de envios pelo CTT correios
Flash Expandable Category Side Menu module
Flash Category Side Menu Module
Flash Cart Steps Module
Animated Flash Banner Module
Animated Flash HEADER Banner Module


New member

Posts

Joined
Wed Dec 15, 2010 3:52 am
Who is online

Users browsing this forum: No registered users and 1 guest