In Part One we learned the basics, how to center images etc., how to italicize, bold or underline text in the sidebar and how to make an image clickable. Then in Part Two I taught you how to make your very own clickable AND copy/pastable blog button. We even added some extra sweet functionality to it like making it open the link it points to in a new tab/window and to display a message when you mouse over your blog button.
This time, I'm going to teach you a very useful thing, how to horizontally align images in a blog post. If anyone of you have tried to do this manually by dragging your uploaded pictures around inside a blog post you know it usually doesn't work. In fact, doing that usually screws up all the other formatting that you added to your blog post! After reading this article you'll be able to easily make pretty, lined up pictures, which not only look cool but saves serious real estate on your blog post!
So, here we go!
We have to start by uploading two pictures to Blogger. Do this by clicking the picture in the link bar above. You can upload your pic anyway you want, just get them on the page! When the first one is up, center it if it's not centered (that function is also in the link bar above or can also be accessed by clicking on your uploaded picture.) Now, before you upload your second picture, click on this first one and add a caption. You don't even have to put anything in the caption, you can just leave it as it is, it just adds the code that allows us to horizontally align our pictures. Here are our two pictures...
|Albert Einstein||Author Unknown|
(Oh, and here's an IA plug, we're doing a Postcard Swap over on Inspiration Avenue, the button is grab-able from my sidebar. Go on over and read all about it, all are welcome & it's gonna be a whole lot of Mail Swapping FUN!!)
Now back to our regularly scheduled program...
Let me explain generally what we're doing with the pictures so you have a framework of where we're going. What we're doing is using simple code to set up invisible rows and columns kind of like a spread sheet, then putting each picture into it's own "square" called a cell. This orders them into a horizontal space so they look lined up! Doing this is called setting up a table. The whole set of cells makes up our table. The code is relatively simple and there's two ways we can go about using this code to it's best advantage. To decide what way to go, answer this question...
- Do you want to add a caption like a title or comment to each picture that you're lining up?
- Do you just want to line up a bunch of pictures, one after the other, keeping it absolutely simple?
Let me explain each piece of this code, then when I show you the more complicated one, you'll understand what you're seeing. First, the "center" does just that, centers our pictures. Remember from the previous Blogging 101 series', we need them in pairs with < > around them, we first tell blogger we want to center all that comes next by saying center (with < > around it), then at the end of what we want centered we put it's pair, telling blogger to STOP centering with /center (with < > around it), right? OK. (Please also remember this applies to many pieces of code, it mostly comes in pairs, start doing something, then stop doing something!)
The next part, table, tells blogger we're gonna make a table, notice it's pair is at the END of the sequence too with /table. Right after that is cellspacing, this can be set at whatever you want, from 0 to like 100 (although that would put some HUGE space between pictures), that's what cellspacing does, it puts space between each cell of the table we're creating. For instance, with the horizontal pictures above, I used a cellspacing of 10, sometimes I want a wider space so I'll use 20. Here, I want to mention that there's a similar code bit called cellpadding, it works similarly, you can use either or both. I tell you about it now because the more complicated code that blogger creates for us, (that I'll tell you about below soon), uses both padding and spacing. Cellpadding puts padding within each cell, between the picture and the cell's border. Cellspacing puts spacing around EACH cell. (Don't worry if you're confused, just put a number from 1-20 in either cellpadding or cellspacing until you get the distance you want between the pictures.)
This is a visual example of cellpadding!Each cell has padding around it.
|This is a visual example of cellspacing!|
A space is added between cells .
Here's the code box again.
The next part is tbody, which tells blogger that next we're gonna be filling the body of the table with cells that we're going to create. Now into the nitty gritty of the code. We start with tr, which encompasses all the table cells, then the first td, which, in pairs, goes around each cell using < >. Notice that table, tbody, tr and td all have pairs of /table, /tbody, /tr and /td. These, if you remember from a previous Blogging 101 are called opening and closing tags. It's the opening and closing tag td that repeats with each cell. So, right after the opening tag td, we put the info for the first picture we want to see in our horizontal line. After putting in the picture info we use the closing /td tag, which closes that cell. We then put an opening td tag again, opening a new cell, saying we're adding another picture in this row, then add the picture info, then the closing /td tag cell. We continue until we can't fit more pictures across our blog post. (I'll talk about blog post width in a minute, let's just finish here...) Then, when we're finished adding pictures in a horizontal row we add all the requisite closing tags that go with our opening tags, so we're adding /tr, /tbody, /table and /center, all with the < > around each one.
So, let me show you what the code will look like with the two above pictures added where they should be added.
And this is what that code above will look like! (oh, and if you noticed, I tried using just the width code, and it WORKS, it changes the picture to the correct height ratio to go with that width.)
Now I want to teach you how to use the code that Blogger makes, no having to type in your own code, just moving code around, manipulating it's placement. Since you understand what you're looking at, this should make putting pictures in a row much easier and quicker than what you have to do above, making your own table.
So, imagine you open your new blank blog post and want to add a line of pictures horizontally across the screen. You want to do this easily, without having to build your own table. What you do is this...
- Center your cursor using the button in the header bar, it looks like a bunch of stripes, I've highlighted it in pink!
- Upload the first image you want in your row of pictures. It doesn't matter if it's from a URL or from your computer or some other way.
- Click the uploaded picture so it's highlighted. Choose "add caption" and type what you want in the caption. (later, if you don't want to use the captions, you don't have to use them. It's just that adding the caption adds the extra "table code". What blogger does is when you add a caption to a picture it makes a table with only one cell, putting one picture into that cell, and "attaching" a caption, which allows blogger to make sure the caption stays with the picture)
- Now, click just below that caption you've added and if you cursor isn't centered then start at #1, if it is centered then start at #2 of this list.
- Continue until you have enough photos in a vertical line that will fill the width of your post (about a total of 550 pixels). This is usually three or four pictures unless their seriously small.
- Now, click the HTML button on the very left of the header bar, next to the arrows. You're gonna now be able to see the code for the pictures you just added in your post. This is what you'll see...
Don't panic when you look at the extra code in this box, you'll get to mostly ignore it because it's unimportant. Let me show you what this code above would look like...
|Sharing is Caring|
The pink parts are the three coded pictures each in their own cell & table and the blue parts are the captions, also each in their own cell (a special kind of cell for captions). All the rest of the (black) code is making individual tables with each picture/caption combo. Notice that it's totally similar to the code I showed you that puts the pictures in a line, but each picture is in a table of one! We want to use this fact, use the first picture's table but add two more cells to it, for a total of three cells for our three pictures. Remember, each cell is opened by td and closed by /td with < > around each tag. If you notice, each pink section has it's requisite opening and closing td tag. Each caption, in blue, has it's own specially classed td cell that "goes" with the picture cell. Don't worry, separating the picture cells and the caption cells doesn't "break" anything, in fact, once we move all the pink sections to make lined up pictures, we can erase all the other code, if you don't want the captions.
We will be working with the pink parts first, then the blue parts. Let me go over what we're gonna do generally then I'll try and show you visually. We're going to use the first pink section of code as the place we build the entire horizontal line of pictures. We will be moving the other two pink parts up so they sit right after the first pink section. Then we'll do the same with the blue parts, putting the second and third blue sections right after the first blue section. Basically we'll be eliminating the second and third picture's non highlighted black text. We only need one set of tr and /tr tags for the pictures and one set of tr and /tr tags for the captions. The great thing is that we can just highlight sections of code and carefully drag them to the right place. No copy/pasting or typing new code!
So, lets start with the picture of the code again, but I'll highlight the first move...
What we're doing first is moving section B to right after the /td of section A. (NOTE: I can't put the < > before & after the /td as I type because that tells blogger it's a closing tag and then blogger looks for the opening tag! This applies to ALL tags I type. That's why code is either a photograph or within a textbox.)
Ok, so we highlight section B, just like I've shown you in pink, then click and HOLD down the mouse button and drag the code so it's right after the /td at A. Now "drop" the second pink section B. When you're moving text, you'll notice that Blogger will put a straight vertical line like this... | exactly where your code will go if you drop it. As you drag your code, the vertical cursor moves with you. We want that vertical line to be right after the /td (with no extra space) where A ends. OK?
We now want to do the exact same thing with the third pink part, let me show you what the code looks like after B is moved to right after A below.
Notice that A/B are now together, I'm pointing to A's closing cell tag /td and B's opening tag td. We now want to move C to the END of B, again, right after where B's closing /td tag is. Highlight and drag C just as I told you to drag B. You will notice that after B is moved that all the black code is left, same thing will happen with moving C. Soon, we'll go "rescue" the captions (if you want to use them!). This is what your code will look like AFTER you move C.
Okie Dokie Pokie! Now we've done the major moving, putting A, B & C in the SAME table. Notice that I've highlighted the captions for each picture. Look close, you'll see #1 says "Einstein", #2 says "Nice People" and #3 says "Sharing is Caring". If you want the captions under the picture they went with, all you have to do is move #2 and #3 to the back of #1, just like we did when we put our pictures A, B & C together.
(If you don't want any captions and were only using them to add the necessary code then you need to delete them and all the other superfluous code also. You have to eliminate all the blue captions and also 99% of the black code around them. The only black code we need to keep that's below the pink part is the closing /tr right after the pink part and the closing /tbody and /table that's just after the first blue caption. Remember, tags come in pairs and we have opening tags tbody and table above the pink part so we need to close our tags BELOW the pink part.)
But, let's assume we want those cute captions that go under each picture...
We want to highlight #2 and drag it to the end of #1, right after it's closing /td. Then highlight #3 and drag it to the end of #2, right after it's closing /td. This is what it'll all look like AFTER you move #2 & #3 so they snug up with #1 (just like we did with the pictures).
The pink part is the three picture cells making our pictures line up within the table. The blue part is the three captions that will now line themselves up below their own picture. The green part is the extra code that is left over after we move the pictures A, B & C and the captions #1, #2 & #3. This code must be deleted, it's the code that was making a table for each photo, to keep the picture and caption together when they were in a vertical line (in the beginning, before we started moving stuff.) If you notice, the green is made up of opening and closing tr's, tbody's, tables (with extra code that you don't need to understand, lol) etcetera.
You need to delete the GREEN, but make SURE you leave the closing tags /tbody and /table that are right under the blue captions, they close your table, remember? Guess what? You're nearly done, all the hard part is DONE. All we have to do is put a number in for the cellspacing!! If you have a lot of pics that you're trying to squeeze into a line, then use a small number like 2, but if you have more space to use up then use 10 or so. You can play and see what number makes the space you want. Oh, and to truly see what space you'll get, you have to preview your page which is beside SAVE above the header tools.
The other thing I want to mention is that your code may be wider or narrower and therefore the "cuts" to start a new line may break at different places. Just see the basic code then it doesn't matter where the line breaks happen. Here's what our completed horizontally aligned pictures with captions look like...
|Einstein||Nice People||Sharing is Caring|
**One Last Note: One of the comments I received about this post mentioned the size of the pictures you can use to put in a row. I should have made that clear, the pictures DON'T have to be the same size, they can totally be a mix of long and wide and tall and small. I used three the same size because they LOOK better, lol. Hey, life if a series of looking good!
I'll be back soon with my artwork for this week's APR challenge (rainbow), until then, be good to one another and enjoy your Spring week.
P.S. I would really appreciate it if all my visitors who are enjoying this series would join up using my Linky Follower tool in the sidebar, that-a-way ----->
(if you'd like a follow back please leave me a comment requesting one, I'm always thrilled to discover new bloggy friends.)