Drag/n/Drop Images improvement needed.

Start
Prev
1
Next
End

PeterChain
Topic Author
Offline

Posts: 634
Thank you received: 16

9 years 5 months ago #204741

-- HikaShop version -- : 2.4.0
-- HikaMarket version -- : 1.6.2
-- Joomla version -- : 3.4.1

There are a couple of things really annoying and that make image upload inneficient:

1. Files get sorted by the order they finished upload. Therefore if I upload ten images my_image_01.jpg to my_image_10.jpg if all images are 500 KB and image_05 is 30 KB it will almost sure end upload before the others as they upload in parallel, then image_05 sits in first position.

There should be a checkbox to force picture to get ordered alphabetically. Otherwise massive uploading is absolutely inefficient as it requires a second manual process of reordering the pictures.

2. Picture handling (drag 'n' drop) inside the box could be improved, if you peak an image which is in the border of the dashed square is not easy to move it to the desired position. You have to do trickery with two or three pictures to achieve the desired ordering.

3. Thumbnail size should be configurable for this area. I'm sure many users would appreciate it.

I managed to make some slight improvements just by CSS but a good coder would make a giant leap with some dedication and we all would benefit from a better HikaMarket interface.

1. Clunky Image Uploader

2. Slight improvements that make handling more comfortable

Attachments:

Please Log in or Create an account to join the conversation.

Jerome
Offline
HikaShop core developer

Posts: 26156
Thank you received: 4028
MODERATOR

9 years 5 months ago #204764

Hi,

1. I'll see to improve the opload lib in order to perform a sequential upload and not a parallel one.
So the order of the image will be kept.

2. We are using the jQuery-ui sortable.
If you find an option which make the drag easier ; don't hesitate to share it.
jqueryui.com/sortable/

3. You can reduce the size of the "second" thumbnails thanks to CSS.
But I admit that for the moment the size of the thumbnails are fixed in the view so it currently require a view override to make it bigger (than 100x100 pixels).

The idea behind the image management was to have a clean interface.
Maybe the thumbnail images could be displayed with the "force size" option so you will always have a square image ; which could make the "selection" easier. If you are using thin images it could become hard to click/see them.

The addition of the border could be useful to delimit them but could be confusing with just kind of "decoration".
During some tests, I saw that users though that the border was part of the image and wanted to know how to remove them.
But we can think about other kind of solution, more a little more than just a round border (and modify a little bit the style when the move is hover the image, so the user can see that it's not a part of the image).

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

PeterChain
Topic Author
Offline

Posts: 634
Thank you received: 16

9 years 5 months ago #204825

Appreciate very much your answers.

Regarding answer number 1 I understand that you made parallel upload to make it faster and I realize it works quite well. We know in most systems and connections several upload sockets in parallel will work faster than a single one to upload massive files to an internet server.

Maybe instead of making a sequential upload and ordering the pictures according to the upload sequence you could put somewhere a 'switch' to decide if pictures should be ordered by name or date and therefore let the parallel upload method survive. I really believe that parallel upload makes operating the system a lot faster when working in massive manual data entry.

Kind regards

Please Log in or Create an account to join the conversation.

Jerome
Offline
HikaShop core developer

Posts: 26156
Thank you received: 4028
MODERATOR

9 years 5 months ago #204858

Hi,

I'll do some tests to see how the system could be improved.
Sending a pre-ordering value during the upload could be a solution, but I'll have to see how manage it afterwards in javascript.

Regards,

Please Log in or Create an account to join the conversation.

PeterChain
Topic Author
Offline

Posts: 634
Thank you received: 16

9 years 5 months ago #204870

I'm not a die hard developer so please don't feel offended if my suggestions are naive

One possilbity would be that beside the Drag-in box there was an Option Box with

'By Name A-Z'
'By date'
'By uploading sequence' (as sometimes could be that not all files are dragged in a single operation)

and then after saving the product some code triggers to relocate them in the images array of the product.

Other possiblity is the same but static option selectable in the Configuration of HikaMarket, I believe most users won't ever need such a hi dynamic set of options, they will choose one and stic to that one, many of my clients with new and old websites use the system of numbering pictures wit a reference and then a serial number.

FE-Muproductrefrence-01
FE-Muproductrefrence-02
FE-Muproductrefrence-03

This also makes easy migration of outdated websites using this very standard method to a new site build with HikaShop/HikaMarket.

Regards.

Please Log in or Create an account to join the conversation.

Jerome
Offline
HikaShop core developer

Posts: 26156
Thank you received: 4028
MODERATOR

9 years 5 months ago #204907

Hi,

If you use an automatic sort ; how manage the first image ? How rearrange manually the images ?
If the user already put some images, which are manually sorted and he add a new one ; where the image will be ? Does HikaMarket have to break the user sorting ?

At this moment, I prefer to propose some "image sorting" buttons, so the user can click on it to reorder the images and then could save to apply the modification.

Regards,

Please Log in or Create an account to join the conversation.

PeterChain
Topic Author
Offline

Posts: 634
Thank you received: 16

9 years 5 months ago #204909

I think:

In the case the HikaMarket configuration has activated automated sorting should happen this way:

A. On manual drop of several pictures they get sorted by the defined criteria.

B. On manual reordering event no ordering criteria gets reapplied unless you press a button "Apply sorting Criteria"

C. If more pictures are dropped in a second edition event it would apply the sorting criteria again starting on the new picture position, This means:

If I ad 5 pictures to an already 10 pictures set those first ten won't participate in the new ordering so the new five will get reordered from position 11 to position 15.

Then, if when 15 pictures are there I press the sorting button this will apply to the whole set of 15.

––––––––

I think this would be a commonly accepted behavior for many "non ultra pro" users. I mean, average office users not so used as most of us "developers" to more complex interfaces.

Hope this guides you a little bit. Thanks for letting participate in the concept.

Please Log in or Create an account to join the conversation.

Jerome
Offline
HikaShop core developer

Posts: 26156
Thank you received: 4028
MODERATOR

9 years 5 months ago #204927

Hi,

I created a feature request.

Regards,

The following user(s) said Thank You: PeterChain

Please Log in or Create an account to join the conversation.

PeterChain
Topic Author
Offline

Posts: 634
Thank you received: 16

9 years 4 months ago #206711

NEW SUGGESTION:

Add a "Delete All" button si If I have to make a massive replacement of pictures I don't need to delete each photo by reaching the X button.

This is a very usual need for many shop administrators. You have a new product but only prototype or "stolen" pictures, then finally the product arrives your shelves and then you want to update with the real good pictures.

A Deleta All should be an easy implementation with a lot of benefit to users.

Please Log in or Create an account to join the conversation.

Jerome
Offline
HikaShop core developer

Posts: 26156
Thank you received: 4028
MODERATOR

9 years 4 months ago #206720

Hi,

I noted your feedback.
I am personally not sure that a "delete all" button will be so much useful.
If you have a massive picture replacement to do, I'll more recommend to use a "mass action" in order to remove picture for a bunch of products.
But I noted your request.

Regards,

The following user(s) said Thank You: PeterChain

Please Log in or Create an account to join the conversation.

PeterChain
Topic Author
Offline

Posts: 634
Thank you received: 16

9 years 4 months ago #206741

Maybe I can explain better:

If you have a single product with 30 temporary pictures and then you get the replacement ones you must click 30 times to delete the picture box in the editing screen. This is a usual situation in many kinds of e-commerce business.

Thanks for noting it.

Please Log in or Create an account to join the conversation.

Jerome
Offline
HikaShop core developer

Posts: 26156
Thank you received: 4028
MODERATOR

9 years 2 months ago #214438

Hi,

So, to clarify the situation about the "synchronous file upload".
The opload library had several patchs, one for the chuck opload and another for the number of parallel uploads.
That last one is currently under testing and I can't guarantee that it will be integrated into HikaShop 2.6.0 ; but it should be integrated in the next HikaShop release (2.6.1 or 3.0.0 depending how the developments will progress).

To summarize the modification, the "upload" function is updated in order to not call the

entry.xhr.send(fd);

but to store it into the entry object when there is already an upload in progress.
Then when the file is finished, the next file in the queue will be send, etc.

The chunk upload has been validated so, it will be possible in the next HikaShop release to upload files bigger than the "PHP max upload size" ; the library will perform several uploads and HikaShop will merge the different parts to re-create the file.
In order to use that feature, it will require a recent browser compatible with the "File" objects and with the "slice" function.
developer.mozilla.org/en-US/docs/Web/API/Blob/slice

Regards,

Please Log in or Create an account to join the conversation.

PeterChain
Topic Author
Offline

Posts: 634
Thank you received: 16

9 years 2 months ago #214443

I appreciatte very much your explanations and clarifications.

Please Log in or Create an account to join the conversation.

Jerome
Offline
HikaShop core developer

Posts: 26156
Thank you received: 4028
MODERATOR

9 years 1 month ago #215918

Hi,

Finally, the patch for the synchronous upload is include in HikaShop 2.6.0 package.
HikaMarket 1.6.6 is also out but I didn't add any code to use the "options.nbFiles" setting yet.
It is still something which can be added thanks to a view override.

Like in the view "productmarket / form_image" where you can add some javascript in the end of the view to modify the setting

<script type="text/javascript">
window.hikashop.ready(function(){
<?php if(empty($this->editing_variant)) { ?>
  var uploader = window.hkUploaderList['hkUploader_hikamarket_product_image'];
<?php } else { ?>
  var uploader = window.hkUploaderList['hkUploader_hikamarket_product_variant_image'];
<?php } ?>
  if(!uploader || !uploader.oploader)
    return;
  uploader.oploader.options.nbFiles = 1;
});
</script>

It still need some tests but it should work.

Regards,

Last edit: 9 years 1 month ago by Jerome.

The following user(s) said Thank You: PeterChain

Please Log in or Create an account to join the conversation.

PeterChain
Topic Author
Offline

Posts: 634
Thank you received: 16

9 years 1 month ago #215925

Lot of thanks Jerome for your dedication!

We developed a solution for this need that were going to offer you as a contribution once our test period was done. But definitely yours looks simpler and cleaner than ours which was using OnBeforeSave trigger.

Please Log in or Create an account to join the conversation.

PeterChain
Topic Author
Offline

Posts: 634
Thank you received: 16

9 years 1 month ago #216903

HI Jerome,

regarding this added script in my case is still not working properly.

This is not a complaint but just a report to feedback you. I have HShop 2.6.0 and HMarket 1.6.6 althoug the update service insists I have 1.6.5 after many cache cleaning, relogin, re-everything. But I installed 1.6.6 three times in a row.

I checked with at least 100 products with the Script at the end of the file productmarket/form_image.php inside my overrides template.

I will further report you in case I experience better results in some of my actual in-production projects.

Regards,

Please Log in or Create an account to join the conversation.