Positioning of Photos in Blog?

Travel Forums System Talk Positioning of Photos in Blog?

1. Posted by TLWH (Travel Guru 516 posts) 10y Star this if you like it!

Hi Folks,

At last I am in a position to do some major updating to the blog.

One thing I have noticed on TP is that most/all peoples photos imbedded into the blog page are left justified.

Is there a way to position the photos in a different manner, e.g. text wrapped?



2. Posted by Sam I Am (Admin 5588 posts) 10y Star this if you like it!

To have them text wrapped, you'd need to edit the template, but it's pretty easy. There's a really long post in the blog where I go into quite some detail on how to get started. Once you've got the template open and want to edit it, basically you'd be changing the following line:

.entrycontent img.photo{margin:5px;border:3px solid #eee;}

Add float:left; and it will make the text wrap around the photos (photo on the left, text on the right). Add float:right and it will make text wrap around the photos on the left (photo on the right).

The photos are quite wide though, so the wrap might not be exactly what you're expecting. You could add something like width:80%; to the line as well and that should look better (slightly hard to say without seeing a post with photos in your blog).

So, let's say you go with left aligned photos that are a bit narrower and wrap the text around it, you'd end up with the following line to replace the one above that's in your template now:

.entrycontent img.photo{margin:5px;border:3px solid #eee;float:left;width:80%;}

By the way, something appears to be a little off with your current design - did you change anything? You might want to reset it by changing it to a template again and then going in to edit again.

Let me know if you have any questions :)

3. Posted by Sander (Moderator 5293 posts) 10y Star this if you like it!

Yes, there is, but it certainly could be easier, and the only way I can think of to do this would be mostly an "all or nothing" thing - that is, all your photos would have text wrapping around them (which means you have to be careful to write enough text after the very last photo to make the layout not break), or none would. The one exception to this I can think of is that it's "easily" possible to only have "thumbnail" images display this way, or conversely only "large" images.

To do this, go to the template section of your blog, click on edit your template, and add a CSS rule for making the images float (which would cause the text to wrap around it).
Make all photos have text wrap around them:
.entry img.photo { float: left; }
Make only thumbnail photos have text wrap around them:
.entry a img.photo { float: left; }
Make only large photos have text wrap around them (note that this will not work in Internet Explorer 6):
.entry p > img.photo { float: left; }

4. Posted by TLWH (Travel Guru 516 posts) 10y Star this if you like it!

Thanks Sander & Sam I Am,

Thats a lot to take in! I will have a read over the weekend and start next week with some tests. I want to keep the photos relatively small for a start. So I'll give it a bash once I finishing processing the 5k plus photo's I am working on now (don't worry I will only upload a few!)

Will get back with any queries once I try them out

Thanks also for the tip on the something odd on the site... I think you are referring to the top section, I just noticed. hmm, I must have happened on the road, I'll do what you say and reload the template. I think I might have been trying to get rid of the top bar, would prefer it at the bottom ;-)


[ Edit: Edited on Apr 18, 2008, at 8:03 AM by outcast ]