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

 
Post is included in group: Active Rain Newbies
Post is included in group: Active Rain Groups

74 Comments on Unofficial Tech Support ~ Lesson in Placing Photos Side by Side...

APR
12
2007
450,559 Points 13 Featured Posts Localism Sponsor Outside Blog
Kristal thank you for taking the time to put this together.  Learning HTML is on my to do list but your post is going to be invaluable to me in the meanwhile.
11:54pm • #1
363,568 Points 110 Featured Posts Outside Blog

Thaks Jennifer ~ I hope it works for you.  I've tested it as I was doing and of course it worked.  Other's results may vary!

kk

11:57pm • #2
105,545 Points 10 Featured Posts Outside Blog
Wow... talk about a great lesson.  Thanks Kristal!!!
11:57pm • #3
APR
13
2007
1 Featured Post
Kristal - great post really builds on yesterdays - Cyndee and I are learning a lot from you - thanks for taking the time to present these step by step instructions. We'll give it a shot and let you know how we make out.
12:00am • #4
363,568 Points 110 Featured Posts Outside Blog

Irina ~ hope you find it useful!  You are welcome!

 Jack ~ feedback from you would be great.  I hope to see lots of warm sunny pictures from you in Florida!

kk

12:02am • #5
130,036 Points 25 Featured Posts Outside Blog
kk, This is a great series you have running here. Thanks so much for very usefull information.
12:18am • #6
231,821 Points 39 Featured Posts Outside Blog
What prompted you to learn code, originally?
12:50am • #7
120,889 Points 22 Featured Posts Outside Blog

I need to bookmark this ... you say it's easy and I believe it, but I'm reading this at 11pm at night and feeling "glazed over". It'll look simpler at 8am with coffee at my side.

Thanks for the tutorial!!

 

Mary

1:10am • #8
161,801 Points 3 Featured Posts Outside Blog

Kristal, this was a good lesson. I bookmarked this page because I will definitely be coming back to it. Thanks for taking the time.

 

2:54am • #9
485,249 Points 84 Featured Posts Localism Sponsor Outside Blog Hit Router

As soon as I almost figure this thing out A/R adds something new and cool for me to learn.

3:16am • #10
122,251 Points 24 Featured Posts Outside Blog

kk: I use Firefox as a browser, and have the screen set to medium-low resolution—just so the print is large enough to read easily—so, what this means is that I DID have to pan (pan=horizontal scrolling). I digress. That is good information—however, I’ll just have to swallow my pride and have that old goat Medford (who understands & usesactive rain|active codgers your active fans image&copy; html) teach me as I go. There is nothing like an impatient old goat submitting to the teachings and pontifications of another impatient old goat!

Jay
4:29am • #11
5 Featured Posts Localism Sponsor
I think most of my bookmarked posts have to be yours....... THanks KK !
6:44am • #12
5 Featured Posts Localism Sponsor
I think most of my bookmarked posts have to be yours....... THanks KK !
6:44am • #13
311,958 Points 22 Featured Posts Localism Sponsor Outside Blog Hit Router
Kristal,  What software are you using to create your screen shots and instruction-shout-out balloons?  They are beautifully done!  
7:37am • #14
311,958 Points 22 Featured Posts Localism Sponsor Outside Blog Hit Router

Also, guys, HTML is very simple.  You can grasp the basic concept in 5 seconds:  Everything goes between a Start Tag <> and an End Tag </>    There, that's it.  That's the fundamental.  The building block for the entire concept. 

Everything else is just learning what word goes inside the tag, for example <bold> BOLD TEXT </bold> for bold text  and how to properly nest tags within your document.  It's not really writing code at all.  It's just "tagging".

7:44am • #15
447,745 Points 28 Featured Posts Localism Sponsor Outside Blog
HI Krystal, thanks, I can NEVER get the pictures side by side with a space.  Maybe I can print this out....it looks like it's going to take a bit of getting used to (for me).  Btw, I loved the pictures too :)  Thanks for this information!
8:35am • #16
265,925 Points 18 Featured Posts Outside Blog

Kristal,

I guess I need the "HTML for Dummies" version. I tried several times to cut and paste the HTML code above and add pictures and nothing happened. I did see the other screen for HTML however, everytime I do pics they don't line up correctly. I'll re-study the post again...just feeling a little frustrated, I'm sure it's me - not your instructions, however, Jack & I may need a little more help - would that be ok?

I'll go practice some more first. One question - do I put the HTML in first before pictures (that's what we were doing) or after? I never got anything visual like a table to show up on my screen.

Thanks for your patience....        

9:56am • #17
18 Featured Posts

kk-

Reall great information, as usual. You have been bookmarked, tagged and flagged. This one should be featured : ) Have a nice weekend.

10:24am • #18
311,958 Points 22 Featured Posts Localism Sponsor Outside Blog Hit Router
Cyndee -- I'm jumping in here -- But, have you resized your images?  Are they all the same size?  If one images is say 340 pixels tall, and another is say 400 pixels tall, the table cell is going to grow to accommodate the larger image ....  Kristal will probably pop in with more....
10:31am • #19
265,925 Points 18 Featured Posts Outside Blog
Cheryl - thanks for the help! That may be the problem. I'll give it a try....
11:29am • #20
7 Featured Posts
Wow !!  What a great blog !! 
3:22pm • #21
348,762 Points 9 Featured Posts Localism Sponsor Outside Blog
Thanks again for this great tutorial.  It is always easy to follow you suggestions.  The photos are awesome as well.  Again, thanks for also answering my question yesterday --
3:25pm • #22
Thanks and wish me luck. I used to think I was pretty good on a computer. I don''t know what happened to me.  BUT I am not giving up. Practice makes perfect. At least that is what I tell my kids
3:26pm • #23
1 Featured Post Localism Sponsor

Great info, thanks Kristal.  Great Blog and Info.

Christine O'Shea

3:27pm • #24
224,750 Points 2 Featured Posts Localism Sponsor Outside Blog

Kristal,

You're a whiz kid!  Thank you for this valuable lesson which I've bookmarked.  Now all I have to do is figure out how to put it into motion. I label you the "Official HTML Queen" of Activerain.

3:47pm • #25
13 Featured Posts
Nice explanation.  Keep up the good work.
3:52pm • #26
242,989 Points 11 Featured Posts Outside Blog
OK, I'm fussing up. I have noticed the HTML on the tool bar. Now I know why I've been avoiding it. Geez, this sounds like a lot of work. But this is why my blogs look the way they do.
4:00pm • #27
168,252 Points 10 Featured Posts Localism Sponsor Outside Blog
Your posts are so clear to understand and helpful, thank you.
4:05pm • #28
9 Featured Posts

5 Star Rated & Bookmarked. You are AWESOME and your posts have helped me tremendously over the past month. Thanks Kristal!

4:38pm • #29
212,206 Points 56 Featured Posts Outside Blog
Holly Camoly!!  This is absolutely incredible - thank you, thank you!  talk about  a class in HTML!  definitely a 5 and glad it was featured!  ....and yes....I like "grammy" a lot!! 
5:11pm • #30
181,419 Points 9 Featured Posts Localism Sponsor Outside Blog
Thanks.... I asked for something like this shortly after I found ActiveRain and was told I could only do left or right justification. 
5:37pm • #31
363,568 Points 110 Featured Posts Outside Blog

Herb ~ You are welcome, I'm glad you like it.

ARDELL ~ I learned code because I found it frustrating NOT to know it.  It is actually not difficult, much easier than learning to speak another language...at least for me.

Mary Pope-Handy ~ Let me know if it works ok when you are wide-eyed in the day time!

Leon ~ Thanks for the bookmark..I should be getting thinner soon with all that outside pressure!  :)

Jay ~ Of course with larger font you will find it necessary to scroll.  I work on a fairly large monitor and forget that not everyone does.  Thanks for letting me know.  Try to be nice to the other impatient old goat...

Fran ~ That's very nice of you to say.  Reality is AR is full of good stuff worth reading...it's finding the time to do it all that is difficult!

Cheryl ~ I do all the goodies above with the SnagIt program from TechSmith.  It's about $39...very useful and easy to learn.  Thanks!

Carole ~ Hopefully you can get your photos side by side now!  I'll be looking for them.  ;)

7:03pm • #32
363,568 Points 110 Featured Posts Outside Blog

Cyndee ~ Absolutely, I'm happy to help (if I can) you can call sometime and I'll walk you through it!

Kelli ~ Thanks, it did get featured.  Guess others feel the same way.  Glad to help!

Cheryl ~ Good advice, feel free to jump in anytime.  I love the way we all  help each other on AR.

Lauren ~ Thank you for your kind works.

Joan ~ You are welcome.  I was hestitant to use your name yesterday, if you don't mind I'll go back and add it?  I love balloon photos, colors get me everytime!

Sally ~ I am with you girl!  Practice and understanding the what and why helps.  I do wish you luck, but don't dwell on it too long before you ask for help, if you need it.

Christine ~ Jersey girl...you are welcome.  (Exit 100 for me.)

Diane ~ LOL, I'm sure there are others more qualified to wear that label...thanks for giving it to me!  :)

Chris ~ Keep up the questions!  You are welcome...

7:11pm • #33
363,568 Points 110 Featured Posts Outside Blog

Dena  ~ your blogs look just fine!  It is a little extra work, but what else do we have to do?   :)

Miriam ~ thanks, I appreciate the compliment.  Thanks for stopping by!

Kelly ~ Wow!  I love helping, so glad you find it useful.  Keep those questions coming!

Ines ~ Grammy's can be cool too!  :)

Dan ~ Probably at the time that's all you could do.  I go back to PRE-Picture days on AR.  Can you imagine how dull that would be?  Thanks for stopping by, I know how you hate to stop running.

7:14pm • #34
174,470 Points 44 Featured Posts Outside Blog

Thank you Kristal..great information.  Will you work with me on my next post? LOL  Have a great weekend.

9:37pm • #35
461,918 Points 54 Featured Posts Outside Blog
Kristal, you did a great job of explaining that.  I have notice the HTML icon on the tool bar but have never had the need to use it, but now if I do have to use it I will already have an idea of what to do in stead of trying to figure out what to do.
9:59pm • #36
20 Featured Posts
Kristal- This is great.. and explained a lot of things I needed to know.. I know just enough about HTML to know I need help..Thanks for the help
10:06pm • #37
363,568 Points 110 Featured Posts Outside Blog

George T. ~ You bet!  What are you writing?

George S. ~ are you George's following each other around?  Glad you now know what to do with the HTML.  I'll be looking for your work Mr. G.

 Kaye ~ Thanks...I'm happy to help.  Good luck with it, I know sometimes it can be a real challenge!

kk

10:21pm • #38
208,830 Points 5 Featured Posts Outside Blog
Bookmark.It is quite a lot of work but I am looking forward to try these wonderful tips.
10:26pm • #39
1 Featured Post

Kristal,

I use tables even when I am not putting pictures side by side in my blog.  I use them to make sure text stays next to a picture.  I put the picture in one cell in the row and the text in the other.  I find this keeps the text where I want it more predictably.  

11:06pm • #40
APR
14
2007
397,741 Points 16 Featured Posts Localism Sponsor Outside Blog
Not sure if I would pay for the privege of providing this level of TS - but have significant respect for those that choose to do so - regardless of their "personal investment".
1:34am • #41
126,385 Points 12 Featured Posts Outside Blog

wow... you really are getting technical!

it is too bad that this WySiWyG editor doesn't have a table button - or a better cut/paste solution

another option is always to create in Word (then you can save) and Save as HTML... once you get it right, you can cut and paste it into HTML window

9:43am • #42
363,568 Points 110 Featured Posts Outside Blog

Lloyd ~ I am looking forward to your blogs when you getting around to using the tips.  It would be nice to know if they work!  

Rita ~ So right!  Using tables is a great way to control where the text goes.  It certainly looks neater than having  text flowing every which way!  Thanks for bringing up that valuable tip.

 Tony ~ I'm not exactly sure what you mean.  Are you saying I "pay" to do this?  Actually what time I devote I get back in spades for the relationships I make here in the Rain.  Since it is something I enjoy doing the pleasure is doubled.  It certainly is a "personal investment" worthwhile to me.

David ~  You are so right.  I actually use a HTML editor to produce the code.  I don't use Word as I seems to add goofy things.  I've never tried using it in HTML mode, didn't know it was there.  Thanks for bringing up this good tip.  Isn't sharing our information great...we all benefit. :) 

9:51am • #43
222,386 Points 12 Featured Posts Localism Sponsor Outside Blog

Thanks for sharing this great advice.  It's been months and I finally am up to trying this..

Do you have advice on how to put the html code into something other than the 2 column, 3 row format?

10:18am • #44
3 Featured Posts
Kristal,  Do you give live classes?  I would certainly pay to attend one of them.  Thanks for all the great info.
11:59am • #45
Localism Sponsor

THANKS. I've been wondering how to do that. :) Your words of wisdom are much appreciate.

 Blog On!!

1:45pm • #46
237,908 Points 30 Featured Posts Localism Sponsor Outside Blog

Kristal

Thanks so much for the step by step instructions.   I for one truly appreciate it... thanks again for another great post... enjoy your weekend.

4:39pm • #47
345,776 Points 11 Featured Posts Outside Blog

I bookmarked this blog, KK...I usually use google writely.... maybe I can start doing this.....hmmmmm

thanks!!

=-)

7:21pm • #48
134,240 Points 8 Featured Posts Outside Blog
Kristal-Thank you for the much needed instructions, I have bookmarked this for future reference. :)
8:11pm • #49
363,568 Points 110 Featured Posts Outside Blog

Tracy ~ You are welcome!

 Carol ~ thanks for asking, somehow I doubt that you need a class.  Your blog is awesome and it brings you a ton of biz!

 Liz ~ Hope it works well for you.  I'll be looking for your work! 

Desiree ~ Wow! Another Jersey Girl, glad to help.  Hope you have a great weekend too.

 Alex ~ Writely is cool, but has some major problems.  Hope they don't mess up your work!  Good luck.

 Suzanne ~ You are welcome, glad you find it useful. :)

kk 

8:54pm • #50
138,875 Points 1 Featured Post Outside Blog
Kristal-You are truly unique.  I am so envious of people like you because I am certain that I will never acheive that level that you are at and if I do, it will be in several years when you will probably be piloting a space shuttle from Denver to Mars.  Thanks and I will be trying what your idea.  Aloha!
9:18pm • #51
186,012 Points 7 Featured Posts Localism Sponsor Outside Blog
Kristal, thank you for all the information.  I've had trouble with this.  I'll get to work and try it.  Have a great weekend.
9:40pm • #52
3 Featured Posts
Kristal,  Thanks!   I do get tons of biz from my blog, but it doesn't have nearly the "curb appeal" yours does!
10:31pm • #53
363,568 Points 110 Featured Posts Outside Blog

David & Tonya ~ I may be unique, but what I do is not all that difficult.  Trying to do it is the first step...once you go through the process you will be amazed at how easy it is.  Good luck and Aloha to you!

 

K ~ Hope you find it easier to do now.  I find the backside of AR a bit strange...:) but workable!  Have a great weekend too.

 Carol ~ Curb appeal is a developing process.  Maybe you should hire a landscaper?  :)

kk 

10:54pm • #54
138,875 Points 1 Featured Post Outside Blog
Kristal-I just got done trying it and I am not getting it.  I have followed all of the steps and I am able to get the HTML window to come up.  I pasted the code that you gave but it does not give me the table.  Hmmmm I will try a few more times.  Any thoughts on what I might be doing wrong?
11:29pm • #55
363,568 Points 110 Featured Posts Outside Blog

David? or is it Tonya?

Try holding down the "CTRL" key as you click on the HTML button.  I suspect your computer is blocking POP UPS and that would be one!

Let me know...I've got my fingers crossed.

kk 

11:32pm • #56
5 Featured Posts
Kristal, very nicely done!  Looks like you may have used Adobe Photoshop to crop your pictures.  I like what you've done!  Thanks for the tips!
11:52pm • #57
APR
15
2007
1 Featured Post
Thanks for this great step by step ,though lots of steps but the finishing is fabulous.
11:09am • #58
138,875 Points 1 Featured Post Outside Blog
Kristal-I still havent got it.  I tried to hold down the CTRL key while I pressed the HTML key but that didnt help.  I also disabled the pop up blocker and tried it again.  That didnt work either.  What I am noticing though is that when I press the HTML button, the window will open for less than 2 seconds and it will auto matically minimize itself.  Could that be an indication of what I am doing wrong?  Thanks!  Oh by the way, this is David.  I was trying to conceal my identity so people wouldnt know that it was me who is the dummy :)
6:58pm • #59
3 Featured Posts
David & Tonya, Are you using Internet Explorer or some other browzer (like Firefox).  I've found when I have these kinds of problems it is an incompatibility issue with a minority browzer... and, inspite of hating iE, I have to give in and use it.  
7:43pm • #60
363,568 Points 110 Featured Posts Outside Blog

David L. Britt ~ Yes, you are correct I use PSE to manipulate the pics.  Glad you approve!

 Paul ~ Thank you.  I hope you and others benefit from it.  Sometimes all it takes is a little explanation and the light bulb goes off...

 

David ~ I think Carol Williams has a good point there. Are you using IE or Firefox?  I've had something like that happen with me, but I got over it.  Think about what Carol said and let us know.

Carol ~ Thanks for stepping up with an answer.  I wasn't sure how to respond.  I know exactly what you are talking about with IE.  Syncing my Palm TREO is one issue.  grerrrrrr 

9:33pm • #61
APR
21
2007
2 Featured Posts
Bookmarked and I'm off to buy the books. I've avoided HTML like a plague. It's time to dig in. Thanks for the inspiration.
9:52am • #62
APR
30
2007
2 Featured Posts
thanks so much, i have been trying to figure this out on my own, with no success.
9:41am • #63
MAY
04
2007
2 Featured Posts
Kristal, what software do you use to make your screenshot photos?
1:34pm • #64
MAY
20
2007
6 Featured Posts

Kristal, After much time spent on writing this blog it still is visually unappealing; I wish I had read this blog first!

Is it possible to go back and edit a blog in HTML to "straighten it out"? Perhaps not worth the time.

 

3:08pm • #65
JUN
10
2007
190,971 Points 1 Featured Post Localism Sponsor Outside Blog Hit Router
It seems that the format changed changed and there is not HTML icon as you show in the example, but does the technique change any from what you wrote.  I have not tried it because it does appear different.
1:38am • #66
AUG
12
2007
222,386 Points 12 Featured Posts Localism Sponsor Outside Blog

Crystal,

Just curious about how you embedded the copyright w/your name.  Very classy.

4:34pm • #67
199,912 Points 1 Featured Post Outside Blog
Great post exellent instructions
9:34pm • #68
OCT
30
2007
214,055 Points 1 Featured Post Outside Blog

You posted this Blog months ago ( we did not even know of AR back then :) and yet I just ran across it today and used it for the first time for a football games photos in a Blog and it worked awesome- thank you very much from newer members!

2:49pm • #69
OCT
31
2007
386,816 Points 1 Featured Post Localism Sponsor Outside Blog

Thanks for this blog, I am still trying to figure out the technical stuff and this html table code will help!

It always seems simple after you learn how.

4:30pm • #70
APR
07
2008
289,161 Points 16 Featured Posts Outside Blog

Kristal, great stuff here. Just stumbled upon it after reading Maureen's post. ;-)

Pepper

 

11:26pm • #71
APR
18
2008
213,957 Points 6 Featured Posts Outside Blog

I also stumbled here after reading Maureen's post... great information.  I have been adding photos side by side by resizing them, but this has created a problem with the new skins (Thanks Brad).  This has kept me from using them.  This may answer that problem for me! 

Thank you so much!

9:50am • #72
JUN
08
2008

Thank you for the whole blog. Your active rain page looks great too...What fun to stop by. its never to late to find your info...I just found it on a search re photos

lynne pope
8:16am • #73
MAR
11
Outside Blog

Thank you so much!!! I have been trying to figure this out and I am going to go get a good book about html and learn more about this. I always thought it must be "too difficult" but I think I need to re-think that now. Love your blog!

12:04am • #74

Leave a response…



(optional)
What does the graphic say?
 
Kristalkraftdenverrealtor Rainmaker_large

Kristal Kraft ~Denver Real Estate~303-589-2022

Denver, CO

More about me…

The Berkshire Group Realtors

Address: 3801 E. Florida Avenue Suite 400, Denver, CO, 80210

Office Phone: (303) 953-5222

Cell Phone: (303) 589-2022

Email Me

Soapbox musings for and about Denver relocation and real estate.

Kristal Kraft's Denver Real Estate & Condo Top Ten List!
REBarCamp Badge
Kristal Kraft's Facebook profile



Links

Archives

RSS 2.0 Feed for this blog

Find CO real estate agents and Denver real estate on ActiveRain.