Log in

No account? Create an account

Previous Entry | Next Entry

ugh html

I, who thought myself a moderately competent user of very basic html, am completely bewildered by AO3's handling of images. I managed to embed my images for Goodnight Bears into the text just fine just fine in the LJ/DW posts using a handy dandy guide to tables, but the same code used on AO3 resulted in no images at all.

"All right," said I, gritting my teeth, "I will use AO3's rich text interface." (Thbbt.) So I did, and managed to not only unbreak the images (though I still don't understand why they were broken in the first place) but also get them aligned where I wanted them. Everything in the rich text window looked great! W00t!

Then I previewed, and now I have huge swathes of white space next to my images, rather than the wrap-around-images look the rich text window promised me.


(Suggestions welcome. I am about done for now; I have to go to work soon. Yay for posting to teensybang, anyway.)

Crossposted from Dreamwidth. Comment here or there. (comment count unavailable DW replies)


( 13 comments — Leave a comment )
May. 2nd, 2013 03:47 pm (UTC)
Have you tried the 'import' function at A03? (I'm html-stupid so I can't be of any legitimate help.) But on a sidenote, this looks too adorable and I can't wait to read it!
May. 2nd, 2013 03:47 pm (UTC)
Oh, that's a good idea. I might try that.
May. 2nd, 2013 03:52 pm (UTC)
Update: nope, still not. Now I'm thinking maybe AO3 just isn't capable of doing what I want.
May. 2nd, 2013 05:04 pm (UTC)
If I understood correctly what you want, go to the HTML view and make sure the images are coded like this (remove asterisks):

<*img src="url goes here" align="left" padding="1"*> Story goes here blah blah blah...

Make sure that you don't press enter after the image tag (if there are p-tags, make sure that both img and the text are inside the same one). You can change the alignment to 'right' or increase the padding (it's in pixels) to make it look how you want.

May. 3rd, 2013 01:28 am (UTC)
Aha! I followed your directions and also took the "table" parts out, and voila. Thank you!
May. 2nd, 2013 06:09 pm (UTC)
You shouldn't need to use a table to get your images looking how you want, and ruuger's way should work... I would generally do it using the style attribute in your image tag and some basic CSS (like:

<img src="URL" style="float:left">
<img src="URL" style="float:right">


The problem with that is AO3 won't let you use the 'style' attribute because they want you to use a style sheet that readers can turn on and off (so if you want to style your whole fic in big jazzy letters, people who want to read it plain can do). I sort of feel like it's letting a massive minority use case (who formats their fic to be that illegible???) make things awkward for everyone, but it's very straightforward to set up if want to do it. I don't know how their FAQs are for it, but if using the align attribute doesn't work, let me know and I can walk you through it if you want me to.

(Honestly, as much as I am fond, I suppose, of AO3, I could easily complain all day about some of the nooks and crannies of their posting interface. Sure it's better than FFN or whatever, but its auto-formatting is dodgy.)
May. 3rd, 2013 01:30 am (UTC)
Thank you! I took the table stuff out, and it did indeed work. (I put them in in the first place because the first place I looked about combining images with text warned that it would look messy without. Well, it looks fine.)

I'm not fond of how AO3's posting interface will accept your line breaks and such just fine the first time, but then insists on displaying the "p" tags for you whenever you go into edit. If AO3 already knows the paragraph breaks are there, why do I need to see them?

And now I have tried using the rich test interface (which I'd never even noticed before), and the html result after that is bunches worse. :P
May. 2nd, 2013 06:29 pm (UTC)
Other, cleverer, people than me have told you clever things. My only contribution is: Don't trust the preview. Try posting and see what it looks like.
May. 3rd, 2013 01:31 am (UTC)
I will keep that in mind. I think I have got it sorted out now, though. \o/
May. 3rd, 2013 12:18 am (UTC)
You simply can't let the text wrap around images on AO3. (Edit: Eh, or maybe I'm wrong and the tipps above work! I only know that the html tags they allow are pretty limited.)

Edited at 2013-05-03 12:20 am (UTC)
May. 3rd, 2013 01:32 am (UTC)
It turns out you can wrap text around images, I was just (unintentionally) trying to be too fancy with it. :P
May. 3rd, 2013 01:35 am (UTC)
Yayyyy success! :D
May. 3rd, 2013 01:37 am (UTC)
( 13 comments — Leave a comment )

Latest Month

February 2018


Powered by LiveJournal.com