Uploading and showing an image on DW
This started out in a comment, but I think enough people may be struggling with DW's relatively new image upload feature that it's worth making it into a post. And it's a good excuse for posting.
(aside: The key to all of this is knowing enough about HTML to be able to identify the correct URL and create the img tag to refer to it -- it probably all looks like black magic to somebody who hasn't been doing this stuff for the last few years. Don't expect to get it all on one reading.)
You might also want to know some terminology. Those things enclosed in angle brackets are commonly called "tags". The things with a name, an equals sign, and something in quotes are called "attributes". And single and double quotes are identical in effect, but have to match: you can't start with a single and end with a double.
So -- I uploaded an image; down at the bottom there's a box labeled Image Code. Copy, paste:
<a href='https://mdlbear.dreamwidth.org/file/352.jpg'> <img src='https://mdlbear.dreamwidth.org/file/100x100/352.jpg' title='Cat and mouse' alt='Grey tabby cat looking intently at a Logitech mouse.' /></a>
(That's what it looked like, except that I wrapped the lines to make it clearer.)
Looking at that line of HTML I can see that there's an img tag that, from the
/100x100/
in its URL, looks like a thumbnail. It's wrapped
in a link -- an <a...> tag. The href attribute is
https://mdlbear.dreamwidth.org/file/352.jpg
, which ought to be the
full-sized image, so I'll get a preview just to make sure...
Then I clicked the "Preview" button, and it looked like this:
Yup. So https://mdlbear.dreamwidth.org/file/352.jpg
-- the
href
attribute of the img
tag, is the URL of the
actual image. (At that point I could just as well have copied it out of
the browser's location bar, since I was already looking at the full-sized
image. I didn't think of that, and just copied it out of the comment I
was writing.)
I can put that into an img
tag that looks like
<:img src="https://mdlbear.dreamwidth.org/file/352.jpg" width="512">.
Chrome says (in the page title) that the image is 1024x719, so I'll try
cutting it down by adding a width="512"
attribute.
Here we go:
-- purrfect.
One final aside: if you're following along and using a word processor that automagically turns quotation marks into matching
curly quotes, you need to turn that feature off when you're editing HTML, because they won't be recognized as quotes. If you're creating your post in your browser and you want to enter HTML directly, you need to click the "HTML" tab (over on the upper right). The "Rich Text" setting will create HTML automatically and you'll need to click one of its little icons to create an actual image tag.
Happy hacking!