Image captions in RTE (body text field)

[SamC]

Hi,

I'm looking at ways that make it easier for a user to add inline images with a caption in an RTE field. At present it's a bit weird as there's no central media store so in order to add images to a text field on a template, I have to:

1) Create an 'images' field
2) Stick that above the RTE field in the template
3) Then when editing the page, a user has to add images that they 'might use' into this field (or upload into this field after clicking image toolbar button)
4) Then the image is available to add in the RTE

Its pretty long winded for every RTE field that 'might' have an image in it. Anyway, this isn't my problem (although try explaining the above to a client). If you have any better ways of doing this, I'm all ears!

Anyway, I have a CKEditor issue:

Problem

When I add an image and select to add a caption:

...I cant add the text at this screen, which isn't too user friendly. Instead, a handy popup tells you to add in the next step of the process. So I click 'insert image' and:

 ...wtf?? Then I save the page and view it the browser:

...and BOOM, normal size again!

The resulting HTML is:

<figure>
  <img alt="" src="/site/assets/files/1112/pw.png" width="636" />
  <figcaption>WOW, this image is TINY!</figcaption>
</figure>

Where do I edit the image alt text? I filled in the description field but seems this isn't used for the alt text.

I tracked down the CSS culprit for the tiny image in:

http://mysite.com/wire/modules/Inputfield/InputfieldCKEditor/contents.css

 

So, in short:

1) How can I override this without editing anything inside the wire folder?
2) How can I get an alt text onto this image?

Any advice would be awesome thanks!

[AndZyk]

Hello @SamC,

I have never used this option, but you don't have to and shouldn't edit the contents.css inside the wire folder.

Instead you can define your own stylesheet in the field settings:

This file can then be inside site/modules/InputfieldCKEditor/contents.css. 

Regards, Andreas

[SamC]

Awesome, thanks @AndZyk

[Peter Knight]

I don't find it long winded but appreciate it could be reviewed. 

Theres a paid media manager module available which stores all images In a single place. 

 

 

[SamC]

2 hours ago, Peter Knight said:

I don't find it long winded but appreciate it could be reviewed. 

Theres a paid media manager module available which stores all images In a single place. 

 

 

Thanks @Peter Knight I am aware of the module, not sure I need anything so fully featured though. I had a thought, the confusing thing for a user could simply be the actual presence of this field:

They look at this and might think "what is the Images bit for?". In reality, this field does not need to be shown to the user at all. It could be hidden and when they inset image via RTE, this field would still be used but would work behind the scenes. However, I found a problem with this. If you set the field to closed:

...and insert an image via RTE, then choose 'Upload', it provides a choose file button:

...but, if you set the field to hidden:

...and insert an image via RTE, then choose 'Upload':

...it's blank. No way to actually upload the image. I thought you would still be able to upload an image even though it wasn't shown in the edit page.

[Peter Knight]

That's an interesting one. I always tell my clients during training that they need to add an image to the images field first to make it available within the RTE. Your's seem to go down the opposite route by using the RTE insert image icon. 

The images part of Processwire is probably the only area of the CMS which my clients run into issues and always in two areas.

1. Image tags

They often enter the wrong tag or are not sure which tag to assign to an image. This has been improved just recently with the latest image tagging commits. Haven't tried it yet but really looking forward to less UI friction there for my users.

2. Select V Upload

Once a user enters the image modal, there's a very prominent 'Upload image" button and a very subtle "select image" instruction. This leads to a lot of confusion and clients uploading the same image twice.

Could easily be solved with some simple changes but it's probably low priority.

 

I hadn't come across your particular bug before but it's a nice find.

 

 

 

[szabesz]

9 hours ago, Peter Knight said:

2. Select V Upload

Once a user enters the image modal, there's a very prominent 'Upload image" button and a very subtle "select image" instruction. This leads to a lot of confusion and clients uploading the same image twice.

Could easily be solved with some simple changes but it's probably low priority.

I think @tpr could improve it with AOS in about half an hour

[Peter Knight]

5 hours ago, szabesz said:

I think @tpr could improve it with AOS in about half an hour

What's AOS?

[adrian]

20 minutes ago, Peter Knight said:

What's AOS?

@tpr's awesome Admin On Steroids (http://modules.processwire.com/modules/admin-on-steroids/)

[tpr]

I don't see how this could be tweaked by aos easily, I would wait for the image handling updates that are on the roadmap instead.

https://processwire.com/about/roadmap/

[szabesz]

Oh dear, I was wrong. Bummer  

[Peter Knight]

These are from May 2015 but I think they're still relevant.

By using tabs in the Modal marked Choose and Upload, it clarifies the 2 distinct actions available Vs 2 options under one confusing heading.

The thing is (and I've yet to resolve), should the Upload tab be the default active one?

I think there's an alternative combined version there too (not attached)

 

[szabesz]

On 8/31/2017 at 1:59 PM, Peter Knight said:

Once a user enters the image modal, there's a very prominent 'Upload image" button and a very subtle "select image" instruction. This leads to a lot of confusion and clients uploading the same image twice.

I ended up hiding the "top-left" upload button with CSS:  #ProcessPageEditImageSelect > a { display: none; }

And "translating" the label of the "bottom-right" button:

[SamC]

On 01/09/2017 at 4:49 AM, adrian said:

@tpr's awesome Admin On Steroids (http://modules.processwire.com/modules/admin-on-steroids/)

Wow! Where has this been all my life 

[szabesz]

On 8/30/2017 at 8:18 PM, SamC said:

Where do I edit the image alt text?

CKEditor's inputfield settings -> Details tab -> Markup/HTML (Content type) -> Update image alt attributes: Replace blank alt attributes with image description

And this is why hiding the Image inputfield might not be the best idea. If you hide it, how can the editor provide the alt text?

On 8/30/2017 at 8:18 PM, SamC said:

If you have any better ways of doing this, I'm all ears!

Similar to yours but sometimes little things make a big difference:

• Body -> Body Images
• Notice the description too.

BTW, I could not reproduce your tiny image + caption issue on ProcessWire ProcessWire 3.0.73.

On 8/31/2017 at 11:37 AM, SamC said:

No way to actually upload the image. I thought you would still be able to upload an image even though it wasn't shown in the edit page.

My "Select image" modal looks different, see my screenshot in my post above. I have an Upload Image button in the bottom-right corner too, next to cancel. Don't you have those as well? Also, I do not have "Choose File". My "not hacked" upload modal looks like Peter's (+ the buttons in the bottom as well):

 

[SamC]

17 hours ago, szabesz said:

My "Select image" modal looks different, see my screenshot in my post above. I have an Upload Image button in the bottom-right corner too, next to cancel. Don't you have those as well? Also, I do not have "Choose File". My "not hacked" upload modal looks like Peter's (+ the buttons in the bottom as well):

Yeah, it does actually. The screenshots I showed here are for ProcessWire 3.0.41.

I just did a fresh install of ProcessWire 3.0.62 and CKEditor looks much better (plus ripped off your wonderful idea of putting the images next to the field...)

...and the RTE button insert image modal:

The modal still looks different from your though. This is a fresh install, no AOS or anything.

[szabesz]

9 minutes ago, SamC said:

The screenshots I showed here are for ProcessWire 3.0.41.

I see. I cannot seem to be able track these changes these days...

10 minutes ago, SamC said:

The modal still looks different from your though. This is a fresh install, no AOS or anything.

Mine is different because I use Reno's default Color Set and most importantly as I described above I hid the confusing upload button and renamed the not so confusing upload button by (technically speaking) "translating" its label with PW's translate feature.

[SamC]

Ah I see.

3 minutes ago, szabesz said:

I use Reno's default Color Set

Aha! I never knew this existed, found how to enable here:

Gonna give it a whirl.

[SamC]

Installed AOS and Reno theme now, totally taken the editing to a new dimension, nice one @tpr unfortunately it does makes the old classic theme (used on my previous sites) look very dated.

[tpr]

6 minutes ago, SamC said:

 unfortunately it does makes the old classic theme (used on my previous sites) look very dated

Plus it's a pita to support both admin themes, not to mention the latest uikit-based one (which is currently not supported "officially").

[SamC]

Awesome module, but one thing for me, I'm not a fan of the centred login, specifically the centred text above the text boxes themselves (I would personally prefer the text and the button to the left but the whole form still centred):

...so I turned it off:

...but the default usually looks like this:

I actually prefer branded logins like this which to me are more stylish (this is not my site nor my image, just from a google search):

Not got into CSS theming the admin yet.

[tpr]

The indentation looks like a bug, I'll check. 

Branding logo is something I plan to add somehow, I'll get back to this sometime.

[SamC]

2 hours ago, tpr said:

The indentation looks like a bug, I'll check. 

Branding logo is something I plan to add somehow, I'll get back to this sometime.

Feel free to PM me if you want any help with testing, CSS etc. maybe not so much the actual module side, haven't got into that yet.

[SamC]

On 15/09/2017 at 9:37 AM, tpr said:

The indentation looks like a bug, I'll check. 

@tpr maybe to do with this CSS:

@media only screen and (min-width:1200px) {
    html.AdminThemeReno.headSticky:not(.modal) #main:not(.closed) #headline {
        padding-left: /*252px*/ 20px;
    }
}

@media only screen and (min-width:960px) {
    html.AdminThemeReno.headSticky.headStickyCompact:not(.modal) #main:not(.closed) #headline {
        padding-left: /*232px;*/ 20px;
    }

    html.AdminThemeReno.headSticky:not(.modal) #main:not(.closed) #headline {
        padding-left: /*232px;*/ 20px;
    }
}

[tpr]

21 minutes ago, SamC said:

maybe to do with this CSS

Sure, and it was fixed in the latest version a few days ago, have you tried it?