mdlbear: the positively imaginary half of a cubic mandelbrot set (Default)
[personal profile] 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:

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.

Date: 2018-09-04 09:37 am (UTC)
madfilkentist: Photo of Carl (Default)
From: [personal profile] 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.

Re: Thanks!

Date: 2018-09-04 07:13 pm (UTC)
madfilkentist: Photo of Carl (Default)
From: [personal profile] madfilkentist
The cat pictures on my posts tagged "mrfrs" use that trick, in case you're curious.

Date: 2018-09-04 09:30 pm (UTC)
dreamshark: (Default)
From: [personal profile] 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?

Date: 2018-09-05 09:16 pm (UTC)
thnidu: heavy red exclamation point (!)
From: [personal profile] thnidu
Thanks! I do use HTML directly, and I knew about this feature but not really how to use it. Saving this post!

Date: 2018-09-06 08:33 pm (UTC)
kaberett: A sleeping koalasheep (Avatar: the Last Airbender), with the dreamwidth logo above. (dreamkoalasheep)
From: [personal profile] 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.

Most Popular Tags

Style Credit

Page generated 2019-04-22 02:29 pm
Powered by Dreamwidth Studios