bug? Block: Text -> image error 'title' vs. 'alt-text' (redactor error?)

Permalink
Hi

can someone replicate this:
C5 version 5.7.4.2, when I add a TEXT-BLOCK to a page and insert an image in the textblock. The editor asks for a TITLE of the image. I enter something - but the generated HTML code does not contain this text as TITLE but as ALT-TEXT instead.

When I insert an IMAGE-BLOCK I can add a title and alt-text. The generated html is correct then.

I need this "html"-feature to display text on mouse-over on image.

Olaf

ong
View Replies: View Best Answer
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi ong,

It isn't a bug, it is a typo. It should refer to "Alt Text", "Alt Attribute", or something similar.

This a typo by the makers of Redactor, not concrete5.

The alt attribute is more important for SEO and accessibility, so I don't see a lot of energy being used to add title into Redactor.

The title attribute could be added into redactor.js. It can be more easily added using a plugin.

How badly do you need it?
ong replied on at Permalink Reply
ong
Hi Karl,

it's not the first time I am creating a page for this company. I was asked how a "mouse-over-image-text" can be accomplished in C5 (5.7). "It worked in 5.6" ....
As the title can contain additional informationI suggest that the title can be added there as well (together with the alt-text) - as this is possible "by default" for the image-block.

How badly I need this? As I am unaware of other simple (so simple that the customer can to it himself) methods - quite badly ... just to answer your question.

I understand, that you do not have hands on the redactor but as described above: for the image-block it works and it's quite nasty to add a text-block, then an image-block and then continue with a text-block if you could do the same just by adding an image to the text-block.

Olaf
MrKDilkington replied on at Permalink Reply
MrKDilkington
I can make a Redactor plugin for adding a title attribute to an image.

It will work this way
- mouse drag select the image (so it is highlighted)
- click the plugin button in the toolbar
- add the title in the popup
ong replied on at Permalink Reply
ong
Hi Karl,

that would probably work.

Still leaves me the question why the basic HTML tag (title) of the image can not be set using the default editor when inserting an image into a text-block-area - but is offered in the window, when inserting a image-block area.

Olaf
MrKDilkington replied on at Permalink Best Answer Reply 1 Attachment
MrKDilkington
Here is the plugin for adding a title attribute to an image.
ong replied on at Permalink Reply
ong
Hi Karl,

thank you very much. I had to search where to configure the redactor editor, but once I found this it works in design mode, but not on the visitor-page (I created another screencast: mp4, 900kb). I can set the value in different ways (which one would be correct?) - but it does not show up. I am switching to a Chrome private window to demonstrate the visitor view in the end.

Screencast:http://dl.olaf-noehring.de/?t=a6cbc140e87a86dfd5233f2dd54772a5...

Olaf
MrKDilkington replied on at Permalink Reply
MrKDilkington
You need to drag select the image. This highlights the image.

Try doing it without clicking Edit first.
ong replied on at Permalink Reply
ong
Hi Karl,

I am really sorry to say - for me (at this time) it does not work.
I have uploaded another screencast demonstrating. Browser here: Chrome.
Method 1: Sec 11 to 14: marking from post to pre-image html tag by dragging mouse. I give that area a title (test), switch to HTML view, but nothing is there.

Method 2: Sec. 35, I am marking the image only (dragging), I am adding title "test 2", switching back to HTML - still nothing there.

Screencast (560 kb, mp4):http://dl.olaf-noehring.de/?t=dcb13d63a1ca6680b69184cf17d84e7e...

Am I doing something wrong?

Olaf
MrKDilkington replied on at Permalink Reply
MrKDilkington
I can select the image and click select the image to apply the title.

It makes me think there is a problem on your end.

Out of curiosity, switch to the Elemental theme and see if it works. There must be something interfering.
ong replied on at Permalink Reply
ong
Hi

well, no - this time - switching to Elemtal theme did not work. I also tried Chrome and Firefox for editing. Same effect: Your popup window opens, but when I enter something this something does not show up in the html.

I will send you a PM with credentials - maybe you find the time and curiosity to check it out.

Thanks already

Olaf
MrKDilkington replied on at Permalink Reply
MrKDilkington
I believe I found the problem, it is the responsive images feature. It isn't a problem with your concrete5 install.

When you save, the image is getting checked to see if it needs to be placed in a responsive <picture> element or a regular <img> element. With either choice, the image is being replaced and the replacement doesn't keep the previous attributes.

If you go into the code view and type in an attribute like class, ID, title, etc., the attribute will not be saved when the responsive image replaces it.

This is a bug with responsive images. I am going to make a GitHub issue for it.
ong replied on at Permalink Reply
ong
Hi Karl,

thanks for checking and for letting me know the bad news. Hopefully it will be fixed.

Olaf
MrKDilkington replied on at Permalink Reply
MrKDilkington
Here is the GitHub issue.
https://github.com/concrete5/concrete5/issues/2576...

As a warning, I don't imagine this issue is going to be a super high priority. There are other more pressing issues that will be put ahead of it, so it might take some time.

Personally I am hoping for a fix because the attribute stripping breaks my Redactor plugin for adding classes and ID's on images.
ong replied on at Permalink Reply
ong
Hi Karl,

thanks for submitting the bug. I see it the same way - there are much more pressing things to do first.

Olaf