Jump to content

Image captions in RTE (body text field)


SamC
 Share

Recommended Posts

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:

1.png.547f5bcd1226de7202e894d1d33a5bd3.png

...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:

2.png.4f56a3169fbd817a6cf505cfcf1de959.png

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

3.png.a5e5b2d9dce666afc3373351b93e0dde.png

...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

4.thumb.png.ba0d19bd1c0f54cfb872fc72bc7ad0d1.png

 

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!

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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:

1.thumb.png.ba55f4bcb4bba3197beaee20da3af0df.png

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:

4.thumb.png.92a38e6239f5d499e7b2558beb856bd6.png

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

5.thumb.png.b74493076a73b7d18af5b063ed3b4cb5.png

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

2.thumb.png.a45d52487cd69ca282453f6fdc13dec0.png

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

3.thumb.png.0aa238f3a4211729682a30c45bc3db35.png

...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.

Link to comment
Share on other sites

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.

 

 

 

images.png

  • Like 1
Link to comment
Share on other sites

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:-[

  • Like 1
Link to comment
Share on other sites

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)

 

image-upload.png

image-choose.png

  • Like 1
Link to comment
Share on other sites

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:

upload-another-image.gif.1c8d9c076cd76338fd1896cc1e22f54e.gif

  • Like 1
Link to comment
Share on other sites

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:

rte-images.thumb.gif.1e8bba249c178a0e4549eeb2349a91cc.gif

  • 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):

 

  • Like 2
Link to comment
Share on other sites

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...)

1.thumb.png.92689a07386c642e1decdda0c5c95916.png

...and the RTE button insert image modal:

2.thumb.png.ddcee56c6902ef5aad7c1d6b86253097.png

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

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...
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").

  • Like 1
Link to comment
Share on other sites

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):

2.thumb.png.df1eefcdb5fc01ad87155200a4ea4198.png

...so I turned it off:

1.thumb.png.0d774b6cc0d975c41bc1c96283a5525c.png

...but the default usually looks like this:

normal.thumb.png.b1a7a125a5d963751c8212517c1ddb25.png

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):

3.thumb.png.7eac13c6bfd9c377a5a446fb49ae0992.png

Not got into CSS theming the admin yet.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;
    }
}

1.thumb.png.0e34469750b9a4415af94ff01f1417b5.png

2.thumb.png.eb1194489438e0b6553502ea804afb13.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...