Wednesday, August 02, 2006

Posting Photos to Typepad

I'd gotten used to (mostly) the way things posted on Blogger, but then I had to move to TypePad. When I try to splash of line-up of photos, everything lays down on top of each other. I'd had a similar problem several months ago; somebody gave me a tag that I needed to add onto the end. However, I couldn't find the answer in the archives (and didn't write it down).

Are there any tutorials out there on how to layout photos? I'm not uploading directly to TypePad, I'm trying to link everything from my Flickr page.

I spent several hours today trying to get a single posting laid out, and still wasn't able to finish. Any advice is GREATLY appreciated.

Here is the post in question.

This Post was written by s'kat from s'kat and the food.


s'kat said...

I should add that when I was working at home last night, it was on Firefox. Today I'm at work and viewing it through IE, and its looking better.

maki said...

I believe the culprit is the "float: right" in the style= declaration for each img element. The automatic CSS styles insertion is the somewhat annoying thing about flickr and their 'blog this' feature. Instead of using 'blog this', when I insert flickr images in my blogs (the food one is Typepad) I go to the image page, All Sizes, select the size I want, then copy-paste the "1. . Copy and paste this HTML into your webpage:" code.

maki said...

Oh, and to fix the images you already have there, just take out the whole style="....." part for each img.

paul said...

I'm not sure how you want them to layout, but you're getting into the deep end when floating images.

Perhaps the tag you're looking for is <br clear="all"> (or in some cases instead of all, it's left or right).

This 'floaturial' will teach you the basics of floating:

s'kat said...

Well, no wonder I am feeling so floaty today. Thanks for the input, it definitely rings a bell... I'll go over the floatorial at lunch, and see if I can fix it through flickr this eve.

*crosses fingers*

s'kat said...

Okay, I'm a little unclear from the floatorial... is there anything that would break it down for someone who just doesn't 'get' css stuff? I'm still uncertain as to where I need to instert the 'float' at.

Aren't these blog services supposed to make this sort of thing easy, lol?

maki said...

To limit it to what flickr's float: declarations are doing, if it says float: left, the image will be to the left of the container column, and the text will flow to the right of that. If it's float: right then the image will be on the right and the text flows to the left of it.

The problem occurs if you don't have enough text to flow all around the images and the images start to try to float against each other - which is what you are experiencing. (On this post on my site, you'll see small images with float: left specified being used. They have enough text around them to pin them in place as it were.)

So- the solution is to either make sure you have enough text to flow all around the images, or -

If you just want your images to be displayed in a simple column, left-aligned, one by one (simplest solution) then just delete the whole float: right; or float: left; part in the style declaration, or indeed the whole style decoration.

s'kat said...

That sounds almost sensical. Thank you, Maki!

Portrait photographer Essex said...

thanks for shearing nice blog.

London weddings said...

Nice post . keep up the good work