Forums

Default Image Alt Tags for Images

Permalink
Working w/ c5.7 and liking what I'm seeing. But one thing I noticed when using Redactor to insert an image, I have to insert it from the File Manager, then click again to edit and add an alt. tag to it.

I've trained many an editor to do this in the File Manager by ensuring they add a title tag to the image there. What I need is to make Redactor to do is automatically use the Title attribute for the image as the default alt text. That is, whatever is entered for the image title in the file manager, that's what the Alt text will be. If the editor hits edit and changes it that's fine, but I want every image to have alt text no matter what.

Is this possible? What would be the best way to enable this?
Thanks in advance!
Pat.
PatrickHenry
 
MrKDilkington replied on at Permalink Best Answer Reply 1 Attachment
MrKDilkington
Hi PatrickHenry,

I think I found something you can try. It involves overriding redactor.js.

- unzip the attached ZIP file into your "application" folder
- after unzipping, there will be a new folder called "js" with redactor.js inside it
application\js\redactor.js

Here is the unminified code with added code inside "CHANGES"/"END CHANGES":
image: function() {
    // CHANGES
    var alt;
    // END CHANGES
    return {
        show: function() { this.modal.load("image", this.lang.get("image"), 700), this.modal.createCancelButton(), this.image.buttonSave = this.modal.createActionButton(this.lang.get("save")), this.opts.concrete5.filemanager ? a("a[data-action=choose-image-from-file-manager]").on("click", function(b) { b.preventDefault(), ConcreteFileManager.launchDialog(function(b) { jQuery.fn.dialog.showLoader(), ConcreteFileManager.getFileDetails(b.fID, function(b) { jQuery.fn.dialog.hideLoader();
                        var c = b.files[0];
                        // CHANGES
                        alt = b.files[0].title;
                        // END CHANGES
                        a("#redactor-image-link").val(c.urlInline) }) }) }) : a("a[data-action=choose-image-from-file-manager]").remove(), this.image.buttonSave.on("click", a.proxy(function() {
                var b = a("#redactor-image-link").val();
                if ("" !== b) {
                    // CHANGES
                    // var c = '<img id="image-marker" src="' + b + '" />';
Viewing 15 lines of 18 lines. View entire code block.

Version 8 of concrete5 will be released in a few months. It will use CKEditor, which automatically adds the image title as the alt attribute.
PatrickHenry replied on at Permalink Reply
PatrickHenry
Killer! Works like a charm. Thanks so much Mr.K. That was easy.
Just curious, as I'm new to redactor but was able to get this working on c5.6 with TinyMCE, I'm a big proponent of the humble <abbr> abbreviation HTML tag. We have tons of abbreviations and I'm adamant that my editors use it and define them in any content they post.
Unfortunately, Redactor doesn't have the <abbr> button tho.
Is there an easy way to add it in that you know of? Really all it needs is the button option, highlight the abbreviation, click the abbr button, and a dialogue pops up for the user to enter a title. TinyMCE's has several more options that aren't necessary. All I need is the ability to add <abbr> tags with a title attribute.
Any ideas on that one?
Big thanks for the default title fix. That's awesome.
I vote for including this in the core, esp. since alt tags play a key role in SEO best practices.
Pat.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@PatrickHenry

The quick fix changes I made are a hack and not the right way to do it. Changing this in the core would likely involve things like modifying the modal templates inside Redactor.

Adding an abbr tag button would involve creating a Redactor plugin.

With CKEditor replacing Redactor soon, I don't think a core change would make it in before version 8 was released.
mnakalay replied on at Permalink Reply
mnakalay
Is that official? Is CK Editor replacing Redactor in C5 for sure? Anywhere we can read about it?
MrKDilkington replied on at Permalink Reply
MrKDilkington
@mnakalay

Andrew first announced the move to CKEditor in January.
"Integrate CKEditor into Version 8 Branch #3293"
https://github.com/concrete5/concrete5/issues/3293...

ExchangeCore Joe Meyer integrated Community CKEditor into the core here:
"Feature/cke8.0.0 #3389"
https://github.com/concrete5/concrete5/pull/3389...

I believe that Redactor version 1 will remain as a fallback and there will be further abstraction of the rich text editor in the future.

When concrete5 5.7 was being developed, I believe that Redactor was really the only option for inline editing. As time went by CKEditor also added inline editing, but by that point Redactor was already being used in 5.7. Last fall, Redactor 2 was released and it took a few steps back in terms of features. This combined with CKEditor being mature and feature rich, now offering inline editing, and Joe Meyer making it work in concrete5, this led Portland Labs to make the switch.

Joe Meyer put in a great deal of time and effort to make the CKEditor package and core implementation.

CKEditor has a lot of great features
- a large community made even larger now that it is the core editor for Drupal
- actively developed by a very friendly team
- good support
- lots of plugins
- lots of documentation

concrete5 CKEditor
https://github.com/ExchangeCore/Concrete5-CKEditor...

Here is a rough draft for how to add custom editor styles:
https://www.concrete5.org/community/forums/5-7-discussion/creating-s...

An online demo of CKEditor you can try:
http://ckeditor.com/demo

I need to get an update on the version 8 development status of CKEditor. There were a few "nice to have" things that still needed to be implemented. Things like reskinning the editor to match the rest of the interface, a way to add plugins, and custom styles preview.
siton replied on at Permalink Reply
siton
Looks great! :)
mnakalay replied on at Permalink Reply
mnakalay
I had no idea! I heard about ckEditor being used in a package as an alternative but not that it was going to take over. That's great news. Thanks for the info