Skip Navigation

Aligning Photos in Blog

Travel Forums System Talk Aligning Photos in Blog

Page

Last Post

1. Posted by kostlin (Respected Member 66 posts) 4y

I was wondering if there would be the possibility to add tables within a blog, something like HTML tables so it makes it easier to align photos in the body of the blog.

I upload a lot of photos for each post and they always align to the left but if we could place them in tables within the blog one could align them to the right, centre, left or text wrapping around the pic, of the page making it a bit more friendly to the eyes,??

2. Posted by Sam I Am (Admin 5579 posts) 4y

I don't think the table option would work, as you'd end up with gaps in the cells/columns to the left/right of the photos, meaning that text still wouldn't wrap around the photos properly unless you do a whole lot of tinkering with each insert. That said, there is an 'easier' way to do this and given that the question has appeared from time to time, maybe it's time we implement it. We're all flat out on a redevelopment of the entire site that is set to debut in the not too far future though, and I'm not sure it can be squeezed in, in time for that :(

There is already a (hacky) way to do this actually, as described in this thread by Sander. While it works fine if you want all large photos to do one thing, or all small photos to do another, sadly it's not flexible enough to let you treat one individual photo different from another.

3. Posted by kostlin (Respected Member 66 posts) 4y

Thank for the reply Sam.
I’m sure you're all really busy with the upgrade (when’s that planned for?)

I agree the wrapping of text around the photos isn’t the greatest or easiest. However I still think that a table option will make the thumbnail pictures inserted into a blog look a lot neater with equal spacing and alignment for even landscape and portrait pics. I see your point that this wouldn’t help for wrapping text around the pic.

I had another thought, not related to photos, that it would be nice, if at all possible, to make a multiple selection of text within a blog when editing so one can bold or underline all selected works much like word works with the Ctrl button?

4. Posted by Sam I Am (Admin 5579 posts) 4y

Quoting kostlin

I’m sure you're all really busy with the upgrade (when’s that planned for?)

There should be a beta version for testing by Travellerspoint members this coming week I'm pretty sure... fingers crossed no big bugs are hit in the meantime.

Quoting kostlin

I agree the wrapping of text around the photos isn’t the greatest or easiest. However I still think that a table option will make the thumbnail pictures inserted into a blog look a lot neater with equal spacing and alignment for even landscape and portrait pics. I see your point that this wouldn’t help for wrapping text around the pic.

Ah, is what you want to do stop text from wrapping around the thumb size photos? That's actually already possible. For example it would be possible to say float all the thumbnail images to the right (or left or center), and make sure that text never wraps around them, but instead there's a decent margin above and underneath the photos. The 'only' problem with this approach is that it's either all thumbnail images across the whole blog, or none (well, you could actually do it per post too if you wanted). Let me know if there's a post where you'd like the images showing up differently and I can whip up the code for you as an example.

Quoting kostlin

I had another thought, not related to photos, that it would be nice, if at all possible, to make a multiple selection of text within a blog when editing so one can bold or underline all selected works much like word works with the Ctrl button?

Funnily enough, that's actually already done in the redesign! Ctrl+B makes bold, Ctrl+U does underline etc. There's also dedicated buttons for headings and some other small improvements.

5. Posted by kostlin (Respected Member 66 posts) 4y

That's great news about the upgrade.

I'm sorry, maybe I'm not explaining myself correctly.
I'm not having issues with text wrapping around my photos as I just add line breaks.
On all my posts I use thumbnails mainly and I just felt that if one could add the thumbnails within cells in a table one can align each photo individually so they sat nicely, spaced on the left and right of a blog page as well as nicely space with regards to the overall layout and look of a blog with all photos?

For example having a table (100% of page) with two colomns which are center aligned might make the pictures look neater on the blog page if, like me, you display many images together. Even if you have a selection of portrait and landscape pics.

6. Posted by Sam I Am (Admin 5579 posts) 4y

Quoting kostlin

I'm sorry, maybe I'm not explaining myself correctly.
I'm not having issues with text wrapping around my photos as I just add line breaks.
On all my posts I use thumbnails mainly and I just felt that if one could add the thumbnails within cells in a table one can align each photo individually so they sat nicely, spaced on the left and right of a blog page as well as nicely space with regards to the overall layout and look of a blog with all photos?

For example having a table (100% of page) with two colomns which are center aligned might make the pictures look neater on the blog page if, like me, you display many images together. Even if you have a selection of portrait and landscape pics.

I think I know what you mean, but have taken a before and after screenshot to see if I'm correct. I used one of your recent posts with thumbnail images, made a little change to the back end code, and then added one line of CSS to get this effect. If this is what you're after, as soon as the redevelopment is live you'll be able to enstate this by adding the following line to your template:

a.enlarge_image {width:50%;margin:8px 0 20px;float:left;text-align:center;}

Here's the before screenshot, as seen on this blog post
Here's the after screenshot.

Does that look about right? You should be able to get the text down quite easily if you don't want it wrapping as well.

7. Posted by kostlin (Respected Member 66 posts) 4y

Ahh that does look rather nice I think.

Would that same code work if one didnt want the text to the right of the last image but still keep the cpacing that you ahve around the images? Or would this code only work if there were even number of images that filled up a page? Otherwise I may use it liek taht and see what it looks like.
thanks

8. Posted by Sam I Am (Admin 5579 posts) 4y

Quoting kostlin

Ahh that does look rather nice I think.

Would that same code work if one didnt want the text to the right of the last image but still keep the cpacing that you ahve around the images? Or would this code only work if there were even number of images that filled up a page? Otherwise I may use it liek taht and see what it looks like.
thanks

If you added this extra line in your CSS:

p+p {clear:both;}

it would end up looking like this, which is I think what you are after.

9. Posted by kostlin (Respected Member 66 posts) 4y

Thanks thats great stuff.
It looks good to I think. I will give this a try

Post 10 was removed by a moderator