Jump to content

Clarification on how description and ALT attributes are used

Lance O.

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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": [
        "textformatters": [
        "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": [
        "showIf": "",
        "columnWidth": 100,
        "required": "",
        "requiredIf": "",
        "toggles": "",
        "contentsInlineCss": "",
        "stylesSet": "",
        "customOptions": "",
        "plugin_sourcedialog": ""
Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

  • 1 year later...


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.

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

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. 

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

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By quickjeff
      Hi Everyone, 
      As many of you know, iPhone photos save in .heic unless the user changes the settings in their phone. 
      We have built a web app on top of processwire in which a user can save images from their phone. 
      The issue we are having is that there seems to be an error when uploading and saving. 
      The .heic files won't save and processwire throws an error. The environment is LAMP (Bitnami and all libraries have been installed to support this.) 
      Checking to see if someone has also encountered this here and how they solved it.
    • By Robin S
      Select Images
      An inputfield that allows the visual selection and sorting of images, intended for use with the FieldtypeDynamicOptions module. Together these modules can be used to create a kind of "image reference" field.

      Integration with FieldtypeDynamicOptions
      InputfieldSelectImages was developed to be used together with FieldtypeDynamicOptions (v0.1.3 or newer):
      Create a Dynamic Options field. Choose "Select Images" as the "Inputfield type". Select Images appears in the "Multiple item selection" category but you can set "Maximum number of items" to 1 if you want to use Select Images for single image selections. Define selectable options for the field via a FieldtypeDynamicOptions::getSelectableOptions hook. See some examples below. FieldtypeDynamicOptions is recommended but is not a strict requirement for installing InputfieldSelectImages in case you want to use an alternative way to store the field data.
      Selection of Pageimages
      In this example the field allows selection of Pageimages that are in the "images" field of the home page.
      The field will store URLs to the Pageimages so it works as a kind of "image reference" field. You can use the "Format as Pagefile/Pageimage object(s)" option for the Dynamic Options field to have the formatted value of the field be automatically converted from the stored Pageimage URLs to Pageimage objects.
      $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); // For a field named "select_images" if($field->name === 'select_images') { $options = []; // Get Pageimages within the "images" field on the home page foreach($event->wire()->pages(1)->images as $image) { // Add an option for each Pageimage // When the key is a Pageimage URL the inputfield will automatically create a thumbnail // In this example the label includes the basename and the filesize /** @var Pageimage $image */ $options[$image->url] = "{$image->basename}<br>{$image->filesizeStr}"; } $event->return = $options; } }); Selection of image files not associated with a Page
      When not working with Pageimages you must add a "data-thumb" attribute for each selectable option which contains a URL to a thumbnail/image.
      In this example the field allows selection of image files in a "/pics/" folder which is in the site root.
      $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); // For a field named "select_images" if($field->name === 'select_images') { $options = []; // Get files that are in the /pics/ folder $root = $event->wire()->config->paths->root; $path = $root . 'pics/'; $files = $event->wire()->files->find($path); // Add an option for each file foreach($files as $file) { $basename = str_replace($path, '', $file); $url = str_replace($root, '/', $file); // The value must be an array with the following structure... $options[$url] = [ // The label for the image 'label' => $basename, 'attributes' => [ // An image URL in the "data-thumb" attribute 'data-thumb' => $url, ], ]; } $event->return = $options; } }); The field values don't have to be image URLs
      The values stored by the Dynamic Options field don't have to be image URLs. For example, you could use the images to represent different layout options for a page, or to represent widgets that will be inserted on the page.
      Also, you can use external URLs for the thumbnails. In the example below the options "calm" and "crazy" are represented by thumbnails from placecage.com.
      $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); // For a field named "calm_or_crazy" if($field->name === 'calm_or_crazy') { $options = []; // Add options that are illustrated with thumbnails from placecage.com $options['calm'] = [ // The label for the option 'label' => 'Nicolas Cage is a calm man', 'attributes' => [ // An image URL in the "data-thumb" attribute 'data-thumb' => 'https://www.placecage.com/260/260', ] ]; $options['crazy'] = [ // The label for the option 'label' => 'Nicolas Cage is a crazy man', 'attributes' => [ // An image URL in the "data-thumb" attribute 'data-thumb' => 'https://www.placecage.com/c/260/260', ] ]; $event->return = $options; } }); Field configuration
      You can define labels for the button, notices, etc, that are used within the inputfield if the defaults don't suit.

    • By Robin S
      Process Images
      A basic, proof-of-concept Textformatter module for ProcessWire. When the Textformatter is applied to a rich text field it uses Simple HTML DOM to find <img> tags in the field value and passes each img node through a hookable TextformatterProcessImages::processImg() method.
      This is a very simple module that doesn't have any configurable settings and doesn't do anything to the field value unless you hook the TextformatterProcessImages::processImg() method.
      Hook example
      When added to /site/ready.php the hook below will replace any Pageimages in a rich text field with a 250px square variation and wrap the <img> tag in a link to the original full-size image.
      For help with Simple HTML DOM refer to its documentation.
      $wire->addHookAfter('TextformatterProcessImages::processImg', function(HookEvent $event) { // The Simple HTML DOM node for the <img> tag /** @var \simple_html_dom_node $img */ $img = $event->arguments(0); // The Pageimage in the <img> src, if any (will be null for external images) /** @var Pageimage $pageimage */ $pageimage = $event->arguments(1); // The Page object in case you need it /** @var Page $page */ $page = $event->arguments(2); // The Field object in case you need it /** @var Field $field */ $field = $event->arguments(3); // Only for images that have a src corresponding to a PW Pageimage if($pageimage) { // Set the src to a 250x250 variation $img->src = $pageimage->size(250,250)->url; // Wrap the img in a lightbox link to the original $img->outertext = "<a class='lightboxclass' href='{$pageimage->url}'>{$img->outertext}</a>"; } });  
      GitHub: https://github.com/Toutouwai/TextformatterProcessImages
      Modules directory: https://processwire.com/modules/textformatter-process-images/
    • By spercy16
      These issues should be fairly easy for any intermediate to advanced ProcessWire developer to answer. I'm new to PHP and relatively new to ProcessWire and just need a bit of help. What I'm trying to do is bring in a couple of cards from my Projects page to display on my home page. I finally got the code right to bring in the cards but right now they're using my original images instead of my resized "variations". So firstly, I would like to know how to reference the variations of my images instead of using the original. Secondly, I need to grab only four of the cards from the Project page and not import in all ten. It should be just two small changes to my code to do these things (I would imagine). Here is the code I currently have for that section:
      <?php // https://processwire.com/api/arrays/ // check if the array of images has items if (count($pages->get("/projects/")->images)) : // get array of images from the field $images = $pages->get("/projects/")->images; $count = 0; // iterate over each one foreach ($images as $image) : $count++; $sectionText = $pages->get("/projects/")->get("paragraph_$count"); $img = $image; $buttonCode = $pages->get("/projects/")->get("url_$count"); ?> <span id="card<?php echo $count?>" class="card"> <img class="cardThumb" src="<?php echo $img->url; ?>" alt="<?php echo $image->description; ?> Thumbnail" /> <div class="cardBody"> <div class="cardText"> <h2><?php echo $img->description; ?></h2> <?php echo $sectionText; ?> </div> <div class="primaryBtn"> <a href="https://www.paypal.com/donate?hosted_button_id= <?php echo $buttonCode; ?> &source=url"> <button> <i class="fas fa-donate"></i> Donate </button> </a> </div> </div> </span> <?php endforeach; endif; ?> Thanks in advance for any help!
    • By skeltern
      WebP image support is great and works fine. But once created I've issues to get rid of all API generated WebP variations.
      The backend image field variations "Delete" works and I can remove all variations JPEG plus WebP. Image list is clean but all WebP API variations are still stored in file system (for instance files/12345/84.900x675.webp etc). I can only use ImageSizer with temp 'force' option to request fresh WebP variations or have to delete WebP files from folders. No other way so far. Tested with 2 sites and latest master PW 3.0.165.
      Is there somewhere a "magic button" or config/setup thing to solve my sticky WebP issue?
  • Create New...