Laying out pictures with text...
When you upload a picture to your Activerain blog you can easily change the size and justify it left or right on the page using the editor. Yet, on occasion I’ve fiddled with trying to wrap text around an image and messed up my entire layout. No fault to Activerain, every editor has its own unique temperament.
You could delete the image or the whole post and start over, but uploading the photo again adds bloat to Activerain’s storage space.
With a little HTML code you can place your image anywhere you like and re-size it on the fly if you need.
1st upload your photo to your draft post and save ( by clicking - post blog entry).
2nd click edit and change the view to HTML by clicking the HTML tab...
Here’s the code that Activerain created for my uploaded image...
<p><img title="Car's cost less in Puyallup!" src="/image_store/uploads/2/9/3/2/9/ar132604695592392.jpg" height="250" alt="Big balloon car sale promotion." width="250" /></p>
Note that Activerain uses the <p> paragraph tags to open and </p> to close. This is used to manage the area for the image just like we did in part 1 & 2 to manage the text.
img = image... any text you put between the quotes will show up in a little pop up when the reader runs their mouse over the photo in your published post.
src = source... the characters between this set of quotes tells us where the image is stored on the servers and the name Activerain gave the photo (ar132604695592392.jpg).
The numbers after height and width are describing the size of the picture in pixels.
alt = alternative, it’s a description that will show up if the picture is blocked for some reason and/or won’t show up in the readers browser because they’re on a network or something...
I usually embed my photos from Picasa but uploaded pictures work the same way.
The first thing I do is upload my picture to my draft post and save it by clicking on the “Post Blog Entry” button.
Then click edit and switch to HTML mode and copy the HTML code that Activerain created for my image and paste it into notepad so no matter how much I screw things up, I don’t lose my photo. As long as I have that snippet of code, I have a way back to my uploaded photo on Activerain.
Let’s create a post with a picture on the left that has text on the right. We’ll do it by creating a simple table.
In the editor in HTML mode... we’ll start the table with the HTML tag...
Table means we’re going to create a simple spreadsheet like grid layout with rows and columns. In our case we’re just going to create 1 row with 2 columns.
In the table we need to create a place where the content is placed. Photo on the left, text on the right.
Create the row using the tag...
<tr>(= table row) and tell the row where the data goes by using the data tag. HTML is read in your browser from left to right.
<td>(= table data). This is telling your browser there’s a table and on this row there’s data.
Tables are like looking at an Excel Spreadsheet... You’re creating a simple grid with rows and columns...
Using a simple table to create two columns so I can display a picture on the left with text on the right just cuz I want it that way. The width of the column on the left for the image is set to 40% of the viewing area and the text area to the right was set to 60%.
That will look like this...
<tr><td>“paste your photo html here”
Now create the area to the right for the text.
Tell the row there’s more stuff to present by using the data tag again...
<td> “your text goes here”
Now close up shop...
End the row
then close the table using the tag
What you’ve created is a simple table with 1 row and 2 columns. By default browsers will give each column 50% of the viewing space. All we need to do now is to adjust the area for the photo and the text and tell the columns how wide they should be.
If I eyeball my picture which is 250 x 250 pixels (in a roughly 640 pixel wide viewing space), I can see the width is less than 50% but more than 25% of the viewing area... I’m going to be really scientific and make the extremely educated guess that 40% will work just fine for the image and I’ll give the rest of the space to the right, 60% for the text. I can always adjust later. The combined width of the 2 columns should equal 100%.
I’ll set up the width for the photo area by telling the data tag to be 40% wide...
And, I’ll set the data tag for the text to be 60% wide...
We’re almost there, let’s throw it all together...
1. Upload your photo and if you need to, use the AR editor to size it.
2. Save your post and switch to HTML mode then copy the HTML to notepad for safe keeping.
3. Write your first paragraphs as you would normally do and save.
4. Switch to edit HTML mode and go to the area below your text to create your table.
“paste the photo HTML here”
“paste your text here”
<p></p> (add this if you need a little blank space after your table)
A few notes....
Don’t forget every time you switch back and forth between HTML and WYSIWYG mode to save your work (or you’ll lose it)!
Sometimes, when I save my draft from HTML mode then open it to edit in WYSIWYG it won’t open up into full viewing mode. Just save the WYSIWYG again and re-open it and it will be in full size again.
I didn’t mention how tall the row is... In today’s example which ever is taller, the photo or the text, will dictate the height of the row simply based on how much room it takes to present them. So, the row’s height will stretch in height to allow room for the content.
As I mentioned in part 1 & 2, I create my posts primarily in HTML mode to control font sizes using the <big>, “default”, or <small> tag and the layout using the <table> tag.
Picture on the right and text on left... Just reverse the data tag width.
Add your text here...
Add your photo code here...
Using a simple table to create two columns so I can put text on the left and position a photo next to it on the right. All I did was switch the content and reverse the percentages between the data tags. The column on the left is now 60% and the column on the right is 40%.
A Little HTML goes a long way...