Images next to heds

[beep]

Noticed this on https://opennews-source-staging.herokuapp.com/articles/tags/design/:

This is less about the missing image, and more about the alt text: if someone’s having that headline read to them, they’ll hear something like

link image A Big Article About Wee Things heading level three A Big Article About Wee Things

Any chance of blanking that out, to just be alt=""? That’d give us something like

link heading level three A Big Article About Wee Things

(I’ll mark this as an enhancement for now, but feel free to tweak the priority!)

[kissane]

Ahhhh I see—that's because cover images don't have custom alt text fields, so it's auto-populating. Yes, @ryanpitts, if you get to this I would def vote for suppressing those, and thanks for noticing, @beep!

[beep]

@kissane Hey, sure!

[ryanpitts]

@beep AH! Should I blank out the alt on all image tags?

[kissane]

We try to fill them out when we add images inline in articles, but I think that's probably not the ones you mean, @ryanpitts?

[ryanpitts]

Yeah, I think this might only be happening where the image file is missing, so the article record thinks there should be a photo but there's no file, so the browser renders the alt text instead.

{% if article.image %}
    <img src="{{ MEDIA_URL }}{{ thumbnail(article.image, "300x200", crop="center") }}" alt="{{ article.title }}" />
{% endif %}

Here's what's in the template. If the article really has no image assigned, that piece should never get rendered. So that's why I'm thinking it's related to missing photos.

[ryanpitts]

I put this hack in place on old Source after the jpocalypse:

onerror="this.style.display='none'"

It just hides the image tag if the image is missing. I could put this in place again. Or we can clear the imagefield on articles where this is happening.

[kissane]

Ahhh. I'm auditing all of those and clearing the fields of whatever we can't replace, so please leave it unhacked and I'll get em fixed.

[ryanpitts]

👍

[beep]

Yeah, I think this might only be happening where the image file is missing, so the article record thinks there should be a photo but there's no file, so the browser renders the alt text instead.

Just to clarify: it’s less that the alt text is visible, and more that there’s any alt text on those images at all.

I’d say that a decent rule of thumb (o god o no) would be to default to alt="" in general, unless an image appears in an article. (At which point, @kissane et al. would’ve added one?)

[kissane]

I’d say that a decent rule of thumb (o god o no) would be to default to alt="" in general, unless an image appears in an article. (At which point, @kissane et al. would’ve added one?)

Yep. So let's wipe the alt tags on the cover images, where I can't set them myself, please.

[ryanpitts]

Yep, on the articles that don't have images, the img tag doesn't even get rendered into the template.

The super weird issue here is, a year or two ago we had a devops catastrophe and lost a number of image files. But the CMS still has the references for the images with the database record for each article. So currently the template believes there to be an image with the story, and knows what src to point to, only there's no actual file on the other end. :(

[ryanpitts]

let's wipe the alt tags on the cover images, where I can't set them myself, please.

👍