2018-09-03

mdlbear: the positively imaginary half of a cubic mandelbrot set (Default)

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:

Grey tabby cat looking intently at a Logitech mouse.

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!

Another fine post from The Computer Curmudgeon.

Most Popular Tags

Style Credit

Page generated 2019-02-16 03:27 pm
Powered by Dreamwidth Studios