Client request: images inside "body" field - options and suggestions?

[OLSA]

Hello for all,

this is old question (and problem) - what is the best option to allow clients to place images inside text in editor field ("body")?
Please note that I am not meaning here about default editor image button, because that is bad for administration, clean text data, responsive design etc...
My client request is to get them option to create rich content like on many popular world news portals. As one example they want option to insert gallery in some part of text.

My answer was that with PW are many, many options how that could be solved - but need to find what is the best for all (user friendly for "editors" (role), clean data storage, manipulation with data and frontend rendering).

There are options like using custom markup tags (eg. , or PW Hanna code [[images=1,2,3]]) or another option with repeatable block (editor + image field).

What I don't like with markup tags is storing custom (strange) txt format in field, and not so user friendly (could be optimised with custom editor plugin).

Using repeatable block can be more user friendly than using macros, but repeatable blocks, are repeatable... and want to avoid later complexity (export, import...).

What do you think about custom editor plugin what would insert this:

<figure data="1,2,3"><!--data attribute store images ordering number--></figure>

In that "empty" figure HTML tag we can store on-page images ordering number using data attribute. To make it visible in editor we can use custom editor.css...

That editor plugin can be "button" what would open some modal or popup with options to select on-page image(s).

Later in frontend it's not problem to use some PHP HTML parser (eg. Simple HTML DOM Parser) to get and replace figure HTML tag.

Please what is your suggestion about this request?

Thanks and regards.

[mr-fan]

the only userfriendly take that i know is going with the repeater matrix or pagetable route, in one project i drilled it with PageTableExtended with rendered Output on Admin Side and different "blocks" of content that a editor could add such as galleries, maps, text with image right or left....and full control over markup on frontend.

WYSIWYG with full power is always a mess...on every system.

If i've time to play i would try out a combination of repeater matrix for the storage in admin and some kind of "add block" layer on frontend with frontend edit for the single blocks...so user works complete in frontend....this would be one step more userfriendly since everyone see instant like it is rendered in frontend...but that is just in my mind for now

[bernhard]

1 hour ago, mr-fan said:

WYSIWYG with full power is always a mess...on every system.

true. but i'm really missing a copy/paste functionality in the ckeditor field. It's always very annoying to create screenshots, create files, upload files, click on the image button, insert image, save.

with such a plugin it would be: create screenshot, paste

 

[dragan]

1 hour ago, bernhard said:

true. but i'm really missing a copy/paste functionality in the ckeditor field. It's always very annoying to create screenshots, create files, upload files, click on the image button, insert image, save.

I just made a test: opened an image on the web, right-clicked and selected "copy", then pasted the image into a CKEditor field with CTRL-V (Google Chrome, Windows10).

This works (don't know if this works across all browsers and OS out there).

Of course, the disadvantage is that such images are not automagically saved to the images PW field. And only for images that are already on the web somewhere.

[bernhard]

1 minute ago, dragan said:

Of course, the disadvantage is that such images are not automagically saved to the images PW field. And only for images that are already on the web somewhere.

I tried it with a local screenshot and it worked  It works everywhere nowadays... web.whatsapp.com, facebook messenger, github or stackoverflow (don't know atm which one it was)...

I'm sure such a plugin could be adopted to our needs and save the image just as if it was uploaded via a regular image field. and deleted when the field is changed and the image removed.

[heldercervantes]

I usually go for a modular layout.

You take a repeater, and add all the fields you'll need for all types of content block: body, title, images, etc.

You add another field called type, make it an options field, and get in there all the types of block you need. Text, image gallery, video... whatever.

Then you customise each field's visibility to appear only when type=1, for example.

That will allow the admin to freely add a chunk of text, then a gallery, then more text... No weird tags to remember, simple and straightforward.

On the frontend, you make include files for each type (remember the options field) to keep it neat and tidy, foreach the repeater, and include() the correct block template file according to the value of the type field. Generate away.

[Macrura]

4 hours ago, dragan said:

I just made a test: opened an image on the web, right-clicked and selected "copy", then pasted the image into a CKEditor field with CTRL-V (Google Chrome, Windows10).

This works (don't know if this works across all browsers and OS out there).

Of course, the disadvantage is that such images are not automagically saved to the images PW field. And only for images that are already on the web somewhere.

@dragan

http://modules.processwire.com/modules/import-external-images/

[dragan]

wow... never saw that before 

[bernhard]

@Macrura do you think it would be possible to update your module to also import images that were pasted from the clipboard? There is a ckeditor plugin that handles pasted image already. Maybe that could be a great addition!

[Macrura]

ok sure, i'll give it a try and see what it looks like..