Easier page editing for clients

I've been flirting with ProcessWire and one really really nice thing about it is the ease of use for your clients.

It's really easy to edit a page for a none technical user.

It uses a wysywig editor just like modx but there are two basic (important) actions that are so much easier: making a link & adding an image in an article/textarea.

With MODx, when you click the link icon in Tinymce you get a popup menu with all the options your techy heart could desire: four tabs "General", "Popup", "Events" & "Advanced" and lots of options on the default General tab including a link to another popup for the Modx Resource Browser, and even a search for Pagetitle or Alias that will put the appropriate [[~##]] tag as your link, and Anchors, Target, Title, Class etc. etc.

Does a none technical client need or even understand all this? What the hell is [[~37]] ?

In ProcessWire the process is a lot more (non-technical) user friendly. You can link to a URL, Link to another page in the site (you get a list), or link to a file associated to that page



Similarly for adding images via Tinymce in MODx you will get the pop-up, with three tabs this time, then you'll have to know to click the Browse icon to get the MODX Resource Browser, and then be able to find yourself round the file system, maybe create a new directory, and find your way to the upload button to find your images which you will have had to previously re-size to the appropriate dimensions for the page ( oh sorry did your web developer not tell you how to upload and use Gimp??)

Now try this in ProcessWire You simply drag you image to the page and it gets resized to a predetermined size you have set up for that page. When the user clicks on the image icon in Tinymce all he has to deal with the images he has put on that page. It's simple, intuitive and brilliant.

I'd be much happier showing a client the ProcessWire way of updating pages than the current MODx way. What they have done is Kept It Simple Stupid for the end users, our customers. And happy customers makes happy business.

But this should be possible with MODx right?

I'm talking about front-end editing here, a none techy client needn't see all the back-end stuff. NewsPublisher makes it nice and easy to edit stuff in the front end.

So making the link button popup more user friendly should be just a matter of modifying the current modxlink plugin code.

But creating a front end drag and drop TV for images and then linking those images to that resource through the Tinymce image plugin may be more difficult?

Has anyone got any idea how easy/hard either of these tasks might be or how to go about doing it?

Or, better still has anyone done anything similar?

Cheers
Mike

For links
with ckEditor you can drag any page from the tree into the content area and it creates a link.

For client friendly images
try: http://modx.com/extras/package/simplefileuploadtv

I realize you are talking about adding images to Rich Text Areas, but I wanted to make sure you were aware of the Image+ Custom TV : http://modx.com/extras/package/imageplustvinput which gives some of the capabilities I think you need, but for TV input only.

I agree with you that it would be awesome to have a greater degree of control over the media insertion process for RTEs in general within MODX. I'm really liking where CKEditor is going too but, as of yet in their current implementations, neither CKEditor or TinyMCE are capable of integrating with MODX to the degree where media insertion is customizable.

I'd like to take a look at the process in ProcessWire to compare with MODX. By any chance do you know of any good video/s of this process which I can check out without having to install it?

Thanks, i'm not familiar with either of those packages, so I will check them out.

Yes, MokoJumbie, on the ProcessWire intro video (http://processwire.com/videos/ ) at around 5:00 it shows making a link to another page from the text editor. And then just after that he adds an image and resizes it in the editor and says it's being re-sampled from the original image.

I should clarify what I mean about media insertion customizability. I don't mean the ability to customize the code which gets inserted into the RTE. What I mean is that I'd like if the RTE provided hooks for upload/insertion of media so we can intercept and customize the upload process with a plugin and return the path to the output file. Presumably this would tie into Media Sources somehow. It'd also be great to see some sort of Media Library management system which would be abstracted from the file system and also made available via Media Sources.

Cool, thanks. So it looks like the Processwire approach is to make images page-specific. You upload by dragging and dropping to the images area where the CMS stores the original and makes a copy which is scaled to a predetermined size based on the page template, correct? To use the images (other than the Featured Image which is probably placed at a location based on the template as well, I presume) you have to insert them through a pop-up which presents you with what looks like the original images, where you can resize them before insertion. Otherwise, the images in the Images area could be used by something like a gallery component. Please correct me if I am missing any details, or have something totally wrong.

It looks pretty elegant and well thought out. The image upload process in filesystem-independent. However it appears to be page-dependent. Does that mean you'd have to upload another instance of an image file to use it on another page? Even if this is the case, it's probably a good trade-off in favor of usability.

I would also like to hear ideas on how this could be implemented in MODX. But you have a couple separate issues:

1. handling drag-n-drop
2. managing resource-specific media assets
3. inserting those assets into your rte

Note sure how you'd handle 1 (related bug here http://tracker.modx.com/issues/6527), to be totally honest.

You could probably simplefileuploadtv together to create a resource-specific folder to contain your page assets and wrap it in MIGX to allow upload of multiple files. However, using simplefileuploadtv would preclude you from using Image+ to customize your image upload.

As you mentioned, you may have to customize the modxlink plugin code to present the files uploaded to the MIGX tv for insertion to your RTE. Bear in mind that you will likely need to save the page before attempting to access the paths to the images defined in the MIGX tv.

I am sure what I have presented is not optimal and I might be totally off base in some areas, but maybe it'll spark discussion. If these are features that people want to see in the manager, then maybe they need to be put on the map for MODX 3.

Quote from: MokoJumbie at Mar 20, 2013, 02:30 PM

Cool, thanks. So it looks like the Processwire approach is to make images page-specific. You upload by dragging and dropping to the images area where the CMS stores the original and makes a copy which is scaled to a predetermined size based on the page template, correct?

As far as I understand it I think that's correct.

To use the images (other than the Featured Image which is probably placed at a location based on the template as well, I presume) you have to insert them through a pop-up which presents you with what looks like the original images, where you can resize them before insertion. Otherwise, the images in the Images area could be used by something like a gallery component. Please correct me if I am missing any details, or have something totally wrong.

Yes, I think so.

It looks pretty elegant and well thought out.

Yes, my point exactly.

The image upload process in filesystem-independent. However it appears to be page-dependent. Does that mean you'd have to upload another instance of an image file to use it on another page? Even if this is the case, it's probably a good trade-off in favor of usability.

Yes, images are connected to the page, it cuts out the complications of where you are storing the file, so the end user doesn't need to care about that, which is how it should be for a client writing blog posts and articles.

But you have a couple separate issues:

1. handling drag-n-drop
2. managing resource-specific media assets
3. inserting those assets into your rte

And I think it should be done in the front end so it works with NewsPublisher (KISS). I don't think migx or simplefileuploadtv will work with NewsPublisher ( I tried quickly but admittedly not very thoroughly)

I am sure 1 can be achieved with a bit of ajax/jQuery magic

I think 2 could be handled by putting images in a resource id based file structure

And I think 3 could be handled by a re-write of the Tinymce image plugin.

But I'm not sure I am clever enough to do it!

However, using simplefileuploadtv would preclude you from using Image+ to customize your image upload.

What's image+ ?

Yes, images are connected to the page, it cuts out the complications of where you are storing the file, so the end user doesn't need to care about that, which is how it should be for a client writing blog posts and articles.

Of course. However, I can see a need to access assets stored on the filesystem as well. What I'd like to see is the ability to select 'Page Assets' as a Media Source along with the standard file system based media sources.

And I think it should be done in the front end so it works with NewsPublisher (KISS). I don't think migx or simplefileuploadtv will work with NewsPublisher ( I tried quickly but admittedly not very thoroughly)

Ahh, I totally skipped over the part in your post about NewsPublisher. My bad. I haven't used it so I can't tell you much about interoperability, but MIGX itself does work in the front end and though I can't confirm it now, I don't see why simplefileuploadtv won't either.

I am sure 1 can be achieved with a bit of ajax/jQuery magic

Most likely. What I meant is that there are a lot of implementation details to consider, such as how the images are stored prior to saving the resource. You probably don't want to save them in a folder based on the resource id until you've saved the resource.

I think 2 could be handled by putting images in a resource id based file structure

Right, and simplefileuploadtv would be one way to do that.

And I think 3 could be handled by a re-write of the Tinymce image plugin.

But I'm not sure I am clever enough to do it!

Yeah, I've never had to write a TinyMCE Plugin, so I am not sure what kind of effort you're looking at there.

What's image+ ?

It's the Custom Image TV I mentioned in my first response. Allows some modification of uploaded images.

I'll chime back in if I get a chance to look in to any of this stuff further. I am sure you will be able to find a solution, but it may take quite a bit of effort to get the experience ProcessWire seems to offer.

simplefileuploadtv looks like it would be a good starting point as it already can be set to save files to a resource id based folder.

What needs to be added is:

1. something to read what's already in the resource id based folder and display that as a list (with the option to delete an image)
2. settings and code to make various size copies of the image on file upload

Also NewsPublisher doesn't seem to pick up simplefileuploadtv tv's and I'm not sure how easy that would be to do.

I'm sure it's all possible, but it's beyond my skills at the moment.....

NewsPublisher treats any TV it doesn't recognize as a text TV, which probably isn't going to work.

It would need to recognize the TV and have a way of rendering it and letting the user edit it.

Someday, I hope to abstract the various TV renders so it will be easier to add new TV types.