Drupal integration

[AndyB]

Hello,

I'm currently extending Image Editor module for Drupal (http://
drupal.org/project/imageeditor) to use Aviary Phoenix, Peacock and
Falcon applications (and then Raven and Myna). I was able to
successfully launch them all in an iframe and get them to load the
image from (loadurl parameter).

Now I need to handle the save and here come 2 difficulties:
1. It does checks to resolve the domain in the posturl parameter and
errors out: "The remote name couldn't be resolved: 'drupal6.local'"
making it impossible to use a development on localhost server. And I
already tried it with the postagent = client. Is it really needed to
resolve it on your side? Can you initiate the post action from the
client?
2. Here comes a question - does it post to the URL specified in the
posturl parameter and redirects the iframe (that I used to open the
editor) to the posturl or does it only do the hidden post to this URL
and leaves the iframe with the application? I need it to redirect the
iframe to the posturl along with the POST itself cause I need to make
changes on the parent page after the image was edited (and I have been
doing it successfully with other editors by having Jquery code on the
posturl that modifies the parent according to the post parameters).

Thank you in advance for any help.

AndyB

[Ari Fuchs]

Hi Andy, postagent=client should be doing what you want it to. Can you provide an example launch url?

As for your second question, you can set a redirect url on save using the following querystring parameters:

exiturltarget=replace // to redirect the tool iframe

saveandclose=1 //cause the app to redirect after saving

exiturl=XXX // to specify the redirect url

best,

ari

[AndyB]

Ari,

Thank you for your reply.

Here is the launch URL for Aviary Phoenix:
http://www.aviary.com/online/image-editor?loadurl=http%3A//i.imm.io/68ul.png&posturl=http%3A//drupal7.local/imageeditor/save/aviary/field_image/0/0/1/1&postagent=client&exiturl=http%3A//drupal7.local/imageeditor/exit/aviary&exiturltarget=replace&sitename=drupal7.local&saveandclose=1

File ->Exit works just fine - the iframe with Aviary Phoenix is
getting closed (I have JS code on the /imageeditor/exit/aviary that
closes this iframe).

When saving (pressing the "Save and Close Aviary" button) the iframe
closes and Chrome console shows these lines:
GET
http://www.aviary.com/apps/api/clientagent.aspx?fvguid=8eddf91a-8dd8-11e0-9ff3-12313b101135&posturl=d62b5b132d1d45bcb5cd13aa129c9bc5%7chttp%3a%2f%2fdrupal7.local%2fimageeditor%2fsave%2faviary%2ffield_image%2f0%2f0%2f1%2f1&userhash=d62b5b132d1d45bcb5cd13aa129c9bc5
undefined (undefined)
aviary
GET http://drupal7.local/imageeditor/exit/aviary 200 (OK)

And I don't see any POST to the posturl parameter. Don't really know
why it sends GET request to the exiturl parameter.

If I don't specify saveandclose parameter then the button text is
"Save as a new creation" and Chrome console shows these errors:

Unsafe JavaScript attempt to access frame with URL
http://www.aviary.com/online/image-editor?loadurl=http%3A//i.imm.io/68uW.png&posturl=http%3A//drupal7.local/imageeditor/save/aviary/field_image/0/0/1/1&postagent=client&exiturl=http%3A//drupal7.local/imageeditor/exit/aviary&exiturltarget=replace&sitename=drupal7.local
from frame with URL http://drupal7.local/imageeditor/save/aviary/field_image/0/0/1/1.
Domains, protocols and ports must match.
1:56Uncaught TypeError: Property 'jQuery' of object [object DOMWindow]
is not a function

and iframe is still showing the Aviary Phoenix interface.
Looks like the POST came to the correct URL (http://drupal7.local/
imageeditor/save/aviary/field_image/0/0/1/1), but the JS code on this
URL (that uses jQuery) couldn't do anything cause the iframe was still
showing the Aviary application.

Thank you.
AndyB

[Ari Fuchs]

Hi Andy, can you describe how http://drupal7.local/imageeditor/save/aviary/field_image/0/0/1/1 is handling the save? It needs to accept a form POST.

- ari

[AndyB]

Sure,

As you can see from the URL itself, it has parameters like the service
(aviary), then filed name (field_image) where to put the edited image,
then the delta - # of the field item if it can have several images in
it (0), then is it new image or the edited one (0), then replace
parameter - either to replace the image with the edited one or create
a new item in the field, etc.

After getting the POST to this URL, I do the calculations and return
the page code with JS commands to modify the original page that opened
the iframe with the editor. The commands are basically like this:

parent.jQuery('selector).val('value); - to set a value of the new
image
parent.Drupal.imageeditor.overlay.hide(); - to close the iframe

As you can see from the above (when not using the saveandclose=1) - it
shows the error that the save page http://drupal7.local/imageeditor/save/aviary/field_image/0/0/1/1
was trying to modify the editor iframe...

Hope it helps.
Thanks
AndyB

On Jun 4, 1:44 am, Ari Fuchs <a...@aviary.com> wrote:
> Hi Andy, can you describe howhttp://drupal7.local/imageeditor/save/aviary/field_image/0/0/1/1is handling

[Ari Fuchs]

Hey Andy, I'm not sure exactly what's happening from your description, but it sounds like it might be a cross domain issue. You won't be able to change the contents of a parent or child page that's on a different domain. If you can through together a sample page to put online, or for me to test locally I can probably tell you more.

best,

ari

[AndyB]

Ari,

While thinking about it I tried to do a call not to just parent. but
to parent.parent and it magically worked (for the case without
saveandclose=1). Looks like you are performing a POST in a separate
iframe which is a children of an iframe where I open Phoenix. And so
if I call just a parent then this is the editor iframe and if I call
the parent.parent then this is what I need.

I will do a screen cast of this module soon, will keep you posted ;)

Thanks
AndyB

[AndyB]

Ari,

I have created a demo page at http://drupal.org/project/imageeditor -
it is Drupal 6 based.

You need to scroll to the Image items under the Body field and then
you can edit the already uploaded images (hover mouse over the
thumbnail to get an overlay with editors) or create a new image. There
might be some glitches or slow performance (especially when saving
back to the site) as this is a shared hosting (and not the best one).

Here is one issue:
1. Saving back to the site is working fine in Aviary Feather, Aviary
Phoenix and Aviary Peacock.
2. I don't know how to go about saving images back to the site from
Aviary Falcon - it looks like it have a different saving interface and
you can save only to Desktop or Save & Host Online, which creates
different links and embed codes...

You can also run Aviary Feather there ;) Let me know what you think
about this integration and how to go around the above issue :)

Thanks
AndyB

[AndyB]

Correct demo page address: http://d6.andrewberezovsky.ru/node/1/edit