yourlibrarian: MMMC Icon Yellow (OTH-MMMC Icon Yellow - yourlibrarian)
yourlibrarian ([personal profile] yourlibrarian) wrote in [community profile] marchmetamatterschallenge2020-03-05 10:55 am

March Meta Matters Challenge, Check-in 2

Hello everyone! It's check-in time to see how we're all getting along with our meta importing.

Comment below with any of the following:

1) How do you motivate yourself when you're facing something daunting or overwhelming?

2) How many works have you identified for future transfers, or have you now moved to AO3?

3) Are you having any problems moving your meta?

Remember, this account accepts anonymous comments, so if you don't have a Dreamwidth account we still want to hear from you and have you take part.

Also, if you've got tips you've developed during this process, do share them with the group! And if you can help someone out with a problem they're having, share a solution.
alexseanchai: Katsuki Yuuri wearing a blue jacket and his glasses and holding a poodle, in front of the asexual pride flag with a rainbow heart inset. (Default)

[personal profile] alexseanchai 2020-03-06 02:53 am (UTC)(link)
<img src="https://IMAGE URL.png" style="max-width:100;height:auto;" alt="IMAGE DESCRIPTION HERE" />

It can be .jpg or .gif or whatever the actual extension is, but you do need the extension, and you do need the alt text—let me illustrate:

Screenshot of this comment in progress, showing the code of the next few lines of the comment, in order to, first, illustrate the fail mode of using an image URL without file extension or alt text, second, illustrate the importance of alt text to sighted users when the image itself fails to load, and third, show sighted users what the alt text on the third says without requiring them to view page source.



The alt text is to describe the image to users who can't display it, either because something is wrong with the code (as here) or because they're browsing with a screenreader or with image loading disabled.

Ladybug and Chat Noir of Miraculous Ladybug; she is resting her elbow on his shoulder and they both look smug. Caption: 'alexseanchai of summer'.

The style part, which I'm only bothering with here on the screenshot of this comment in progress, is a trick to make sure large images don't try to be bigger than the mobile device some folks may be viewing on. [archiveofourown.org profile] La_Temperanza also has a CSS way to do that better and an HTML and a CSS way to wrap text around images for use on AO3; both CSS tricks involve making AO3 work skins.

Oh, and Discord really really hates being image hosting for anyone who isn't viewing the image through Discord or direct at the URL; an increasingly common fail mode I'm noticing is the image source is cdn.discordapp.com and the image itself works fine if you go direct to its URL. Tumblr works great, though; so does Imgur.
Edited 2020-03-06 02:58 (UTC)
thenewbuzwuzz: converse on tree above ground (Default)

[personal profile] thenewbuzwuzz 2020-03-06 05:47 am (UTC)(link)
Thank you very much! <3 I've been having the Discord problem you describe, except with Dreamwidth and Nickpic. I'll try Imgur! :)
thenewbuzwuzz: converse on tree above ground (Default)

[personal profile] thenewbuzwuzz 2020-03-06 05:54 am (UTC)(link)
Yes, that must be it! I hope.
alexseanchai: Katsuki Yuuri wearing a blue jacket and his glasses and holding a poodle, in front of the asexual pride flag with a rainbow heart inset. (Default)

[personal profile] alexseanchai 2020-03-09 08:33 pm (UTC)(link)
It just occurred to me I forgot something.

What I put in as the image source URL in the failed images above is a legit URL. You can view the image just fine by clicking the link. It's just not the URL to the image itself.

Now, if I want the image to be the clickable thing for a hyperlink, like the words 'a legit URL' are above, I could do <a href="LINK"><img src="IMAGE URL" /></a> and it would work fine—for people who can view the image. Not so helpful for screenreader users or when the image doesn't load.

Here's such an image-as-hyperlink where the image fails as above and there isn't alt text:



And one where there is:

Since this img tag has alt text, one can tell this is a working hyperlink even though the image itself isn't working.

Also, if for whatever reason one wants an image to be present (as a decorative element or whatever) for people who can view images, but not to trouble people who don't, doing like <img src="IMAGE URL" alt="" /> means the screenreader will simply skip it. This is preferable to <img src="IMAGE URL" /> because the screenreader will read the file name, which is most likely unhelpful, and (as you see with my example image) sometimes total gibberish.