How to Insert Photos Into Your Blog Post

By
Education & Training with Tech Training for You!

Inserting photos or other graphics into our blog posts is an essential step to creating a presentation that is compelling. The textual content is also essential, but can you imagine picking up a magazine that had no photos in it at all? How much better to attract our attention when images are added to articles!

Whether you are in ActiveRain or on another platform like WordPress, you can think of images on posts as falling into 3 categories: cover photo/hero image, image with wrap around text, and a full-width image in the body of the post.

The first thing you see when you open a post, is the cover photo (also known as the hero image). ActiveRain calls this the "featured image." This image will be shown at the very top of your blog post. Additionally, the image you choose will also be used as the thumbnail that you will see in the blog feed pages. It should be something that captures interest and makes your audience want to proceed to read the post that you created.

Tech Tip: If you create a featured image that includes some text, you should note that the thumbnails are cropped down to a size of 370 x 258. Therefore the thumbnail likely has an aspect ratio that may be slightly different than the image you have created. As such, you may notice that the thumbnail crops a little off of the top or the sides to get the right thumbnail shape. If you keep your text from getting too close to the edges, it should keep the thumbnail from cropping off part of your words. 

When you are in post editing mode, you will see a button located directly under the title of the post. Click "Choose File" and you can select the file that you want to use for your featured image.

When you want to insert images into the body of your post, you'll need to use the insert image button on the toolbar. Once you click the button, a dialog will appear. Next, click the button next to the source text box. That will open up your image library.

The image library is a repository of all the images that you have previously used in your blog posts. It is possible to re-use an image from a previous post. Take note of the search box at the top to help you locate images.

Most of the time, however, you will need to upload a new image so that you can use it in your post. Click on the upload button located at the top left of the file manager window. You will then be prompted to select the file that you want to use

After you image uploads, the insert image dialog will then show the source file name for your picture. Note on the dialog box, there is also the ability to enter an "alternate description" as well as the width and the height values.

The alternate description is intented for use in the case of screen reader apps (i.e. for visually impared people to know what is included in a photo, even though they can't see it). Besides being best practice to add a description because of the above reason, alternate description is also valuable for SEO purposes. You are helping Google to identify the contents of the photo and you may get a SERP result somewhere down the line in an image search!

The width property is also something you should keep your eye on and edit accordingly. If your image is going to span the full width of the content area, you'll want to set this value to 704. That is the maximum width allowed on our blog posts (some people use 700 as it is easier to remember the round number). Important note: if your image width is larger than 704 and you don't type in 704 (or less), a CSS bug right now means that your image will scale down in the width, but it will not proportionally scale down in the height. This means you will have horizontally squished pictures! (note: hopefully this bug will be worked out soon, I have reported it to the devs).

Images on blog posts ideally will be sized at (or near) the pixel size that is actually displayed. The megapixel photos that come from our cameras are way too large to be directly inserted into our blog posts. Web images should be scaled down before inserting. This will dramatically improve page load times (user experience improves and it is also one of the SEO ranking factors). If you want to learn how to resize a photo before inserting, see that blog post I linked.

The last type of image that you can use in your blog posts is one where you can wrap the text around the image. In other words, the image is not full width and so there is room for the text to be be alongside the image.

First, you will want to click to set your cursor where the image will be anchored. You will want to put it at the start of the paragraph of text to be aligned to.

For the case of wrap around text, I recommend that you use a width value of 350 (i.e. half the width of the blog post text width). You can fine tune this size after it is inserted. Notice how whenever you type a width value in the box, the corresponding height value is dynamically (instantly) calculated for you.

Step 2 of wrapping text around an image happens right after you insert the picture. The very next thing to do is click either the right (or left) align buttons on the toolbar. If for instance, you click right justify, the image will go right and the text will wrap around on the left.

The final setting that you will want to make on images that has the text wrapping around relates to having enough margin (white space) between the image and the adjacent text. When you first put the image in place, the text will come right up against the image. To fix that, go into the advanced tab of the insert image dialog and type a number in the "Horizontal space" box. For example, 20 would represent 20 pixels of margin space between the image and text.

Tech Tip: When you add horizontal space, notice that in style box, you can see the actual CSS rules that are applied. Horizontal space will put margin space on the left AND the right of the image. You do NOT need horizontal margin on BOTH sides. Optional/Bonus points: You can delete the margin parameter for the side opposite the text. So in the above example, you only need margin-left space on the image. You do not need the margin-right space (blue highlight). This could be deleted and would pull the image closer to the right edge.

And that sums up what you need to add images to your blog posts!

We talked about the featured image (hero image), full width images in the body of the blog post, and images that can have text wrap around it. Nobody wants to read "wall of words" posts. Let  your readers enjoy your content presentation all the more by by adding images!

Posted by

Craig Daniels
This blog is all about technology and helping you to use it smarter! Your digital footprint is your chance to attract new clients. What kind of impression are you making via your website, blog, and social media? We’ll be talking about that! Are you as productive as you can be? What apps might help you out? Do you know how to use all the best tools inside the apps? I enjoy photography and videography, you can expect to see those topics also on this blog.
Are you ready to learn?
Welcome to Craig’s Classroom!

Don’t forget to subscribe! 
PS - get ready for some homework… :) 

Comments (27)

Debb Janes EcoBroker and Bernie Stea JD
ViewHomes of Clark County - Nature As Neighbors - Camas, WA
REALTORS® in Clark County, WA

Thanks so much Craig, I tried to search for a post with some guidelines for the photos, especially the feature photos now requested as part of every post. I am going to read this carefully when I'm done making my rounds this morning. D

May 01, 2021 06:52 AM
Craig Daniels

The featured image has come more into play for ALL blog feeds (including our own blog pages/coming soon). It used to be just for the AR home page, but now it is more! Hope this helps gives more people an idea how to use this component available to us. thanks!

May 01, 2021 09:35 AM
Brian England
Vacasa - Gilbert, AZ
MBA, GRI, REALTOR® Real Estate in East Valley AZ

I love that you create these posts!  Anytime I want to know how to do something in the Rain, I visit your blog to find out how to do it.

May 01, 2021 07:28 AM
Craig Daniels

that's awesome Brian, thanks for saying so!

May 01, 2021 09:35 AM
Dario Ferreira
Attleboro, MA
Internet Marketing

Great tutorial.
AR is lucky to have you taking the time to do these.

May 01, 2021 08:39 AM
Craig Daniels

that means a lot Dario that you think so. thanks!

May 01, 2021 09:36 AM
Dorie Dillard Austin TX
Coldwell Banker Realty ~ 512.750.6899 - Austin, TX
NW Austin ~ Canyon Creek and Spicewood/Balcones

Good morning Craig,

What a fantastic tutorial! Thank you..I learned something ..your advice is so valuable I so appreciate your contributions to our Active Rain community!

May 01, 2021 09:13 AM
Craig Daniels

Hi Dorie, thanks! I try and intermix stuff for beginners and blogging pros alike. takeaways for everyone ;)

May 01, 2021 09:36 AM
Rocky Dickerson
Realty One Group - Las Vegas, NV
Superior Service!

Hey there Craig Daniels you have my vote as AR MVP. Especially when you bring out all the bugs on the Ben Tuesday calls. I am so very grateful for all you do for us

May 01, 2021 12:42 PM
Craig Daniels

thanks Rocky, great teamwork here in the community... we all do our part :)

May 02, 2021 10:16 AM
Elyse Berman, PA
Best Connections Realty, Inc. - Boca Raton, FL
Boca Raton FL (561) 716-7824 CRS, ABR, GRI,ePR

Craig Daniels A great post with lots of useful information.  Thank you!

May 01, 2021 01:10 PM
Craig Daniels

thanks Elyse for checking it out. I wanted a reference more for those first starting out here on what to do.

May 02, 2021 10:16 AM
AndreaBFerreira CRS - SRS - CLHMS
Keyes Co. - Davie, FL
Miami Dade, Broward and Palm Beach County in FL

Thank you for your post, learned something new today.

I just wonder why we need to save at AR plataform, would be easier just insert like Adobe? 

Thank you again and be safe❤️

May 01, 2021 01:40 PM
Craig Daniels

Web pages need the graphics to be hosted (stored) somewhere. So we have our filemanager image library as a place to put what we need. Thanks for reading the post!

May 02, 2021 10:17 AM
Myrl Jeffcoat
GreatWest Realty - Sacramento, CA
Greater Sacramento Real Estate Agent

Craig - Your posts that help us navigate the technologial waters of ActiveRain are always so valuable.

May 01, 2021 02:54 PM
Craig Daniels

Thanks Myrl. I always try and share so others can get through the learning curve a little easier.

May 02, 2021 10:18 AM
Myrl Jeffcoat
GreatWest Realty - Sacramento, CA
Greater Sacramento Real Estate Agent

CONGRATULATIONS Craig, on having this blog FEATURED in the PHOTOS group!

Bgpic10272017202459 l

May 01, 2021 02:54 PM
Craig Daniels

I figured the 'photos group' might like some ideas on adding photos to their posts :)

May 02, 2021 10:18 AM
George Souto
George Souto NMLS #65149 FHA, CHFA, VA Mortgages - Middletown, CT
Your Connecticut Mortgage Expert

Craig excellent job with your step by step directions on how to insert a picture.  You are the Master may friend.

May 01, 2021 04:55 PM
Craig Daniels

thanks! appreciate the kind words

May 02, 2021 10:18 AM
Ed Silva
Mapleridge Realty, CT 203-206-0754 - Waterbury, CT
Central CT Real Estate Broker Serving all equally

A very detailed explanation on inserting photos.  It certainly helps to break  up a wall of words

May 01, 2021 06:07 PM
Craig Daniels

It's much better that way. Thanks Ed!

May 02, 2021 10:19 AM
Matt Brady
Finance Of America - Del Mar, CA
One of San Diego's Best Lenders

Thank you so much for putting the time and energy into breaking this down for all of us. Cheers!

May 02, 2021 06:39 AM
Craig Daniels

I enjoy figuring out the best ways of doing things and then sharing that info with others. Thanks Matt!

May 02, 2021 10:20 AM
Jeff Dowler, CRS
eXp Realty of California, Inc. - Carlsbad, CA
The Southern California Relocation Dude

Hi Craig:

What an awesome tutorial! Your posts are always so informative and helpful around technology for us non-tech folks. Thank you!

Jeff

May 02, 2021 08:29 PM
Craig Daniels

appreciate you saying so Jeff! thanks :)

May 03, 2021 11:21 AM
Sandra Mathewson
RE/MAX 4000 - Grand Junction, CO
CRS,ABR,SRES,GRI,CDPE,PSA,SFR

Thank you Craig!  You have been helping me on AR for at least 16 years now!

May 03, 2021 06:28 AM
Craig Daniels

We've worked together so long that we used to have a google+ logo in your signature! hahaha, ok, well in tech terms that's pretty long!

May 03, 2021 11:37 AM
Sharon Tara
Sharon Tara Transformations - Portsmouth, NH
New Hampshire Home Stager

Well done as usual Craig. I'm sure this will be very helpful to so many!

May 03, 2021 06:43 AM
Craig Daniels

Thanks Sharon! I hope to refresh all the AR basics in this series of posts. Helpful to those getting started.

May 03, 2021 11:38 AM
Randy Mitchelson,APR
Marketing Advisor & Squeeze Mortgage - Bonita Springs, FL
First Impressions are made at First Click

Very well detailed tutorial. Thank you.

May 03, 2021 08:54 AM
Craig Daniels

Thanks Randy! I appreciate the comment.

May 03, 2021 11:38 AM
Kathy Streib
Room Service Home Staging - Delray Beach, FL
Home Stager - Palm Beach County,FL -561-914-6224

Hi Craig- have I told you lately how much I appreciate your tutorials!!! And I actually learned something new...under "Style" I didn't know that you could eliminate that. I've found that sometimes when doing a wraparound, there was too much space against one edge. 

Remember how you showed us how to insert a text box in our posts?  I've been trying but I'm not always successful. You said we can use it to highlight a phrase or words. 

May 03, 2021 01:55 PM
Craig Daniels

awesome Kathy!! I was hoping there would be a few that would benefit from the bonus tips :) And the pull quote styling is something that needs a 2021 update version for as well. thanks for mentioning it!

May 03, 2021 04:21 PM
Sheri Sperry - MCNE®
Coldwell Banker Realty - Sedona, AZ
(928) 274-7355 ~ YOUR Solutions REALTOR®

Hi Craig Daniels,

This is a great post for those who have been challenged with the photo option.  Creating a margin space for wrap-around text really helps.

May 03, 2021 04:47 PM
Craig Daniels

thank you Sheri! adding margin makes it look much better once people discover how to do that (hopefully this helps many) :)

May 04, 2021 06:41 AM
Kimo Jarrett
WikiWiki Realty - Huntington Beach, CA
Pro Lifestyle Solutions

Great post yet very challenging for me to absorb. It will take some time to learn the process but thanks for sharing your insight and illustrations.

May 04, 2021 01:42 AM
Craig Daniels

Thanks Kimo for taking the time to review the points in this post. I hope you get a takeaway or two from it. :)

May 04, 2021 06:42 AM
Lynn B. Friedman CRS Atlanta, GA 404-939-2727
Atlanta Homes ODAT Realty - Love our Great City - Love our Clients! Buckhead - Midtown - Westside - Atlanta, GA
Concierge Service for Our Atlanta Sellers & Buyers

THANK YOU!!!!  I really needed instructions on how to put text along side my photos. I was able to do it before these AMAZING WONDERFUL UPGRADES so I really needed to learn the new way! Love learning from you - Lynn

May 06, 2021 06:52 PM

What's the reason you're reporting this blog entry?

Are you sure you want to report this blog entry as spam?