Hi guys.
I'm rather surprised by the lack of support for alternative (alt) tags in the image processing in Umbraco.
I'd love to use the Image Cropper tool as it works so nicely, but I need to make sure Alt tags are mandatory (these will be a legislative requirement in the UK for some websites in a few months!).
Does anyone have any advice on extending the Image Cropper to include mandatory Alt tags?
Yes it would indeed be nice if it was added by default - Luckily it's possible to extend the "Image" type like document types so you can add an "Alt text" field on the image type so it's available.
Paul Seal made a video about how to do it - Be aware that he is demoing this on a v7 install though - Backoffice wise it's the same concept but codewise there might be some minor changes or it might just work out of the box - I have not tried Paul's approach myself yet 🙂
Thanks so much for your reply. I'm aware of this ability (have watched Paul's video and already implemented this on the data type so it works fine on 8 and is straightforward to do), however, this does not affect the Image Picker or the Image Cropper tool? The Image Picker has an 'optional' field, and Image Cropper nothing at all :(
It looks like I'm going to end up in the guts of the controllers... where I'm not sure I'm entirely comfortable!
If anyone has tackled this I'd be very glad of some direction.
HOWEVER, the umbraco.controller.js code doesn't even look similar to what I have in v7.9.2, and I'm not particularly comfortable with AngularJS. So I've drawn a blank.
Part of the problem seems to be there are so many ways and places to add an image (either with the image picker in a document type, or inside the richtext content editor.
I'm really surprised Umbraco has missed this. Parhaps it's a package in the making for some sharp AngularJS guru?!
Hey George,
Completely agree with you! What I've ended up with in the end is checking on the front-end as to whether an image has an Alt tag and just not rendering it if it doesn't!
When it comes to the Media Picker in TinyMCE I've got round that (with Paul Seal's help!) by using a Macro with a Media picker in it, that way you can again check for the presence of an Alt tag before you render out the image :)
Really hope this helps. After a rather desperate few weeks of seeing how poor it is in Umbraco (8) I now have a site which will not allow images without Alt tags!
Hi Rowena, thanks for your idea with this.
I've taken it further. I've written an Html helper to render images. So you hand it the image Id and it chooses what to do with it.
If the image is missing it renders nothing and logs an error
If the image exists, but has no alt text it doesn't render it on the live site, but on the backoffice (cms) site it renders a red banner explaining the image won't be displayed, and a link to edit the alt text. On the live (www) site, it doesn't render the image.
This option allows you to do all sorts of 'image things' - for example you can email the page owner with 'missing alt text', drop massive images, log errors/alerts to the error logging, etc.
Let me know if you want a copy of my Html helper!
Extend Image Cropper to include Alt tag
Hi guys. I'm rather surprised by the lack of support for alternative (alt) tags in the image processing in Umbraco.
I'd love to use the Image Cropper tool as it works so nicely, but I need to make sure Alt tags are mandatory (these will be a legislative requirement in the UK for some websites in a few months!).
Does anyone have any advice on extending the Image Cropper to include mandatory Alt tags?
Thank you!! :)
Hi Rowena
Yes it would indeed be nice if it was added by default - Luckily it's possible to extend the "Image" type like document types so you can add an "Alt text" field on the image type so it's available.
Paul Seal made a video about how to do it - Be aware that he is demoing this on a v7 install though - Backoffice wise it's the same concept but codewise there might be some minor changes or it might just work out of the box - I have not tried Paul's approach myself yet 🙂
The video is found here https://www.youtube.com/watch?v=viszdlx0YXI
/Jan
Hi Jan,
Thanks so much for your reply. I'm aware of this ability (have watched Paul's video and already implemented this on the data type so it works fine on 8 and is straightforward to do), however, this does not affect the Image Picker or the Image Cropper tool? The Image Picker has an 'optional' field, and Image Cropper nothing at all :(
It looks like I'm going to end up in the guts of the controllers... where I'm not sure I'm entirely comfortable!
If anyone has tackled this I'd be very glad of some direction.
Thanks,
Rowena
I'm working on exactly the same issue (for the same reason - upcoming legislation in the UK!)
I found this very helpful: https://our.umbraco.com/forum/umbraco-7/using-umbraco-7/61430-Making-alt-text-mandatory-in-Umbraco-7-Media-Picker (scroll down to post by the ABC Dev Team)
HOWEVER, the umbraco.controller.js code doesn't even look similar to what I have in v7.9.2, and I'm not particularly comfortable with AngularJS. So I've drawn a blank.
Part of the problem seems to be there are so many ways and places to add an image (either with the image picker in a document type, or inside the richtext content editor.
I'm really surprised Umbraco has missed this. Parhaps it's a package in the making for some sharp AngularJS guru?!
Hey George, Completely agree with you! What I've ended up with in the end is checking on the front-end as to whether an image has an Alt tag and just not rendering it if it doesn't! When it comes to the Media Picker in TinyMCE I've got round that (with Paul Seal's help!) by using a Macro with a Media picker in it, that way you can again check for the presence of an Alt tag before you render out the image :) Really hope this helps. After a rather desperate few weeks of seeing how poor it is in Umbraco (8) I now have a site which will not allow images without Alt tags!
Hi Rowena, thanks for your idea with this. I've taken it further. I've written an Html helper to render images. So you hand it the image Id and it chooses what to do with it. If the image is missing it renders nothing and logs an error If the image exists, but has no alt text it doesn't render it on the live site, but on the backoffice (cms) site it renders a red banner explaining the image won't be displayed, and a link to edit the alt text. On the live (www) site, it doesn't render the image. This option allows you to do all sorts of 'image things' - for example you can email the page owner with 'missing alt text', drop massive images, log errors/alerts to the error logging, etc. Let me know if you want a copy of my Html helper!
is working on a reply...