Better image management / better integration with WYSIWYG

[ryan]

It doesn't matter how "easy" or "clever" your codes are - code is code, and many clients want WYSIWYG and simply will not accept that.

I totally agree that we should strive to keep clients away from code when we can. But things like phone numbers and email addresses aren't far off from the type of codes we're talking about here. Sometimes a bit of code (more a tag in this case) that references something is the simplest possible solution from a development standpoint. In this particular case, the tag could technically be completely behind the scenes and the client could just see an image. That would be ideal, and I think this is what we should strive for long term. But the implementation of that is no doubt expensive (time and money) and has editor dependencies. The solution that works for TinyMCE 3 won't work in CKEditor or even TinyMCE 4. I don't think anyone disagrees on what would be the perfect solution from the user standpoint, and this is what we should eventually aim for… when someone can afford the time/cost investment to make it happen. But I also like to see solutions that solve problems, that are maintainable and realistic with time and budget. They provide solutions to questions that would otherwise remain unsolved, sooner rather than later. Very often these are also important intermediate steps that eventually facilitate creation of something even better. 

[mindplay.dk]

If you have phone numbers written down, you usually have a name written down next to each number, right? This is metadata that puts the numbers in context. So yeah, data-types like phone numbers and e-mail addresses are necessary, but they usually have metadata associated with them to give them meaning. They're also both examples of data you can associate with a human relation. Images? not so much.

Anyhow, we're edging on that topic again, so I'll just say - I still think the real problem is WYSIWYG, which is too limited and simple. For every other thing the user would enter into a user interface, we have some kind of interface that provides guidance, meaningful constraints, structure, advice, context, process, or flow - except for the most important type of input, the one for the actual content... for that, we're perfectly happy leaving the user at his own devices, working with the raw media (HTML) without any real constraints or guidance, short of picking an image from a list - censoring certain dangerous HTML tags, or otherwise crippling the user-interface to limit their use of the medium. It's just no good.

Solutions involving codes or tags are usually chosen because they're easier to implement, not because they're "better" - after all, you wanted a WYSIWYG in the first place, and codes or tags are not "what you get". Somebody went through hell and high water to create a WYSIWYG, to enable the end users to work with the raw code without seeing the code - and then we just go and invent more code, and put it back in the WYSIWYG. To me that completely defeats the purpose of using a WYSIWYG in the first place.

Anyhow, I've said all this before, but I don't think working with the raw medium is the answer. Yes, content management should be visual - but somebody (me? if only I had more time) needs to invent a proper abstraction for content. Something that accommodates images, as well as other media-types, as well as any other solution-specific data-types, without having to climb Mt. Everest to get there.

On thing that comes to mind is these Bootstrap drag-and-drop design tools that are cropping up every week now, have you guys seen those? They provide a structured, guided, visual way to build entire web-pages out of components, which is not precisely what I'm looking for - but something along those lines. Something that allows you to get creative without editing raw HTML or entering codes or tags. Something that guides you through the creation of rich, structured content, without getting in your way - and where you can easily drop in another component template at the user's request.

I will keep dreaming of this in obstinance until I or somebody else creates it

[Soma]

I'm building something like block elements for processwire, it's just as with such system that they are complicated to do and often the system you implement them come to limit in terms of functionality or UI. If you are interested I could share the bare bone WIP proof of concept.

We use a CMS at work for many years which allow such block system to build directly in the template that then is editable for the end user. You add a new block, select what type of block, and it will load the "template" with the field defined there. And so on, you can limit the count of the block, sort them and so on. Unfortunately the CMS has many flaws and is somewhat bloated and sometimes becomes a burden. It's as open as PW regarding what you build with it, I'd even go as far as saying it is a lot more flexible than PW. PW is just a lot more convenient to build structured data as is, simple and modular extendable and a lot more fun and reliable.

If you want it's like Repeaters on steroids. 

This is what I originally imagined that repeater would be, but it came a little different. There were some people also discussed this when repeaters were introduced.  Imagine Repeaters where you can select a "template" for each item. Each of them representing custom fields as many or different as you like. Those "templates" could be associated with a repeater. What I tried is to find a way to use the repeaters as a base for this and I think it would be possible to adapt them to work this way. Just a lot of work I then started building something from scratch just for fun that works like repeaters but only in the frontend. In the template you define the blocks you want to use for the repeater and it then will render a editable, sortable simple interface if logged in to manage block, and render them when not logged in. The block are pages saved unter a parent in the admin. There's no interface for the admin as this would go too far for now.

You then could define a text field for a title and a textarea for the paragraph, and image with alignment, another with a video, another with a map etc. And if Wysiwyg used it would only to be able to set links, bold and such things as basic styling. This way you can get away from using a Wywiwyg as the main content editor and put everything in there which we have to agree is only as good as the editor, and we all know they can cause troubles.

Rather than having building a complete new system with UI and not what for within a textarea or Wysiwyg, which would already exist if it would be a good way, I'd rather see the repeaters on steroids, for block based content easy to edit and build.

[Macrura]

@mindplay.dk - have you seen the editor that is used in Campaign Monitor? It's really a lot like what you are describing;

attached are some screenshots...

[Soma]

BTW you guys know you can add predefined templates to TinyMCE that can be selected and inserted to fill in? Those are html templates and they can contain tags that will be replaced with current date, user name or anything. You even see the preview when selecting them from the dropdown. It's much like what Macrura posted just "better".

[kongondo]

have you seen the editor that is used in Campaign Monitor? It's really a lot like what you are describing;

attached are some screenshots...

@Macrura,

What Editor is that?

[Macrura]

@kongondo - that's the template/content editor for Campaign Monitor (an email sending service).

@soma - tinyMCE templates look cool...will have to check those out...

I guess ckeditor also can do this

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Templates

[mindplay.dk]

Templates in TinyMCE or CKEditor get baked into the mark-up... so they're static templates, not dynamic templates.

The particularly hard part here, is that whatever the format of the templates, they have to be supported on both the client and the server side - on the client to avoid a round-trip to the server every time you make a change, and on the server so that the templates can be pre-rendered for SEO purposes.

There is a chance the rendering the could be done client-side though - the editor would then send the data as well as the rendered content for the server to store. The server would no longer be responsible for rendering the templates at all, so you'd lose some control that way. You also would have no way to "mass update" rendered pages after making a correction to a template.

There is almost definitely no quick fix and no shortcuts to something like this. A really reliable solution has to have both client-side and server-side support for whatever you're using for templating...

[titanium]

I'm building something like block elements for processwire, it's just as with such system that they are complicated to do and often the system you implement them come to limit in terms of functionality or UI. If you are interested I could share the bare bone WIP proof of concept.

Hi Soma, I'm definitely interested! I already discussed this topic elsewhere, sharing similar ideas. I would be glad if I could try out what you have.

[gmclelland]

@Soma - I like the freeform blocks concept.  Your block concept sounds a lot like Concrete5 and also in Drupal you have https://drupal.org/project/panopoly which you can create these blocks with https://drupal.org/project/fieldable_panels_panes and place them into a layout using the https://drupal.org/project/panels "In Place Editor"

[vxda]

how about implementing this to ckeditor

looks exacly of what we need.

http://cksource.com/ckfinder
 

ok its not free ;/

Edited September 26, 2013 by vxda

[Can]

Hey guys,

like PW a lot, thanks for that. Especially to Ryan ;-)

At the moment I´m thinking about how to set up some sites. Then I came across this thread and actually here are some nice suggestions and ideas!

The safest way is of course to not let the customers use images in wysiwyg fields and handle it via template output.

But sometimes it´s just better to have images in RTE. Like the shortcode way, but as some others, I think it´s still to codey.

I made a little mockup to illustrate my thinking

What do you guys think about something like this:

1. You have a thumbnail image field set up with some sizes
2. After uploading a couple of images you get a view like in the attachment (it´s a bit messy I know..)
3. Then you can just drag an image or grab directly a cropped one (just grab the name of the size) into the RTE
4. The image is showing in the wysiwyg in the expected size
5. It´s showing some controllers to set alignment and change size if needed

First I thought about a little gear on the image, similar to Wordpress (?) but with a little dropdown for those settings. Okay it´s possible to show the dropdown on hover of course but it´s an extra way to get there and open it.

But of course there is a lot of space to beautify this idea.

And to limit the errors it´s only possible to adjust the image to the given sizes, so the designer is able to calculate any possibilities.

Cheers, Can 

[horst]

Hi Can, welcome to the forums.

this looks interesting. It is a good compromise between the need of using images in a RTE and have some control over the output.

BTW: Are you able to code something like this, I mean the JS stuff that is needed?

[Can]

I knew that I forgot something^^

That´s the problem with my idea, I´m not a programmer myself. I´m happy that I can get some loops working 

I could help with the CSS hehe

Offtopic:

Gerade gesehen, dass du aus Aachen bist Horst, ich komme ursprünglich aus Berlin ;-)

[horst]

OT: "ursprünglich", das heißt wo bist Du jetzt?

[Can]

Good morning

Ah, the existing image picker button in tinymce and the image manager module could provide those different sizes as well.

Like the image manager a lot even that I didn´t tried it myself yet

OT: I´m in the south of spain, cycling around the world with my girlfriend. If you´re interested, our blog is at www.globetrawter.tumblr.com

Sometimes I would love when I were able to do something like this myself, but at the moment it´s not really appropriate to learn php and stuff^^

EDIT:

As i mentioned before I´m not a PHP pro.

How is it possible to check if an image is already inserted in tinymce or not?

I think it would be great to have for example 1 thumbnail field. Throw all images in there. Pick those you want to show in the textarea (as in my post before, drag and drop the size) and leave all other images alone. All images left will be rendered as a little gallery below the text (or of course somewhere else)

If needed you could even add a checkbox either to render the gallery or not (that´s the easiest part I know).

The backend could highlight the images in the thumbnail field differently for those used in the RTE to have it even more fancy ;-)

Edited April 13, 2014 by Can

[horst]

OT: I´m in the south of spain, cycling around the world with my girlfriend. If you´re interested, our blog is at www.globetrawter.tumblr.com

WOW!

Ähm, sorry: "Good morning too"

It is wonderful to see what you are doing and especially nice is that you share it in this way. <attention-google-translated>Add me jump right back many memories and longings on while I rummage in your reports.</attention-google-translated> - Uuuh.

<german-because-the-above-is-google-translated>Es ist wunderschön zu sehen was ihr macht und besonders schön ist es das ihr das auf diese Art teilt. In mir steigen direkt viele Erinnerungen und auch Sehnsüchte auf während ich in euren Berichten stöbere.</german-because-the-above-is-google-translated>

---

BTW: If you ever come near to Larzac (plateau in the south france) maybe worth to visit Le Arc. I was there and on the plateau for peace and anti militarian demonstration in 1980 and years later for vacation. Meanwhile some other communities has dissolved, but Le Arc still continues to exist, as I have heard last year.

EDIT:

I do not use RTEs with images myself. I have done it once, together with Images Manager, maybe 10 month ago. I don't remember very well the deatils, but it works good for me and maybe it is worth you simply try out the Images Manager.

Edited April 13, 2014 by horst

[Can]

Thank you Horst

And thanks for the tipp with Larzac, but I think we're not crossing france again..

I'm just porting the website www.deutsche-baeckerei-nerja.es to PW

and will give the imagemanager a try

have a nice day

[Neeks]

this topic inspired me to think about a very basic change to the existing image setup that would at least make managing images a little easier.  Doesn't address the broader issues that are being talked about would at least make the existing system  a little easier to use when dealing with a lot of images. 
 

main feature is it shortens the list if you have many images with fields. It will probably even let you squeeze an extra field in like "title" if you wanted it.

just an idea...I really like how it works now compared to word-press or expression-engine image management.

[Soma]

That unused space isn't there for me most of time cause I use image field often on a column 30-40%.

[horst]

And thanks for the tipp with Larzac, but I think we're not crossing france again..

You never know for sure. (Maybe in 10 or 20 years, - or later?)

I'm just porting the website www.deutsche-baeckerei-nerja.es to PW

and will give the imagemanager a try

Nice! If you are ready with it, you can post it under showcases and / or add an entry in the sites directory.

[Can]

@Neeks, good Idea. For me it´s nicer to float the images and have 3-4 in one row.

@Soma, Interesting as well..never thought about putting images next to the body field or somewhere in a "sidebar"

But I like to have those together and this way, with a widescreen display, it could be even better.

Maybe i´ll just change the width of the whole backend..have it more fluid

By the way, uhm kind of OT:

Is there a way to have the new AdminTheme module as custom theme, like when I copy /wire/templates-admin to /site/templates-admin ?

Because I would like to have this one as starting point for my admin theme.

@Horst

Yes you´re right, but we´re planning to settle somewhere tropical ;-)

Thanks for the tip, I will. But maybe it will be another site which we are going to start in the next days..we´ll see

[kongondo]

.................

By the way, uhm kind of OT:

Is there a way to have the new AdminTheme module as custom theme, like when I copy /wire/templates-admin to /site/templates-admin ?

Because I would like to have this one as starting point for my admin theme..................

If you just want to add a different colour to the module itself:

https://processwire.com/talk/topic/4650-new-processwire-admin-theme-on-dev-branch/?p=54479

If you want to completely change the theme:

Key word is 'module'. The new admin theme is a module. You should be able to copy the module, change its name (including the class name), install it as a normal module (/site/modules/) - and change the CSS (even HTML) as you wish

Edited April 23, 2014 by kongondo

[Can]

oookay you´re such a genius!!

sounds like a plan..will definitely give it a try!

Ah @Horst hadn´t had the time to try the image manager myself..what a shame   

UPDATE:

You´re my HERO Kongondo!!

Edited April 23, 2014 by Can

[kongondo]

@Can...looking forward to seeing your custom theme