Twitch Additional Product Images Admin for Mobile/Tablet/Desktop Upload

[twitchtoo]

Twitch Additional Product Images Admin for Mobile/Tablet/Desktop Upload

Find this recent submission in ZC Plugins or available for download on my site for Zen Cart version 1.55f

Description:
This brand new module will allow you to upload up to 8 additional product images using your mobile/tablet or desktop directly from the product page. Just log into your admin, create a new product or select an existing one, when you get to the image upload area, select an upload directory and simply snap a photo with your camera or select an existing picture!


Features:
- On screen display/preview of Main Product Image + 8 Additional Images plus each image file path + filename
- Upload 1 or all 9 (1 main image + 8 additional images) at a time* to the image directory of your choice
- Upload one image at a time into separate folders within your /images directory
- Admin -> Catalog -> Product-General -> Edit Layout -> Show Product Additional Images on Product Info has a new 3 position switch
- SQL update to accept mile long filenames given by mobile devices

* Note: Some mobile devices only have the capacity to upload one image at a time, there is no work around for this type of limitation at this time.

Each image retains the original Zen Cart management code...
- Overwrite existing image on server
- Delete Image - Remove image from product
- Select an existing image from the server


Important Note: This module does not change or interfere with the stock Product Additional Images. I can appreciate a good legacy code but... renaming every single product image just isn't a practical solution these days.


Recommendations:
This module was built after completing the newest Twitch Admin Product Thumbnails (TAP Thumb) as the 'next logical step'. It became too large and complex to include with TAP Thumb so, if you're looking to improve your Zen Cart experience out of the box - you can install both!

It's worth mentioning that I did not include any Java updates with this release to prevent unnecessary conflicts.


Works with:
- All Twitch Modules

- This has been tested and will work with previous ZC versions however only the newest 1.55f version will be included in the plugin fileset.

[tmccaff]

Where do I get this mod?

[twitchtoo]

Where do I get this mod?

It is currently being published, an update will follow when it's been approved/active.

[twitchtoo]

The 1.55f fileset includes screenshots of the installed module - both in admin and on the live site.

I have also included a screenshot showing what happens when you neglect to read the instructions and miss installing the CSS controls ;)

Check the forum plugins here for availability or download it from my website shortly!

[MaxBodine]

Hi Twitch,
First I am an old lady, so I may need a little more direction then most ;)

I have been studying your addon and am excited to use it. I do have a couple questions before I install it. In reading the instructions ... and I had to break it down a bit to wrap my old brain around it, and maybe some others.

At first I thought I would have to make all the changes to the files the way I interpreted the read me file. Then I started comparing a few of the files. If I didn't miss anything these are all done in the folders.

So I pulled the sql out of your notes and I created a sql file with this:


************ sql file ***************
ALTER TABLE products CHANGE products_image products_image VARCHAR(256) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL;

ALTER TABLE `products` ADD `products_image1` VARCHAR(256) NULL AFTER `products_image`;
ALTER TABLE `products` ADD `products_image2` VARCHAR(256) NULL AFTER `products_image1`;
ALTER TABLE `products` ADD `products_image3` VARCHAR(256) NULL AFTER `products_image2`;
ALTER TABLE `products` ADD `products_image4` VARCHAR(256) NULL AFTER `products_image3`;
ALTER TABLE `products` ADD `products_image5` VARCHAR(256) NULL AFTER `products_image4`;
ALTER TABLE `products` ADD `products_image6` VARCHAR(256) NULL AFTER `products_image5`;
ALTER TABLE `products` ADD `products_image7` VARCHAR(256) NULL AFTER `products_image6`;
ALTER TABLE `products` ADD `products_image8` VARCHAR(256) NULL AFTER `products_image7`;



DELETE FROM product_type_layout WHERE configuration_key = 'SHOW_PRODUCT_INFO_ADDITIONAL_IMAGES';


INSERT INTO product_type_layout (configuration_title, configuration_key, configuration_value, configuration_description, product_type_id, sort_order, set_function, date_added)
VALUES ('Show Product Additional Images - Twitch', 'SHOW_PRODUCT_INFO_ADDITIONAL_IMAGES', '1', 'Display Additional Images on Product Info <br/> 0= OFF <br/> 1= Stock Zen Cart <br/> 2= Twitch Additional Product Images', '1', '13', 'zen_cfg_select_option(array(\'0\', \'1\', \'2\'), ', now());

********************* eof sql *****************
Did I miss any sql?

Next I should do the steps as you state in your file?

***** STEP 1 *****

Check that the stock Additional Product Images switch is in the OFF postion in your admin here:
Admin -> Catalog -> Product Types -> Product - General -> Edit Layout -> Show Product Additional Images
Select - False
Click Update
This will display as a 0 for OFF


****************** 2 Run SQL file ************
**************** 3 Upload new directories with the files you already changed and style changes to my css ***************

And we make things look nice...
includes/tempaltes/YOUR_TEMPLATE/css/stylesheet.css
replace line 347 - 348
#productAdditionalImages{clear:both;}
.additionalImages{width:90%;margin:10px auto;}

with this:
#productAdditionalImages{clear:both; margin: 0; padding: 0; width: 100%; display:table; }
.additionalImages{width:90%;margin:1em auto;display:table-cell;vertical-align: middle;}
#productAdditionalImagesBlock {clear:both; margin: 0 auto; padding: 0; width: 100%;}
.prodAdditionalIMG{width:32%;margin:0; padding:0;display:inline-block;vertical-align:middle;}


***** Step 4 End *****


To operate the NEW switch:

Admin -> Catalog -> Product Types -> Product - General -> Edit Layout -> Show Product Additional Images
Select - 2
Click Update
This will display as a 2 for Twitch Additional Product Images

You have now installed Twitch Additional Product Images Admin :-)

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

Can you tell me if I missed anything or I am off base on things?

Looking forward to your response. Thank you for all your hard work!

Maxine

[twitchtoo]

Hi Twitch,

************ sql file ***************
ALTER TABLE products CHANGE products_image products_image VARCHAR(256) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL;

ALTER TABLE `products` ADD `products_image1` VARCHAR(256) NULL AFTER `products_image`;
ALTER TABLE `products` ADD `products_image2` VARCHAR(256) NULL AFTER `products_image1`;
ALTER TABLE `products` ADD `products_image3` VARCHAR(256) NULL AFTER `products_image2`;
ALTER TABLE `products` ADD `products_image4` VARCHAR(256) NULL AFTER `products_image3`;
ALTER TABLE `products` ADD `products_image5` VARCHAR(256) NULL AFTER `products_image4`;
ALTER TABLE `products` ADD `products_image6` VARCHAR(256) NULL AFTER `products_image5`;
ALTER TABLE `products` ADD `products_image7` VARCHAR(256) NULL AFTER `products_image6`;
ALTER TABLE `products` ADD `products_image8` VARCHAR(256) NULL AFTER `products_image7`;

DELETE FROM product_type_layout WHERE configuration_key = 'SHOW_PRODUCT_INFO_ADDITIONAL_IMAGES';

INSERT INTO product_type_layout (configuration_title, configuration_key, configuration_value, configuration_description, product_type_id, sort_order, set_function, date_added)
VALUES ('Show Product Additional Images - Twitch', 'SHOW_PRODUCT_INFO_ADDITIONAL_IMAGES', '1', 'Display Additional Images on Product Info <br/> 0= OFF <br/> 1= Stock Zen Cart <br/> 2= Twitch Additional Product Images', '1', '13', 'zen_cfg_select_option(array(\'0\', \'1\', \'2\'), ', now());

********************* eof sql *****************
Did I miss any sql?

That's the lot ^

Next I should do the steps as you state in your file?

*** Step 1 Turn switch off in admin ***

*** Step 2 Run SQL file **

*** Step 3 Upload new directories with the files you already changed and style changes to my css ***

ONLY do this ^ if you are overwriting a bone stock vanilla Zen Cart 1.55f install. This method will overwrite core files and if you haven't changed the YOUR_TEMPLATE folder names you'll have a new template override directory... named YOUR_TEMPLATE.


Before you start, make a .zip of your entire site locally and backup your database locally.