PixlrEditor

[PawelGIX]

Hi I would like to share with you my first module.

Module integrates PixlrEditor with a InputfieldImage.
You can easily edit your images online.

The module provides a link to edit each field type InputfieldImage.
Have fun;)

Warning:
I have not tested yet on localhost. As Ryan pointed out. It does not work on localhost. Pixlr webservice must have the ability to get images from your server.

Source: https://github.com/P...GIX/PixlrEditor

Screenshots:

Changelog

1.0.2

1. Now Support Thumbnails Module - Thanks to joey102030 for the addition.

[Soma]

Great! Thanks for your work on this, will try soon.

Edit: You should call the folder or module on github also ProcessPixlrEditor ... same as the module class name.

[ryan]

This is really great, thanks PawelGIX! I took a look over the code and it looks nicely put together. I could only test on localhost this morning, but it understandably does not work there since the Pixlr service needs to operate on a web-accessible image that it can read from. Still, I got a feel for what it does and how it works and must say I'm impressed. I can't wait to try this on web server… it seems like a great capability to have, and I really like the way you've integrated the buttons and service. Only possible suggestions I have are:

1. Maybe move your hooks from init() to ready() and check that $this->page->template == 'admin'; before adding the hooks. Not really necessary, but would be slightly less overhead if the hooks aren't attached when they don't need to be.

2. Maybe rename on GitHub from 'processwire-pixlr' to 'PixlrEditor' (or 'ProcessPixlrEditor') so that people can 'git clone' and not have to go back and rename the directory in order to install. Again, not really necessary, but might make it quicker for some to install.

3. Post it in the modules directory! http://modules.processwire.com/add/

[Soma]

I did a quick test and local it doesn't work as Ryan already pointed out, but online on my hosting it works. Very nice work indeed!

Nice touch, with the hover showing the buttons, but I for me it's bad UI design as it doesn't indicate there's something unless you hover over the image field. If like this, a small icon when not hovering would be nice (unless I missed something). And maybe a option to turn it off.

The basic editor works well, but so many options it would be nice to be able to only give certain commands.

The full editor loads but the image doesn't. Is it supposed to register there first?

Also some option to turn on/off basic and/or advanced editor button.

Trying out the basic editor, it worked like a charm replacing the original image. Does it create a new one or overwrite the existing in the assets folder? So if using the thumbnail module, does it still work? I wonder if it creates a new thumbnail when original changed.

Seeing this module I think it would be nice to try to do same with Aviary image tools. http://www.aviary.com/web

[PawelGIX]

I wonder. Does it make sense to split the code into two modules?

Now I have PixlrEditor module, which adds hooks and ProcessPixlrEditor Page module, which processes the image.

Maybe it would be better to combine everything in one module ProcessPixlrEditor?

Also confirm that the module is working fine on IE9.

[Soma]

I wonder seeing so many image modules popping out, the image fileld gets clutered. Would make some way to make this streamlined? Like a place or method to be able to add actions. I don't know if there is any way or would make sense even.

[PawelGIX]

I agree that something like drop-down "Actions" menu would be useful.

And maybe some new hook, for example, "___actionButtonsRender".

[ryan]

I have to admit, I kind of liked the buttons appearing when I rolled over each image field. Assuming there is repetition (i.e. lots of images), I think it's better than having them visible for all images at once (whether the buttons or small icons, etc). That would be a lot more furniture on the page, when it's something you'd only use for 1 image at a time. So this may be more subjective than bad UI vs. good UI. When reasonable, I often prefer things to show themselves when they are in context or focus and stay out of the way when they are not.

But it's good to read the different preferences here, because it seems like we would all agree on the value of an actions menu. Are you guys thinking just a right-aligned select box in each image, like this?

There was also this setup in ProcessWire 1.x:

Last, there was also this setup in Dictator (PW from 10 years ago) where you would select one or more images and then choose an action from the menu:

[Pete]

I think the drop-down menu would make sense, especially if it can be added to with further modules.

Maybe it would make sense if the select box uses "optgroup" tags so that each module's actions stand out separately?

[PawelGIX]

Ryan. I like the first option.

Soma I'm sorry, I missed your question .

The basic editor works well, but so many options it would be nice to be able to only give certain commands.

Pixlr API api does not allow for something like this.

The full editor loads but the image doesn't. Is it supposed to register there first?

You don't have to register. For me, the full editor works just as well as Express Editor. Maybe try cleaning the browser cache. On what browser you testing?

Also some option to turn on/off basic and/or advanced editor button.

You can enable / disable the selected editor in the Pixlr Editor module settings.

Trying out the basic editor, it worked like a charm replacing the original image. Does it create a new one or overwrite the existing in the assets folder? So if using the thumbnail module, does it still work? I wonder if it creates a new thumbnail when original changed.

The module overwrites an existing image and creates new thumbnails. Probably my module does not affect the images generated by the Thumbnails. I have not tested yet with Thumbnails module.

Seeing this module I think it would be nice to try to do same with Aviary image tools. http://www.aviary.com/web

I do not plan to add Aviary Web Widget - at least for now. Maybe in ver. 2.0

[ryan]

PawelGIX, I will work on an actions select built-in to the Image Fieldtype perhaps for PW 2.3. But for now, it seems like your module is quite stable and works well. At your convenience, do you think you could post it to the ProcessWire modules directory? http://modules.processwire.com/add/

[Pete]

Just tried this on 2.2.10 (dev) and no buttons appear either on local hosting or live site Then I realised it was because I had the CropImage set on that field.

There could be cases where you would want to do both (CropImage to control crop aspect ratio) but I guess there's no way to then selectively remove the crop tool from PixlrEditor since it's third-party.

[joey102030]

PawelGIX, just to let you know I forked your repo in Github and added the functionality to handle edit cropimage thumbnails.

The 'Edit in Pixlr Editor' function appeared to be broken in the latest PW so I added a fix for that too

[PawelGIX]

Joey102030 Thanks for your contribution to the development of this module. I've updated the version number to 1.0.2. It is already in the master branch.

[Neeks]

seems like a really cool plugin

will try on another install and install manually see if I have more luck then with the modulesmanager. 

After install with modules manager: 

  Page not found. 
at URL: ...../processwire/page/pixlr-image-process/

Also get this when I click on the pixler express:  
 

404 Not Found

The server can not find the requested page:

...../processwire/page/pixlr-image-process/?exit=true (port 80)

[PawelGIX]

Hmm... I can't duplicate your error.

Check if "Pixlr Image Processing" module is installed. 

Check also if you have a page in: Pages -> Home -> Admin -> Pages -> Pixlr Image Process

[Neeks]

Thanks, PawelGix.  I stalled on 2.4  PW install. Pages -> Home -> Admin -> Pages -> Pixlr Image Process does exist.

I'll try installing on another 2.4 site on another webhost see if I have more luck. Awesome Idea for a plugin. Look so forward to using it

Update: so I just installed with the module manager on a different PW 2.4 site on a different host, and go the same error.
Commonalities between the two installs: Using Chrome Windows as browser (latest version),  used module manager to install.

Other modules Installed: CK-Editor, Thumbs, colorpicker, batcher.

​Nothing of noteworthiness in the proccesswire logs. I'll try a manual install a little latter and see if that fairs better. 
 

[daniel-not-dan]

Having a bit of trouble with this module. I'm using the Express version on PW 2.4.

The interface loads beautifully, and allows me to do all the neat little edits, but when I click Save, the image goes blank and I get a broken image icon. The image also disappears from the page. Looking at my assets->files folder, it looks like the image got renamed from "anthony-scarzafava-painter-01.jpg" to "anthony-scarzafava-painter-01-1.jpg" Is that what's supposed to happen?

Other modules I have installed:

• Modesta admin theme
• AIOM+ (All In One Minify) for CSS, LESS, JS and HTML
• Range Slider
• Integer Range Slider
• jQuery DataTables Plugin
• Markup Sitemap XML
• Page Edit Field Permission
• Custom Upload Names

Link to the development site (if it's useful): http://anthonyscarzafava.com/new-site/

I'm wondering if it's a problem with my server setup. I don't see any particular requirements listed on the Module Page, though. I'm on Media Temple's Grid-Service running PHP 5.5.6 CGI. I also have Cloudflare activated. Not sure if any of these tidbits are useful, but I'm trying to be as thorough as possible.

Any help greatly appreciated as this is such a stunning module and I'd love to get it working!

[adrian]

Custom Upload Names

Looks like that might be the trouble!

I haven't evert tried PixlrEditor but I'll take a look now and see if I can sort out a fix for you.

What are your settings for CustomUploadNames? In particular your FileName Format and Rename on Save settings?

I think it is most likely the "Rename on Save" setting that is causing the problem. Try unchecking that first. I will also test here too.

Also, what version of CustomUploadNames are you using - please make sure it is up to date.

[adrian]

Ok, so I just tested with CustomUploadNames installed and even with it set to "Rename on Save" and it all seems to work fine after editing with Pixlr Editor, so my current theory is that you are running an old version of CustomUploadNames. Can you please try with the latest version and let me know. If you're still having trouble, I'll investigate further.

@PawelGIX - on another note, you should update the module to set the status of the Pixlr Image Process page to hidden so it doesn't appear in the Pages dropdown menu which is part of PW 2.5 (you can see what I mean in recent dev versions). 

[daniel-not-dan]

I've been playing around with it a little more today and am still not having any joy.

I did try uninstalling CustomUploadNames, but it still didn't work (and it is version 0.3.4, which looks to be the most recent version). I was pretty sure it wasn't that module, though, because I didn't have it activated on the gallery template I was trying to use Pixlr on - it was only activated on the blog post template. But it was worth a shot!

Going back and forth between my admin and my Filezilla (FTP program), here's what I've discovered:

1. After I upload an image to the page and save that page, I can see the image in the assets/files/1006 folder, along with a "thumbnail" version with ".0x100.jpg" tacked on to the end of the filename.
2. I can also see the image on the page where I published it to.
3. After I try to edit it in Pixlr and I get the "broken image link" icon, the thumbnail version disappears from my files.
4. The image also becomes broken on the page it was published to. So even though that file actually still exists in the site files, it still will show as broken.

It's extremely puzzling to me - especially the last part, that the image still exists with the same filename, but will not display on the page.

Any other suggestions?

[guenter55]

hi,

I installed the PixlrEditor in PW 2.5.3 but it dont work. No buttons near image-field on hover like in earlier versions.

Is there a chance to get it work?

best regards

[PawelGIX]

I installed the PixlrEditor in PW 2.5.3 but it dont work. No buttons near image-field on hover like in earlier versions.

Is there a chance to get it work?

Compatibility issue with PW 2.5.x. 

There is version 1.0.3 on Github. 

[guenter55]

Compatibility issue with PW 2.5.x. 

There is version 1.0.3 on Github. 

Good work, and sooo fast! SUPER! thanks

The two buttons appear, but by going back it kills the image in image-field and set it to 0 bytes.

It works when I save in pixlr to "my computer" and load again. This will keep the original image - but it´s not what the user expected.

It would be perfect if you can solve this issue?!

[bernhard]

tried it on lightning.pw - absolutely great module!!! thank you!