Skip Navigation

Aligning Photos in Blog

Travel Forums System Talk Aligning Photos in Blog

Page

Last Post

11. Posted by kostlin (Respected Member 66 posts) 6y

Hi

Ive seen the result of the code you gave me (in the new site)
I was just wondering now if its possible to have the regular size images also centred?

If you look at this post, you can see the different images and why it would be nice to have them centred

http://stephandmartin.travellerspoint.com/70/

Is this possible/

12. Posted by Sam I Am (Admin 5588 posts) 6y

Quoting kostlin

Hi

Ive seen the result of the code you gave me (in the new site)
I was just wondering now if its possible to have the regular size images also centred?

If you look at this post, you can see the different images and why it would be nice to have them centred

http://stephandmartin.travellerspoint.com/70/

Is this possible/

This shouldn't be a problem :)

If you find the row in your template design that reads: .entry img.photo {padding-bottom:5px;}, then go ahead and change that to

.entry img.photo {padding-bottom:5px;display:block;margin:0 auto;}

Assuming you also want to do the same for the videos :) , add this in there as well:

.entry div.video {text-align:center;}

The only ones that won't follow this setup will be the small thumbnails that are 'by themself' on a line, for example the shot of your room on the River Kwai (think I might have stayed at this very same place when I was there by the way!).

13. Posted by kostlin (Respected Member 66 posts) 6y

Thanks very much. This works great.

14. Posted by kostlin (Respected Member 66 posts) 6y

Hi,

I'm getting there with my photos, but Ive now noticed that some of the thumbnail images are not next to each other. i always put two thumbnails together with a space and then the next 2 on the next line.

If you look at this print screen you will see what I mean.
Ive seen this on a few of my blogs now when this was never like this.
Ive also check that there is a correct space or line return after an image.

Do you have any ideas?

15. Posted by Peter (Admin 5807 posts) 6y

Quoting kostlin

Hi,

I'm getting there with my photos, but Ive now noticed that some of the thumbnail images are not next to each other. i always put two thumbnails together with a space and then the next 2 on the next line.

If you look at this print screen you will see what I mean.
Ive seen this on a few of my blogs now when this was never like this.
Ive also check that there is a correct space or line return after an image.

Do you have any ideas?

This is due to some of your images having a slightly different height to other ones. You can fix it by setting the height of the a.enlarge_image to always be able to contain the photos. Since the max height we show thumbnails at is 150px, this rule will cover that and include a little extra padding:

a.enlarge_image {width:50%;height:160px;margin:5px 0;float:left;text-align:center;}
16. Posted by kostlin (Respected Member 66 posts) 6y

Quoting Peter

Quoting kostlin

Hi,

I'm getting there with my photos, but Ive now noticed that some of the thumbnail images are not next to each other. i always put two thumbnails together with a space and then the next 2 on the next line.

If you look at this print screen you will see what I mean.
Ive seen this on a few of my blogs now when this was never like this.
Ive also check that there is a correct space or line return after an image.

Do you have any ideas?

This is due to some of your images having a slightly different height to other ones. You can fix it by setting the height of the a.enlarge_image to always be able to contain the photos. Since the max height we show thumbnails at is 150px, this rule will cover that and include a little extra padding:

a.enlarge_image {width:50%;height:160px;margin:5px 0;float:left;text-align:center;}

Thanks Peter, this works great for landscape images but when I have portrait images then they overlap text or the next images.
If I increase the height in the code you suggested then it sorts this out but obviously if I don't have portrait images then the spacing is huge :)

17. Posted by Peter (Admin 5807 posts) 6y

Quoting kostlin

Thanks Peter, this works great for landscape images but when I have portrait images then they overlap text or the next images.
If I increase the height in the code you suggested then it sorts this out but obviously if I don't have portrait images then the spacing is huge :)

Hmm yeah, hadn't thought of that

Not really a perfect way out of it that I can see. Increasing the height of that link is one option, or you could decrease the maximum height of the image also like this:

.entry img.photo {padding-bottom:0;display:inline;margin:0 auto;max-height:160px}

The max-height bit of code here will force those vertical images down to a smaller size. It won't work in Internet Explorer 6, but that might be ok to live with.

You can also obviously make the max-height just a bit bigger and also increase the height of a.enlarge_image to match. Just balancing how much padding is acceptable.

We deal with a very similar situation in our photo search actually.

18. Posted by kostlin (Respected Member 66 posts) 6y

Quoting Peter

Hmm yeah, hadn't thought of that

Not really a perfect way out of it that I can see. Increasing the height of that link is one option, or you could decrease the maximum height of the image also like this:

.entry img.photo {padding-bottom:0;display:inline;margin:0 auto;max-height:160px}

The max-height bit of code here will force those vertical images down to a smaller size. It won't work in Internet Explorer 6, but that might be ok to live with.

You can also obviously make the max-height just a bit bigger and also increase the height of a.enlarge_image to match. Just balancing how much padding is acceptable.

We deal with a very similar situation in our photo search actually.

hmm, that a good option, however it also reduce the size the regular sized images.
I'm going to keep playing around to see if I can figure it out.

I didnt have this problem with the old site though.

19. Posted by Peter (Admin 5807 posts) 6y

Quoting kostlin

hmm, that a good option, however it also reduce the size the regular sized images.
I'm going to keep playing around to see if I can figure it out.

Alright, found a solution for that.. change your rules to this:

.entry img.photo {margin:5px auto;display:block;}

a.enlarge_image {width:50%;height:160px;margin:5px 0;float:left;text-align:center;}

a.enlarge_image img.photo {padding-bottom:0;margin:0 auto;max-height:160px}

The important addition here is the rule "a.enlarge_image img.photo" which will now only apply to the thumbnail images. Hopefully that strikes the right balance for you!

Also, one small change to your mapping code that will get rid of that funny scroll bar that has appeared (at least in Firefox it has)

.map,.tp_map {width:100%;height:300px;display:block;margin-bottom:20px;overflow:none;background:#eee;}

I didnt have this problem with the old site though.

All these changes and quirks are actually only related to the custom code that we've given you in this thread. The site-wide redesign didn't have that much of an effect on the blog styling, aside from the maps.

20. Posted by kostlin (Respected Member 66 posts) 6y

Peter, You’re a star
Thank you very much, this is so much better.

I only have one question, that isn’t very urgent. some of the image are not aligned at the top as in this screen shot (taken from this post) but yet others are, even if they are bigger in size.
Any ideas?

I’ve also changed the map code, this has worked for a lot of my pages but not for this one.

Thank again Peter, I really appreciate your help