Image editing menu - Githubissues

GoogleCodeExporter commented 9 years ago

1. Add a menu to every uploaded image to allow various editing functions. 

2. Image editing window: open an image in a model window to allow cropping,
re-sizing (reducing size in pixels), rotating. This is for editing an image
on its own without any context. All ops are backed by ZP api (to be published).

3. Add image placing and re-sizing. At the moment it will be just a
prototype where an image can be placed over a preview, moved around,
resized and cropped with the preview in the background. Max image size is
600x600. The actual image can be much bigger.
Show the preview in a modal window (a div) and make sure it's not bigger
than the image to edit.

4. We need to understand how to correlate the size of the preview and the
size of the image. They can be real size or reduced size. 

All work at the moment is without ZP API, which is coming in a day or two.

Original issue reported on code.google.com by zetapri...@gmail.com on 26 Jan 2010 at 5:57

Merged into: #142

GoogleCodeExporter commented 9 years ago

Possible realization demo http://www.pro24.lv/im/editor.php?
img=/normit4_category_sgush.jpg

Original comment by k.safro...@gmail.com on 26 Jan 2010 at 12:43

GoogleCodeExporter commented 9 years ago

Rotate left
Rotate right
Edit title
Resize
Crop
Place
Delete
Restore
Flip horizontal
Flip vertical

--- This is optional stuff for the future, but take it into account now ---
Filters: .... opens a dropdown

Original comment by zetapri...@gmail.com on 27 Jan 2010 at 9:48

GoogleCodeExporter commented 9 years ago

Page/Pop-up previews and slices (stripes) attached.

Original comment by agur...@gmail.com on 28 Jan 2010 at 6:28

Attachments:

image_editing_source_files_1-1.zip

GoogleCodeExporter commented 9 years ago

Image editing APIs:
http://www.zetaprints.com/help/web-to-print-image-library-api/
http://www.zetaprints.com/help/image-editing-api/

Please, report any typos or inaccuracies in the posts.

Original comment by zetapri...@gmail.com on 29 Jan 2010 at 2:06

GoogleCodeExporter commented 9 years ago

The window is larger than the image by too much. There is a good 200px margin 
under a
landscape image. Looks like it make the window square to fit the image. Make it
tighter and resize as needed when an image changes.

Replace the progress indicator with the same spinning wheel we use elsewhere, 
but
scale it to size (larger) (design?). Also, it should show in the center.

Show the cropping frame approx. when crop icon is clicked. Users need to see it 
in
action, with opacity, handles, etc. It's hard to understand what's happening on 
the
screen at the moment.

Use a pretty Save button for cropping function. (design?)

Show the edit button over the image as soon as it's uploaded. Clicking anywhere 
on
the image takes it to the editing window. There should be no window for just 
viewing
the image.

Original comment by zetapri...@gmail.com on 9 Feb 2010 at 9:49

GoogleCodeExporter commented 9 years ago

Add 2 text fields for image size for crop and re-size operations.

Original comment by zetapri...@gmail.com on 10 Feb 2010 at 10:30

GoogleCodeExporter commented 9 years ago

Save button icon added in the stripes image (image_editing_stripes.png)

Image editing window preview (save_button_preview.png)

Original comment by agur...@gmail.com on 10 Feb 2010 at 10:52

Attachments:

GoogleCodeExporter commented 9 years ago

Minor problems: 
1. Images appear distorted for a split of a second on rotate.
2. Clicking on small thumb opens the same Edit modal window.
3. Remove HAND/POINTER cursor where no onclick even is available.
4. Top-left handle of the cropping frame is not functional.

Original comment by zetapri...@gmail.com on 11 Feb 2010 at 12:14

GoogleCodeExporter commented 9 years ago

Minor problems fixed

Original comment by k.safro...@gmail.com on 12 Feb 2010 at 9:11

GoogleCodeExporter commented 9 years ago

see image_editor branch

Original comment by k.safro...@gmail.com on 12 Feb 2010 at 8:02

Changed state: Merge

GoogleCodeExporter commented 9 years ago

Just to clarify the situation.
The brunch with this code needs to be merged into trunk for testing.
Not sure how we gonna be doing bug fixes. Doing a merge every time we need to 
re-test
something is gonna be too much pain.

Original comment by zetapri...@gmail.com on 12 Feb 2010 at 8:29

GoogleCodeExporter commented 9 years ago

New code was merged into trunk and was packed as 1.8.0.0beta1 (installed on 
magedev)

Original comment by Anatoly....@gmail.com on 14 Feb 2010 at 3:12

Changed state: ToTest

GoogleCodeExporter commented 9 years ago

Known problems in the code:

  * Multiple images instead single image sprite
  * Hardcoded API URL in edit.phtml file

Original comment by Anatoly....@gmail.com on 14 Feb 2010 at 3:16

GoogleCodeExporter commented 9 years ago

Here are some of the issues I came across:
1. After applying the cropping effect, the original image is visible at the 
bottom
(cropping.png)
2. The save button visible in the cropping effect is touching the image preview
(save_button.png) add 5-10 px between them.
3. When an image is cropped to a size smaller than the pop-up window size it 
self,
the image editing menu is not visible (small_crop.png)
4. The loading spinning wheel is not in the center of the window (loading.png), 
small
issue.
5. Couldn't update the preview after editing the images. Rotated left the first 
one,
rotated right the second one and cropped the third one. Got an err when I 
clicked
"Update preview" (update_preview_err.png)

Original comment by agur...@gmail.com on 14 Feb 2010 at 6:40

Changed state: MoreWork

Attachments:

GoogleCodeExporter commented 9 years ago

The rumor has it that image editing doesn't work for logged in users.
Need to confirm.

Original comment by zetapri...@gmail.com on 14 Feb 2010 at 8:34

GoogleCodeExporter commented 9 years ago

Test it on mageimage at first. There's a little chance it happens because of 
merge.

Original comment by Anatoly....@gmail.com on 15 Feb 2010 at 4:21

GoogleCodeExporter commented 9 years ago

Comment 16 was meant to say that the merge is unlikely to affect the problem 
with
registered users not being able to edit images.

Original comment by zetapri...@gmail.com on 15 Feb 2010 at 4:26

GoogleCodeExporter commented 9 years ago

I'm unable to upload images and test them. Tried creating a fresh customer 
account on
magedev and mageimage. As soon as I start uploading an image, I get a err msg 
pop-up
"Error was occured while uploading image".

Same thing happens on my older user acc. Also, the images that are available in 
my
images library on an older customer account (which I uploaded when it used to 
work)
are not editable. I get no preview when I click on the image to edit.

Original comment by agur...@gmail.com on 15 Feb 2010 at 9:53

Attachments:

user_acc_image_editing.png

GoogleCodeExporter commented 9 years ago

Latest version is on mageimage. 
BTW had to hardcode ip to make hash generated correctly.

Original comment by k.safro...@gmail.com on 16 Feb 2010 at 9:54

Changed state: ToTest

GoogleCodeExporter commented 9 years ago

Do not stop showing progress indicator until the image is showing.
For example I rotate an image. I see the progress icon then the window goes 
blank for
a second and then the new image fades in. I should not see a blank window. There
should be a progress indicator all the way until the new image is showing.

Original comment by zetapri...@gmail.com on 16 Feb 2010 at 5:26

GoogleCodeExporter commented 9 years ago

Image thumgs do not update!!!!

I rotate an image, I see a new one in the window, but when I close it the little
thumb in the scroll is still what it was before. It should be updated as well 
across
all scrolls.

Original comment by zetapri...@gmail.com on 16 Feb 2010 at 5:28

GoogleCodeExporter commented 9 years ago

1. Image library get distorted after I edit images, refresh the page and then 
open
the library again. (refresh_images_library.png) happens in FF.

2. The images in the library do get updated (in IE) after editing but only 
after I
refresh the page.

3. When I refresh the page and open my image library as a user, some of the 
images
are not in there... this only happens sometimes,. I'm not sure when and why. 
Saw it
both in IE and Safari they show as missing. (missing_images.png)

Original comment by agur...@gmail.com on 16 Feb 2010 at 6:15

Changed state: MoreWork

Attachments:

GoogleCodeExporter commented 9 years ago

new version is on mageimage. Please describe following error more precisely I 
could not 
reproduce them:
Image library get distorted after I edit images, refresh the page and then open
the library again. (refresh_images_library.png) happens in FF. 
When I refresh the page and open my image library as a user, some of the images
are not in there... this only happens sometimes,. I'm not sure when and why. 
Saw it
both in IE and Safari they show as missing. (missing_images.png)

Original comment by k.safro...@gmail.com on 18 Feb 2010 at 6:01

Changed state: ToTest

GoogleCodeExporter commented 9 years ago

I got the same bug again. Should be easy to replicate. Here's what I did:
1. Tried it on this product:
http://www.zetaprints.com/mageimage/index.php/real-estate-signs/remax-signs/rema
x-square-sign-02-3-photos-24-x-24.html
2. Upload images for all the image fields.
3. Edited the first image (Rotate right) and hit the close button of the image
editing pop-up window.
4. When the pop-up window closed, I got a distorted view of the library
(library_thumb_after_image_edit.png). As you can see, the edited image is 
showing
repeatedly in a size much larger than the thumb size.
5. Refreshed the page (F5) and got the same result as before - thumb images are
missing (refreshed.png).

Original comment by agur...@gmail.com on 18 Feb 2010 at 6:36

Changed state: MoreWork

Attachments:

GoogleCodeExporter commented 9 years ago

When we have this bug sorted (fixed and tested), please delete all the products 
from
/mageimage/ and all the templates for them in the database.
Need this to test issue #135. But after we've sorted out this issue.

Original comment by agur...@gmail.com on 18 Feb 2010 at 6:47

GoogleCodeExporter commented 9 years ago

These are the images I used for testing.

Original comment by agur...@gmail.com on 18 Feb 2010 at 6:48

Attachments:

GoogleCodeExporter commented 9 years ago

Thums are only resized in jpg format. If a thumb is in gif/png format it won't 
be
autoresized like this one:
http://magento.zetaprints.com/photothumbs/a9bf3adb-c463-40d6-b04e-d002517ea84d_0
x100.png

This is a ZP bug. In the meantime, we need amend the JS and only use 
autoresizing for
jpg files. GIF/PNG can be resized by the browser (<img width=... />).

Original comment by zetapri...@gmail.com on 18 Feb 2010 at 8:49

GoogleCodeExporter commented 9 years ago

Latest version is on mageimage. Please note that r537 is used and 
PersonalizationForm.php should later be merged

Original comment by k.safro...@gmail.com on 19 Feb 2010 at 3:16

Changed state: ToTest

GoogleCodeExporter commented 9 years ago

Didn't work for me at all.
See untitled.png for result.

== Steps to replicate: ==
Went to
http://www.zetaprints.com/mageimage/index.php/real-estate-ads/1-3-page-vertical-
ad-3-photos-290-x-75-mm.html
as a new user.
Uploaded BrightSpot ad.
Uploaded Checken&Dong photo.
Clicked on editing BrightSpot.
Cropped it to a narrow vertical image from top to bottom around the window.
The modal window resized to an inconvenient size with parts of it hidden at the
bottom, so I tried to scroll. The scroll didn't help. I maximized FF window 
(did I?). 
When the modal window was closed the entire area of image fields fell apart.

Original comment by zetapri...@gmail.com on 19 Feb 2010 at 7:18

Changed state: MoreWork

Attachments:

GoogleCodeExporter commented 9 years ago

It happens after editing with any uploaded image. The problem is in wrong 
calculation
of image bars length.

Original comment by Anatoly....@gmail.com on 19 Feb 2010 at 7:39

GoogleCodeExporter commented 9 years ago

It happens only for stock image bars.

Original comment by Anatoly....@gmail.com on 19 Feb 2010 at 7:44

GoogleCodeExporter commented 9 years ago

Image bars are calculated correctly now. Latest version on mageimage.

Original comment by k.safro...@gmail.com on 20 Feb 2010 at 6:28

Changed state: ToTest

GoogleCodeExporter commented 9 years ago

Tested ok on FF. Thumbs are updated after editing right away. Didn't see any 
issues.
On IE, however, there are bugs.
Tried it here:
http://www.zetaprints.com/mageimage/index.php/real-estate-signs/remax-signs/rema
x-square-sign-02-3-photos-24-x-24.html
Uploaded 3 images, same as before and thumbs went all over the place 
(IE_library.png).
I also tried aditing, thumb size was not calculated correctly 
(IE_library_thumbs.png)

Original comment by agur...@gmail.com on 21 Feb 2010 at 10:20

Changed state: MoreWork

Attachments:

GoogleCodeExporter commented 9 years ago

Maybe old version is used on mageimage? The bug with uploading images in IE was 
fixed.

Original comment by Anatoly....@gmail.com on 22 Feb 2010 at 4:21

GoogleCodeExporter commented 9 years ago

Need more testing. See /mageimage/. Please mention Browser version in report

Original comment by k.safro...@gmail.com on 22 Feb 2010 at 10:43

Changed state: ToTest

GoogleCodeExporter commented 9 years ago

The image library is being updated correctly as images are edited. One small 
issue is
when I use the "crop" feature in IE (v.8). The whole image editing window is 
scrolled
and cropped (IE_cropped_window.png)

I also saw another image library bug when I logged in as a customer after 
testing it
anonymously (in IE). The image library was distorted again, like before. It 
could be
the images that I already have in there and the images that were added while I
anonymously uploaded them (IE_library_signed_in.png). I was able to recreate 
this
issue like so:
1. Upload images as a user and edit them
2. Log out and upload some more images and edit them.
3. Log in and open the image library, you should see two lines of images in the 
scroll.

Original comment by agur...@gmail.com on 22 Feb 2010 at 12:45

Changed state: MoreWork

Attachments:

GoogleCodeExporter commented 9 years ago

I don't know guys. It's been too long.
This number of problems in a single implementation points at poor app design.

Original comment by zetapri...@gmail.com on 22 Feb 2010 at 7:36

GoogleCodeExporter commented 9 years ago

Can't reproduce the issue.

Original comment by k.safro...@gmail.com on 23 Feb 2010 at 6:17

Changed state: ToTest

GoogleCodeExporter commented 9 years ago

Library bug fixed. Please describe crop bug

Original comment by k.safro...@gmail.com on 23 Feb 2010 at 11:36

GoogleCodeExporter commented 9 years ago

Original comment by zetapri...@gmail.com on 23 Feb 2010 at 12:41

Changed state: Duplicate

dw250100785 / magento-w2p

Image editing menu #110