search

priyankagarg8 / magento-w2p

Automatically exported from code.google.com/p/magento-w2p
1 stars 0 forks source link

Contextual cropping #199

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
Add a new function to the image editor to crop images in the context of the
image field.

We know what image size is required for an image field. We also know the
full size of the user image. 

A generic crop function allows flexible cropping where all sides / handles
are moving. This in-context cropping should show a crop-box proportional to
the required size so the user can only move it around the image.

The info-bar should say "Original image size: ... Cropped image size: ...
Required image size: ...".

It is possible that the user image is smaller than the required. They
should be able to crop if only 1 side is smaller. No cropping can be done
if both are smaller. 

If the original image size allows cropping then the info bar says:
"Original image size: ... Cropped image size: ... Required image size: ...
Too small already. Restore to original" and make Restore to original a link
to restoring.

If the original image size does not allow cropping then the info bar says:
"Original image size: ... Cropped image size: ... Required image size: ...
Cannot crop - too small already.".

Not sure we can fit these messages in there.

Do we have a button design for in-context cropping?

Original issue reported on code.google.com by zetapri...@gmail.com on 5 May 2010 at 2:35

GoogleCodeExporter commented 9 years ago 
I've attached the preview, stripe and individual .png of the icon.

Original comment by agur...@gmail.com on 6 May 2010 at 8:08

Attachments:

GoogleCodeExporter commented 9 years ago 
Correction: 

The crop box should be resizable, but a change to one side changes the other
proportionally.

It should not allow to crop the image smaller than the min required size.

Original comment by zetapri...@gmail.com on 6 May 2010 at 9:14

GoogleCodeExporter commented 9 years ago 
We are releasing an update to our API where you can add metadata to every field:
cropping
shifting
color
size
etc.
This feature will change from producing a cropped image to sending the metadata.
The preliminary format looks like this

*_TextFieldName would be a hidden input for _TextFieldName.
*#MyImage would be a hidden input for #MyImage field.

The contents of the metadata field is like this:
cr-x1=10;cr-x2=20;cr-y1=12;cr-y2=25

Context cropping will need to switch to the new API once it is out.

Original comment by zetapri...@gmail.com on 10 May 2010 at 9:38

GoogleCodeExporter commented 9 years ago 
Once the crop was done the cropped image library image for that field should 
have
some approximation of the cropped area highlighted in some way.

Original comment by zetapri...@gmail.com on 10 May 2010 at 9:55

GoogleCodeExporter commented 9 years ago

Original comment by zetapri...@gmail.com on 18 May 2010 at 8:33

GoogleCodeExporter commented 9 years ago

Original comment by DorDenis on 11 Jun 2010 at 10:23

GoogleCodeExporter commented 9 years ago 
At the moment this catalog has new shapes.
http://realestate.zetaprints.com/?page=catalogue;CorporateID=789EEB32-9A33-446A-
A851-4E0754563862

Note change in the attribute names.
It is all UpperCalemCase

Original comment by zetapri...@gmail.com on 21 Jun 2010 at 6:48

GoogleCodeExporter commented 9 years ago

Original comment by DorDenis on 21 Jun 2010 at 8:11

GoogleCodeExporter commented 9 years ago 
Code for merge https://magento-w2p.googlecode.com/svn/branches/issue199

Original comment by DorDenis on 21 Jun 2010 at 8:26

GoogleCodeExporter commented 9 years ago 
Can't remember what was in need of fixing, sorry. Hope you do.
Need to change the status so it doesn't get merged at this stage.

Original comment by zetapri...@gmail.com on 22 Jun 2010 at 6:07

GoogleCodeExporter commented 9 years ago

Original comment by zetapri...@gmail.com on 8 Jul 2010 at 10:37

GoogleCodeExporter commented 9 years ago 
Change the solution to using in-preview image editing API
http://www.zetaprints.com/help/in-preview-image-editing/

Original comment by zetapri...@gmail.com on 11 Jul 2010 at 7:22

GoogleCodeExporter commented 9 years ago

Original comment by zetapri...@gmail.com on 13 Jul 2010 at 11:28

GoogleCodeExporter commented 9 years ago 
dif
http://code.google.com/p/magento-w2p/source/diff?spec=svn905&r=905&format=side&p
ath=/branches/issue199/app/design/frontend/default/zptheme/template/image-edit/e
dit.phtml&old_path=/branches/issue199/app/design/frontend/default/zptheme/templa
te/image-edit/edit.phtml&old=855

http://code.google.com/p/magento-w2p/source/diff?spec=svn905&r=905&format=side&p
ath=/branches/issue199/skin/frontend/default/zptheme/js/zp-image-edit.js&old_pat
h=/branches/issue199/skin/frontend/default/zptheme/js/zp-image-edit.js&old=859

Original comment by DorDenis on 15 Jul 2010 at 8:42

GoogleCodeExporter commented 9 years ago 
You need to install it for us on /magedev/
We can only do installs from magentocommerce.

Are the metadata fields passed onto ZP API?
I don't see any changes to the server side on mage.

Original comment by zetapri...@gmail.com on 16 Jul 2010 at 12:03

GoogleCodeExporter commented 9 years ago 
Please, deploy to SVN and post diffs here.

Original comment by zetapri...@gmail.com on 17 Jul 2010 at 11:19

GoogleCodeExporter commented 9 years ago 
diff
http://code.google.com/p/magento-w2p/source/diff?spec=svn912&r=859&format=side&p
ath=/branches/issue199/skin/frontend/default/zptheme/js/zp-personalization-form.
js&old_path=/branches/issue199/skin/frontend/default/zptheme/js/zp-personalizati
on-form.js&old=857

http://code.google.com/p/magento-w2p/source/diff?spec=svn912&r=857&format=side&p
ath=/branches/issue199/app/code/local/ZetaPrints/WebToPrint/Helper/Personalizati
onForm.php&old_path=/branches/issue199/app/code/local/ZetaPrints/WebToPrint/Help
er/PersonalizationForm.php&old=855

http://code.google.com/p/magento-w2p/source/diff?spec=svn912&r=857&format=side&p
ath=/branches/issue199/app/code/local/ZetaPrints/Zpapi/Model/common-templates.xs
lt&old_path=/branches/issue199/app/code/local/ZetaPrints/Zpapi/Model/common-temp
lates.xslt&old=855

http://code.google.com/p/magento-w2p/source/diff?spec=svn913&r=905&format=side&p
ath=/branches/issue199/skin/frontend/default/zptheme/js/zp-image-edit.js&old_pat
h=/branches/issue199/skin/frontend/default/zptheme/js/zp-image-edit.js&old=859

Original comment by DorDenis on 17 Jul 2010 at 1:05

GoogleCodeExporter commented 9 years ago 
Use Images/Image/@Width or @Height instead of shapes to find out placeholder 
dimensions.

Roll back changes to "shapes" variable. It was made global. There is no need 
for this.

Original comment by zetapri...@gmail.com on 21 Jul 2010 at 7:24

GoogleCodeExporter commented 9 years ago

Original comment by zetapri...@gmail.com on 21 Jul 2010 at 7:26

GoogleCodeExporter commented 9 years ago 
SVN:

1) Created directory 'branches/image_edit'.

2) Copied branches/issue199 to branches/image_edit.

3) Issue 199, comment 18: used Images/Image/@Width or @Height instead of shapes 
to find out placeholder dimensions, added crop_to_fit.png icon.

Affected files:

1) skin/frontend/default/zptheme/js/zp-personalization-form.js

2) app/design/frontend/default/zptheme/template/image-edit/edit.phtml

3) app/code/local/ZetaPrints/WebToPrint/Helper/PersonalizationForm.php

4) skin/frontend/default/zptheme/images/image-edit/crop_to_fit.png (added)

Diffs:

1) 
http://code.google.com/p/magento-w2p/source/diff?spec=svn927&r=927&format=side&p
ath=/branches/image_edit/app/code/local/ZetaPrints/WebToPrint/Helper/Personaliza
tionForm.php

2) 
http://code.google.com/p/magento-w2p/source/diff?spec=svn927&r=927&format=side&p
ath=/branches/image_edit/app/design/frontend/default/zptheme/template/image-edit
/edit.phtml

3) 
http://code.google.com/p/magento-w2p/source/diff?spec=svn927&r=927&format=side&p
ath=/branches/image_edit/skin/frontend/default/zptheme/js/zp-personalization-for
m.js

Original comment by igor.sni...@gmail.com on 26 Jul 2010 at 9:30

GoogleCodeExporter commented 9 years ago

Original comment by zetapri...@gmail.com on 27 Jul 2010 at 8:29

GoogleCodeExporter commented 9 years ago 
'Crop-to-fit feature not functioning in some use cases' bug was fixed. The bug 
was occured becouse of:

1) Image settings search for certain placeholder was performed by comparing 
images names of that ones in template settings and that one clicked by user.
And images names almost always contain white spaces.
Html tags attributes values in some web browsers are escaped when accessed by 
javascript (Google Chrome, for example).
And therefore strings matches were not occured ("Image 1" != "Image%201", for 
example)

2) The same functionality (fancybox calling for image editing) was coded twice:
for the case of static html coming from the serverside,
and for the case of dynamic html creation after image uploading by user.
And the code was not fully functional in the second case - right for 
aspectRatio setting.

Fixed:

1) fancybox calling for image editing was detached in separate function 
get_image_edit_dialog();

2) aspectRatio setting and retriving other image settings from template was 
detached in separate function load_template_image_settings();

3) string values used for comparing are been unescaped preliminarily.

There are also two bugs have been discovered:

1) Nothing happens with image on 'save' button click when crop-to-fit tool has 
been selected - just fancybox closing.
And that is according the javascript code.
(code was added in revision 905 
(http://code.google.com/p/magento-w2p/source/detail?r=905)
in file: zp-image-edit.js 
(http://code.google.com/p/magento-w2p/source/browse/branches/issue199/skin/front
end/default/zptheme/js/zp-image-edit.js?spec=svn905&r=905)).

    if (isCropFit) {
        applyCropMetadata();
        parent.jQuery.fancybox.close();
    } else {
        parent.jQuery.fancybox.showActivity();
        applyCropServer();
    }

2) crop-to-fit feature is activated always - even if user chooses the common 
crop tool.
That happens becouse of image_aspectRatio (named before as aspectRatio) 
variable global scope visibility.

(code was added in revision 857 
(http://code.google.com/p/magento-w2p/source/detail?r=857)
in file: zp-image-edit.js 
(http://code.google.com/p/magento-w2p/source/browse/branches/issue199/skin/front
end/default/zptheme/js/zp-image-edit.js?spec=svn857&r=857)).

        if ((top.aspectRatio[0]!= 0) && (top.aspectRatio[1] != 0)) {
                imageEditorJcropApi.setOptions({
                        aspectRatio: top.aspectRatio[0] / top.aspectRatio[1]
                });
        }

Original comment by igor.sni...@gmail.com on 28 Jul 2010 at 3:09

GoogleCodeExporter commented 9 years ago 
Diffs:
http://code.google.com/p/magento-w2p/source/detail?r=929

Original comment by igor.sni...@gmail.com on 28 Jul 2010 at 3:20

GoogleCodeExporter commented 9 years ago 
The crop box isn't showing where it should be after opening it for the second 
time.

Original comment by zetapri...@gmail.com on 28 Jul 2010 at 4:00

GoogleCodeExporter commented 9 years ago

Original comment by zetapri...@gmail.com on 28 Jul 2010 at 6:30

GoogleCodeExporter commented 9 years ago

Original comment by zetapri...@gmail.com on 28 Jul 2010 at 7:50

GoogleCodeExporter commented 9 years ago 
> Comment 24
Fixed

Diffs:
http://code.google.com/p/magento-w2p/source/detail?r=932

Original comment by igor.sni...@gmail.com on 30 Jul 2010 at 3:10

GoogleCodeExporter commented 9 years ago 
Where should I test this?

Tried it on /magedev/ but all I get is the issue reported in comment #22
1) Nothing happens with image on 'save' button click when crop-to-fit tool has 
been selected - just fancybox closing.

Try it on this product:
http://ec2-174-129-95-130.compute-1.amazonaws.com/magedev/index.php/multipage-pr
oduct.html?SID=g8kkreoq3nnlltini8masb19q0

Original comment by agur...@gmail.com on 2 Aug 2010 at 5:12

GoogleCodeExporter commented 9 years ago 
It is not part of the current beta. The files need to be installed manually. 
We'll hold off the testing until the blocking tasks are resolved.

Original comment by zetapri...@gmail.com on 3 Aug 2010 at 12:09

GoogleCodeExporter commented 9 years ago

Original comment by zetapri...@gmail.com on 21 Sep 2010 at 9:19