Clarification on how description and ALT attributes are used

[Lance O.]

I have a template that includes an image field that supports multiple images. The images uploaded to this field include a description field.

If one of these images is embedded into a textarea field (i.e. Body), should the image description will be inserted into the image's alt attribute when embedding the image?

I always assumed that it would, but there is a separate option to add an alt attribute when inserting the image.

Is the purpose of the description field purely for use with the API and unnecessary for images that are intended to be embedded within a textarea field?

I guess I need clarification as to how this works. Either something changed, or I never understood the differences between the image description and the alt attribute as it is used in ProcessWire.

I'm currently using ProcessWire 3.0.15.

[tpr]

There should be a check box in ckeditor field's input tab to insert alt tag if I'm not mistaken, at least in the 3.x branch.

[Lance O.]

There is a Update image alt attributes checkbox in the Markup/HTML (Content Type) section of the Details tab for the ckeditor field. But checking this option doesn't seem to do anything when embedding new images with descriptions.

[tpr]

The "Replace blank alt attributes with image description" seems to fix missing alt attributes here (PW 3.09). I uploaded an image to the "images" field, set a description to it, and then placed it to the "body" field using the CKEditor's toolbar. If I uncheck it the alt goes empty.

[szabesz]

Here is the related old blogpost:

https://processwire.com/blog/posts/quality-assurance-for-images-in-rich-text-fields/

[Lance O.]

@tpr I'm using PW 3.0.15 and that option is labeled as:

Update image alt attributes: Replace blank alt attributes with image description

With this option checked on the Body CKEditor field, I uploaded an image, entered a description, and inserted it into the Body field. The alt attribute remains empty. Perhaps something broke between the two versions we are using?

@szabesz Looks like that page references an earlier version of PW. Hopefully this will all be updated in a future version of PW.

[tpr]

Yes, that's the same setting, see the attached image.

Interesting that it doesn't work for you, here it works fine on 3.017 (just tried).

[Lance O.]

I upgraded from PW 3.0.15 to PW 3.0.17 and the alt attribute still didn't work. Frustrated, I then downgraded to PW 2.7.2 and it still doesn't work. :-(

At some point I had the ImageExtra fieldtype module installed, but it has since been removed. Is there the possibility that it broke something? I've already had problems with uploading images that required some manipulation of the database structure. https://processwire.com/talk/topic/13078-error-when-uploading-image-field-caption-doesnt-have-a-default-value/

Here is the field export for the Body field, if that helps:

{    "body": {
        "id": 98,
        "type": "FieldtypeTextarea",
        "flags": 0,
        "name": "body",
        "label": "Body",
        "qtyMin": 1,
        "qtyMax": 10,
        "trashable": 1,
        "size": 0,
        "maxlength": 2048,
        "inputfieldConfigNames": "rows,toolbar,inlineMode,useACF,usePurifier,toggles,formatTags,extraAllowedContent,contentsCss,contentsInlineCss,stylesSet,extraPlugins,plugin_sourcedialog,removePlugins",
        "schemaClass": "FieldtypeTextarea",
        "inputfieldClass": "InputfieldCKEditor",
        "contentType": 2,
        "pageLinkAbstractor": 2,
        "rows": 9,
        "toolbar": "Format, Styles, -, Bold, Italic, -, RemoveFormat\nNumberedList, BulletedList, -, Blockquote\nPWLink, Unlink, Anchor\nPWImage, Table, HorizontalRule, SpecialChar\nJustifyLeft, JustifyCenter, JustifyRight, JustifyBlock\nPasteText, PasteFromWord\nScayt, -, Sourcedialog",
        "inlineMode": 0,
        "useACF": 1,
        "usePurifier": 1,
        "formatTags": "p;h1;h2;h3;h4;h5;h6;pre;address",
        "removePlugins": "image,magicline",
        "sortable": 1,
        "collapsed": 2,
        "extraPlugins": [
            "pwimage",
            "pwlink",
            "sourcedialog"
        ],
        "textformatters": [
            "TextformatterVideoEmbed",
            "TextformatterHannaCode"
        ],
        "contentsCss": "/site/modules/InputfieldCKEditor/contents.css",
        "extraAllowedContent": "div(*)\n*[id](*)\n*[class](*)",
        "icon": "code",
        "notes": "Enter a full YouTube or Vimeo URL by itself in any paragraph and it will automatically convert it to an embedded video.\n\nYour link must match one of the formats below:\nhttp://www.youtube.com/watch?v=**video_id**\nhttps://vimeo.com/**video_id**\n\nExamples:\nhttp://www.youtube.com/watch?v=Wl4XiYadV_k\nhttps://vimeo.com/152189763",
        "htmlOptions": [
            4
        ],
        "showIf": "",
        "columnWidth": 100,
        "required": "",
        "requiredIf": "",
        "toggles": "",
        "contentsInlineCss": "",
        "stylesSet": "",
        "customOptions": "",
        "plugin_sourcedialog": ""
    }
}

[psy]

Just upgraded a site to 3.0.18 and having the same issue, ie image description not showing as image tag alt attribute even though 'body' ckeditor field settings as per tpr's post above.

[Christophe]

Hi,

I enabled the four options on some websites, some with version 2.x, others with version 3.x (updated/upgraded several times), most if not all with the French language as the default one (and keeping the English one active in the admin), some with the multilingual modules and fields installed and/or activated, some without, some with  fr/ added to the French urls, some without, etc.

I'm not sure I ever made  the Update image alt attributes work. Or perhaps once the first time I found it existed.

I tried/tested a little the Link abstraction, I don't remember what the result was most of the time. I'll have to do it again.
But a few hours ago, with a website updated recently to the last legacy Master (but the result was the same before), that is not multilingual (in the templates or in the backend) with the French language as default (and English kept as secondary), when I activated it and then saved a page, an internal link (via a selected page) in the CKEditor field had fr/ added to the url, which logically pointed to a 404 page.
I had to deactivate the option to be able to have the normal url back after recreating the link (in order to be sure) and saving the page.
I don't know where the fr/ comes from. Perhaps, the website was multilingual before and I removed all the multilingual things but there is a reference to /fr somewhere in the database. I don't remember for this particular website. I don't see/can't find any mention of fr in the current website's backend (and in site/templates/ neither). 

Concerning the last two options, I didn't have the opportunity/take the time to test them.

So, it's a bit of a mystery.
I don't know what is missing for the Update image alt attributes to work.
And why the Link abstraction doesn't work correctly, at least in the mentioned website.
Fortunately I didn't use the Apply HTML options now... (I'm not sure how many internal links were created via the existing CKEditor fields).

And I tried not only in the body field, but also in other CKEditor fields. 

I would/will have to test again on a new/fresh installation.

[elabx]

Hi everyone! Does anyone know if this has been fixed in recent versions? Still broken for me on 3.0.136

My bad here, I kept on reviewing the source code in CKEditor and this is done at runtime.