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:
Click on the "HTML" button on your Active Rain Tool bar. (see demo above)
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
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:
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." 
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:
 |
 |
 |
 |
 |
 |
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
                |
Broker Associate, ABR, CRS, GRI, ePRO, PMN, PNG
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:
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
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
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
Kristal, this was a good lesson. I bookmarked this page because I will definitely be coming back to it. Thanks for taking the time.
As soon as I almost figure this thing out A/R adds something new and cool for me to learn.
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 & uses
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!
JayAlso, 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".
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....
kk-
Reall great information, as usual. You have been bookmarked, tagged and flagged. This one should be featured : ) Have a nice weekend.
Great info, thanks Kristal. Great Blog and Info.
Christine O'Shea
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.
5 Star Rated & Bookmarked. You are AWESOME and your posts have helped me tremendously over the past month. Thanks Kristal!
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. ;)
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...
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.
Thank you Kristal..great information. Will you work with me on my next post? LOL Have a great weekend.
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
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.
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
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. :)
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?
THANKS. I've been wondering how to do that. :) Your words of wisdom are much appreciate.
Blog On!!
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.
I bookmarked this blog, KK...I usually use google writely.... maybe I can start doing this.....hmmmmm
thanks!!
=-)
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
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
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
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
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.
Crystal,
Just curious about how you embedded the copyright w/your name. Very classy.
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!
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.
Kristal, great stuff here. Just stumbled upon it after reading Maureen's post. ;-)
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!
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
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!