Uploading and showing an image on DW

[mdlbear]

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!

Another fine post from The Computer Curmudgeon.

Comments

[madfilkentist]

Nice summary. I like using percentage widths (e.g., style="width:50%") so the image won't overflow a small window, but that's probably getting too advanced for what you're trying to explain.

Thanks!

[mdlbear]

Good point on using percentage widths. You can do a lot of interesting things with CSS that I'm just beginning to explore.

Re: Thanks!

[madfilkentist]

The cat pictures on my posts tagged "mrfrs" use that trick, in case you're curious.

[dreamshark]

So that's how you do with with raw HTML code. Fine. If I wanted to write in raw HTML I'd be doing that. I loathe writing in HTML. I actually know what the format for an image is, but have to look it up every single time I am forced to use it, and I'm just not willing to do that when I'm using a supposedly simple WYSIWYG editor.

I was trying to use the "image" tool that DW provides for people creating a post. I pasted in the URL for my uploaded image in the field labeled "URL". I see that the tool helpfully wrapped it in the HTML format. But the image does not appear in my post. What exactly is this tool for, then?

[mdlbear]

1. What probably happened was that you pasted in the entire chunk of html -- that's not the url of the image image, it's the HTML that you need to _embed_ the image. If, instead, you select just the image URL, you should be able to past _that_ into the image tool and get the image to show up. I don't use the rich text (it isn't really wysiwyg) editor myself, and haven't tried it.
There may be a tool that lets you embed (insert) the whole thing; as I said, I don't use that editor. Look for whatever tool you use for embedding YouTube videos -- that should work.
2. The fact that the image gallery doesn't seem to have links that take you to the images is probably a bug. If there was such a link, you could click it and copy the image location rather than having to select part of the embedding text. There _is_ such a link on the page you get to just after uploading.
3. My purpose in writing this post was two-fold: to tell my readers -- not just you -- about a feature they might not know much about, but also to show the thought processes I went through to _find_ the information. I'm sorry I didn't make that clear.

[thnidu]

Thanks! I do use HTML directly, and I knew about this feature but not really how to use it. Saving this post!

[kaberett]

Possibly worth noting: Dreamwidth does actually provide a lot of this functionality out-of-the-box, it's just that the box is hidden in a locked filing cabinet marked beware of the leopard, etc. Or, more specifically, it's not on the Upload Images page (or even, what the hell, on the Manage Images page); it's hidden away in View all your images, linked to from both of those other pages, but not (currently) from the site menu.

One of the things I am currently failing to do for Dreamwidth is working out where else it's sensible to link to that page from, given that it's *obviously useful* and a recent relevant bugfix didn't deal with it.

[mdlbear]

I found the view images page pretty easily; what I'd like to see on that page is links from the thumbnails to the actual images, just like the thumbnail embedding code. That would make getting the image URL into the clipboard simpler: right-click the thumbnail and copy link address. (Currently you have to select the URL in one of the HTML snippets and hit ctrl-C.) It would also make it easy -- one click -- to get to the full-sized image.

I should probably put some work into this.