The Official ActiveRain Guide

head_left_image

Unofficial Tech Support ~ Lesson in Placing Photos Side by Side...

Blogs with properly placed photos mean a world of difference in presentation.  Nicely lined up photos without a lot of white space are more appealing and attractive to the viewer.   

When adding photos it's fairly easy to add one at a time, embedding the cursor into the text (not the other way around).

Adding photos that need to be placed right next to each other is a little more challenging.   Why?  The simplest explanation is this; the format of Active Rain is fluid in size.  Everyone is viewing it on a different size monitor.  What works on your computer screen will not work or even look the same in another. 

Frustrating?  Yes.  But it is possible to place your photos side by side using HTML and setting the photos in a table.  

The table is the framework that will keep the photos inside of each frame, so they don't travel to weird places on your blog!  

The steps to organize the process are important.  Taking time to follow the same routine will save you hours of frustration.  Here is how I do it.

  • Choose the photos to use
  • Process the photos so they are all the same size.  I used width of 350 pixels.  Keep in mind you don't want photos that are too large for the screen. When viewers have to scroll right and left to read your blog, it is a bother.  They will move on. NOTE: I honestly don't know if this is a good size.  Please if you have to scroll, let me know! :) NOTE: PHOTOSHOP ELEMENTS is a good program to use.  There are free ones on the market, so do some research if you don't care to spend the money.
  • Write your blog first.  When you are finished with the text portion, it is time to add the photos.

Here's how to begin:

 Demo html button


 

 

 

 

 

 

Click on the "HTML" button on your Active Rain Tool bar.  (see demo above)

Demo for HTML


 

 

 

 

 

 

 

 

 

 

 

 

 

A new window will pop up.  If you have text, it will appear here, probably looking like gobblygook; if you aren't used to looking at HTML code.

Your cursor should be in the area where you want to place the photos.  Don't worry about spaces, HTML doesn't recognize spaces, so give yourself some room to work. 

 Cut and paste this code into the HTML

html code for building a table


 

 

 

 

 

 

 

 

 

 

 

 

 

This is how the code will look in the HTML editor.  You will need to delete the <!--BEGIN TABLE--> and <!--END TABLE--> I used it as an example for you to see the beginning and ending of the code.

When you are finished adding the code, click "UPDATE".  The window will close and take you back to the Active Rain "ENTRY:" area.  Your table will resemble the example below:

demo

















If you have a table that looks like this, you did it right!  Now all you need to do is place your cursor inside of each individual "box" and add your photos.  If you don't know how to add photos, check out my previous blog on "How to Add Pictures in Your Blog" (tricky title!)   NOTE: When you are adding the image URL, in the "appearance" tab, be sure to align the images all the same.  In this instance, I chose "middle."   adding photos demo

See how the first photo enlarges the box?  The next box shrinks...don't fret, just add your cursor and photo, like normal.  Keep going with this same routine until the table is used up. When you are finished your blog should look like this:


  Dawn Patrol Albuquerque Sunrise in Albuquerque 
  Hot Air Balloons   Hot Air
  Fire up the balloon   Balloon aloof

THE REST OF THE SCOOP

Of course you are wanting to know the HTML code.  I used this code to build 3 rows with 2 columns:

Just cut and paste this code.<!--BEGIN TABLE-->
















 
 
 
 
 
 






<!--END TABLE-->

Learning HTML is not as difficult as many believe it to be.  If you are interested in learning more, pick up one the the many wonderful "how to" books.  Start off by doing, you will be surprised at how much you can learn and thus control your own destiny! 

GREAT RESOURCES

HTML and CSS by Molly E. Holzschlag

Head First HTML with  CSS & XHTML by Elisabeth Freemand & Eric Freeman ( I love this one because you do it in a classroom fashion. )

Inspiration for this blog goes to Stager Val Allocco in NY ~ VAL asked me how to do this yesterday, so I whipped up a post.  Thanks VAL!

 

Colorado Licensed Broker
ABR - Accredited Buyer Representative
CIPS - Certified International Property Specialist
CRS - Certified Residential Specialist
The Berkshire Group Realtors
3801 E. Florida Ave. Suite 400
Denver, Colorado, 80210
USA
Mobile: 303-589-2022
Fax: 303-953-5362
kristal@tbgdenver.com
Selling Denver and the 'burbs

Kristal Kraft Denver Realtor

Kristal Kraft's Facebook Profile Kristal Kraft's Flickr Photos Kristal Kraft's Google Profile Kristal Kraft's Linked In Profile Kristal Kraft's Twitter Profile Kristal Kraft's You Tube Profile

Kristal Kraft Sells Denver Real Estate

Broker Associate, ABR, CRS, CNE, GRI, ePRO
The Berkshire Group, REALTORS
3801 E. Florida Ave., Suite 400
Denver, Colorado 80210
720-279-4599 ~ direct     303-953-5362 ~ fax

Selling Colorado Since 1984, Serving the Following Areas:

Comment balloon 74 commentsKristal Kraft • April 13 2007 03:16PM
Unofficial Tech Support ~ Lesson in Placing Photos Side by Side…
share
Blogs with properly placed photos mean a world of difference in presentation. Nicely lined up photos without a lot of white space are more appealing and attractive to the viewer. When adding photos it's fairly easy to add one at a time,… more
ActiveRain New Members - Getting Started
share
Have you invited others to the ActiveRain Network? Did you show them the manual? Why not? Because there isn't one… yet. Are you giving them instructions on what to do next or where to go for help? I have spent quite a few hours this past… more
Unofficial Tech Support ~ Adding photos and wrapping the text…
share
AS the unofficial tech support person, I occasionally have the pleasure of being asked to help explain various "how to stuff" on AR. The following is an email I received awhile back… hope you find my response helpful. "Hope… more
Small Rooms: Take Off The Door
share
When shooting a very small room, there are several things to remember. First, take the photos at an angle as commented on by Dawn Shaffer Second, if you don't have a wide angle lens, get one. I like the Panasonic Lumix FX35 … more
How to Add Pictures in Your Blog
share
A picture is worth a thousand words and it certainly enhances a blog. Pictures get attention and help illustrate a point. Sometimes pictures have no point, but then some blogs are pointless too! :) Before adding a picture, you need to know… more
Blogging for fun or profit? How about both!
share
(NOTE: I am not trying to preach to the choir! This blog will be linked from the Listserve for the WCR Mile High Chapter. I thought inviting the group to our neighborhood would be a great way to demonstrate the wonders of blogging! ) kk .. more
Getting started on the ActiveRain Community
share
Here is a basic primer for Newcomers to ActiveRain (with special recognition to the members of the Mile High Chapter of WCR! ) As you participate in the network, you receive points for your contributions. The various ways you get points are :… more
Think About the Future… ADD VALUE.
share
Real estate blogging on ActiveRain has become a way of life for many. Others are just joining and are questioning our little social community. As we come together we all need to recognize the importance of our blogs and how it affects our… more
Creating Hot Links
share
Recently someone asked in a comment section "how do you make a link to a site? " I'm assuming they were talking about linking on a blog post. It's quite easy, look above at the "chain" in the tool bar where you enter your… more