How do you post pictures side by side?| Fun Questions

July 19, 2014 Fun Questions 22

Fun Questions LogoJoin me every Saturday as I ask a Fun Question that’s been on my mind. I’ll give you my take, but I really hope you’ll jump in with your answers too, since I’m really curious to know what my fellow readers and bloggers think! So today’s question is…

How do you post pictures side by side?

So this week’s question is actually a response to a request from someone asking about how I did my Blogs I Stalk page. And I totally understood the question because it was something I really struggled getting the way I wanted for a while. The method I use there is the same method I use to just put pictures side-by-side on any blog post (like when I picture the books I bought each week on my Sunday Post), so whether you just want a couple pictures within a post or an entire page dedicated to pictures, this should work for you.

I should mention before I get too far into this that I am by no means an expert. This solution took a lot of playing around and trial and error and I can’t guarantee that it will work with you. I can guarantee that if it doesn’t work I probably won’t be able to tell you why. I’ll have to leave that to the real coding to the experts, like NoseGraze (who may cringe at the method I’m using honestly). I’ve seen other methods – some people use galleries, other people use tables. I’ve tried those methods and they did not work for me. Why? Wish I knew!

So what I do involves editing your CSS and then using what you create there in your actual blog posts, using html. I’m a WordPress user, so I’m afraid I can’t tell you how to do this on Blogger or if it’s even possible. Sorry 🙁

Make sure you have a child theme first!

The number one rule when you’re doing any kind of editing to your CSS is to use a child theme. If, like me, you’re lucky enough to have one of the themes made my NoseGraze you probably have a built in area for additions to your CSS that don’t require an actual child theme. If you don’t, they are really easy to do (I did one for a bit before I realized my theme had one built in). This is really important because if you make any errors you won’t do any damage to your theme itself.

I don’t believe in re-inventing the wheel so rather than tell you how to make a child-theme here’s a great post from NoseGraze on How to Make a WordPress ChildTheme. Even easier (but perhaps more limited, I’m not sure) there’s actually a plugin I used to make a child theme called One Click Child Theme and I had no trouble with it when I used it.

Editing your CSS

So now that you have a child theme all setup it’s time to edit it!

If you setup your child theme manually or using the plugin you’ll need to go to “Appearance –>Editor” as pictured below to enter your new CSS.

If, like me, you have a template with a child theme built-in you’ll need to go to that. I have Tweak Me theme my Creative Designs (NoseGraze), so I go to “Appearance –> Theme Options –> Custom CSS” to edit mine, like pictured below.

Once you’re in the right spot there’s a few different div classes you need to create to get this working correctly.

Side-by-Side

The first one I call side-by-side, since that’s what I want the pictures to do – appear side-by-side. You can copy this text to enter into your CSS Editor.

.side-by-side { 
display:inline-block;
margin-right: 5px;
}

Container

This one – as I understand it – is to make it so that you can change the style for just the images (or any media/text really) contained within this div style. So you’re making a container basically. I call it “container_sbs” because I want to distinguish it from other containers already built into the CSS (this was a trial and error discovery when suddenly everything on my blog changed!). So I used “_sbs” to stand for side-by-side. Again, you can just copy this text and enter it into your CSS Editor.

.container_sbs {
text-align: center;
}

Text Line

This last bit I’m not entirely sure is still necessary since I added the container – originally I didn’t have that. But I figure it’s not hurting anything. See initially I just had the first bit of code, but then the pictures bled into my text really weird. This solved that problem by creating a line that the pictures can’t cross. Copy code into your CSS 🙂

.text_line
{
clear:both;
}

Using your new Div Classes

So what you just did was create a bunch of div classes that you can use in your posts. You need to be on the html side for entering posts (called “text”) and not the “visual” side.

Every time you want to enter pictures by side you’ll want to follow this formula:

A couple things you want to notice:
1. You start it of with the container because your creating a container and all the images (or whatever you’re inserting) needs to be within that container. So you’ll also need to close it at the end.

2. You can enter as many pictures as you want – what I have above will do three images. If you want more just add another line of div class side-by-side within the container. Other than that all your image information will be the same as normally adding pictures to your posts.

3. You finish it off with the text line class – remember this is creating an invisible line that the pictures can’t fall below. I’ve used this same code to create groups of images, divided by the line.

And that’s it! Not too hard, right? Let me know if you have any questions or modifications you think I should know about 🙂

Follow on Bloglovin

Berls

Photo of Berls
About Berls
Berls has been a book lover her whole life. She reads pretty much every genre and is currently working hard at making her childhood dream of becoming an author come true. She loves sharing her thoughts about books, blogging, and just random fun stuff. She's a challenge and read-a-thon junkie, so it's no wonder that she loves co-hosting the COYER reading challenge. Leave a comment, Berls is always happy to chat!

22 Responses to “How do you post pictures side by side?| Fun Questions”

    • Berls
      Twitter:

      To make the squares look a little neater, I add a caption. That adds a cushion around the blog button – but to actually have squares you have to manipulate the sizes of the buttons themselves, since they come in all different sizes that often are perfect squares. As far as side by side – they will appear side by side as long as you follow that formula with the div class container_sbs, div class side-by-side and follow them with the div class text_line. You can do as few as two pictures and as many as you want, just add another line of . Once you run out of space on one line it will automatically go to the next line.

      So to get a caption and the square, I have a short code that I think came with UBB or maybe my blogtemplate… you can try it and see if it works on yours. If not, I can look and see how you’d setup the short code. Here’s what you’d put where it says “picture info” (again I’m using my blog button):

      the area within the [] is the caption short code, so the aligncenter is for the text of the caption and the width is for the width of the caption box. I typically make that match the width of the picture. Notice that I added after the .jpg link: width=”150″ height=”150″ Now that image will be 150×150, regardless of the original size. Hope that helps!
      Berls recently posted…Write On July ReviewAThon 2014My Profile

  1. Angie F.

    Hm, that’s interesting. I totally didn’t know CSS could do that. I just put my images all in a row and they line up just fine, four per row for book covers in my STS posts. But then I don’t have that nice, even space between them…Hmm…
    Angie F. recently posted…Stacking the Shelves #139My Profile

  2. Stormi
    Twitter:

    Um, that still looks all greek to me. 🙂 I was like what the heck is a ‘childs theme’..then I seen you have a thing for nose graze as I have a design by here and I was like oooh the custum CSS spot..got it..but then it still looks greek..lol. I think I am hopeless when it comes to any of this stuff.
    Stormi recently posted…Audiobook review: Sterling | #COYERMy Profile

  3. Michelle
    Twitter:

    I think we did a good job figuring this all out. I would bet if someone had an issue you would totally be able to help them 🙂 You have gotten so good a figuring all this stuff out and fixing issues. Look what you did for me when I got locked out…Sure it was only like a minute but it was a minute longer than I could have done 🙂

    Great post! So glad you decided to share this!
    Michelle recently posted…My Life, My Rules by Luna Charles ~ Author’s SpotlightMy Profile

Leave a Reply

CommentLuv badge

This blog uses premium CommentLuv which allows you to put your keywords with your name if you have had 0 approved comments. Use your real name and then @ your keywords (maximum of 9)