Jump to content
Lance O.

Clarification on how description and ALT attributes are used

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

post-3156-0-79753400-1462802267_thumb.pn

  • Like 1

Share this post


Link to post
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": [
            "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": ""
    }
}

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
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 EyeDentify
      Hello Dear PW Gurus.

      Hope you fair well in these Corona Crisis times.

      Anyhow, i have a problem with a Cryptic error message that shows up when i am trying to Delete images out of a Images field.
      The Error message does say a little but it does not make sense to me why i can´t delete the images because of it.

      Is it some permission issue perhaps?

      I will attach screenshots of it and what i did prior to it.
      I am from sweden so ignore the funny words here and there.

      Hope you all can send me on the right track.
      i am running PW 3.0.139 on this install.

      Step1:

      Step 2: Select the images with the trashcan symbol

       
      Step 3: Cryptic Error message

      I am scratching my head on this one, have not seen this before.

      Thankfull for all help.
      /EyeDentify
    • By Guy Incognito
      This short script loops through some images from an XML feed and pushes new ones to an image field. It all works perfectly, except for some reason the last image (only) in the loop each time doesn't receive the image description... can everyone spot why? TIA! 🙂 
      foreach ($propertyImages as $img) { $fileName = trim($img[0]); if ( !empty($fileName) ) { $imgPath = '../property_data/'.$fileName; if(file_exists($imgPath) && !in_array(strtolower($fileName),$currentImages)) { $p->property_images->add($imgPath); $p->save(); $newImg = $p->property_images->last(); $newImg->description = $img[1]; $p->save(); } } }  
    • By Robin S
      Add Image URLs
      Allows images/files to be added to Image/File fields by pasting URLs.

      Usage
      Install the Add Image URLs module.
      A "Paste URLs" button will be added to all image and file fields. Use the button to show a textarea where URLs may be pasted, one per line. Images/files are added when the page is saved.
       
      https://github.com/Toutouwai/AddImageUrls
      https://modules.processwire.com/modules/add-image-urls/
    • By gebeer
      Hello all,
      sharing my new module FieldtypeImageReference. It provides a configurable input field for choosing any type of image from selectable sources. Sources can be: 
      a predefined folder in site/templates/ and/or a  page (and optionally its children) and/or the page being edited and/or any page on the site CAUTION: this module is under development and not quite yet in a production-ready state. So please test it carefully.
      UPDATE: the new version v2.0.0 introduces a breaking change due to renaming the module. If you have an older version already installed, you need to uninstall it and install the latest master version.
      Module and full description can be found on github https://github.com/gebeer/FieldtypeImageReference
      Install from URL: https://github.com/gebeer/FieldtypeImageReference/archive/master.zip
      Read on for features and use cases.
      Features
      Images can be loaded from a folder inside site/templates/ or site/assets Images in that folder can be uploaded and deleted from within the inputfield Images can be loaded from other pages defined in the field settings Images can be organized into categories. Child pages of the main 'image source page' serve as categories mages can be loaded from any page on the site From the API side, images can be manipulated like native ProcessWire images (resizing, cropping etc.), even the images from a folder Image thumbnails are loaded into inputfield by ajax on demand Source images on other pages can be edited from within this field. Markup of SVG images can be rendered inline with `echo $image->svgcontent` Image names are fully searchable through the API $pages->find('fieldname.filename=xyz.png'); $pages->find('fieldname.filename%=xy.png'); Accidental image deletion is prevented. When you want to delete an image from one of the pages that hold your site-wide images, the module searches all pages that use that image. If any page contains a reference to the image you are trying to delete, deletion will be prevented. You will get an error message with links to help you edit those pages and remove references there before you can finally delete the image. This field type can be used with marcrura's Settings Factory module to store images on settings pages, which was not possible with other image field types When to use ?
      If you want to let editors choose an image from a set of images that is being used site-wide. Ideal for images that are being re-used across the site (e.g. icons, but not limited to that).
      Other than the native ProcessWire images field, the images here are not stored per page. Only references to images that live on other pages or inside a folder are stored. This has several advantages:
      one central place to organize images when images change, you only have to update them in one place. All references will be updated, too. (Provided the name of the image that has changed stays the same) Installation and setup instructions can be found on github.
      Here's how the input field looks like in the page editor:

      If you like to give it a try, I'm happy to hear your comments or suggestions for improvement. Install from URL: https://github.com/gebeer/FieldtypeImageReference/archive/master.zip
      Eventually this will go in the module directory, too. But it needs some more testing before I submit it. So I'd really appreciate your assistance.
      Thanks to all who contributed their feedback and suggestions which made this module what it is now.
       
    • By rushy
      Hi. I've been using Processwire for a few years now and installed it on a few different shared hosting servers without issues, but I'm now running into an issue on a Fasthosts shared server that I've not seen before. The installation goes ok and I have a working default site profile but I am unable to complete any uploads of images. It just hangs at the progress spinner during the upload. I thought it might be a priviledge issue so have temporarily set the dir / file privs. as 777 / 666 just to test that but it made no difference. I have no errors in the wire log. In server error log I have:
      set_time_limit() has been disabled for security reasons in ....htdocs/wire/core/ImageSizerEngine.php on line 1035 and i note in the assets/file dir. where the image is being stored the date on the file being created has a year of 1970 and 0 length. If I leave the page this file disappears and nothing has been stored. 
      Does anyone know how I can enable set_time_limit if this is likely to be the problem? 
      Many thanks! Paul
×
×
  • Create New...