How to Insert Photos Into Your Blog Post

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

Follow My ActiveRain Blog
See when new posts come out!

Read More Blog Posts

My YouTube Channel

About Me

Email Me

I appreciate every new subscriber
to both my ActiveRain blog AND
my YouTube Channel!

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!

PS - get ready for some homework… :) 

Comments (34)

Myrl Jeffcoat
Sacramento, CA
Greater Sacramento Realtor - Retired

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
Sacramento, CA
Greater Sacramento Realtor - Retired

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 (Edward) Silva, 203-206-0754
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
Watermark Capital - 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!


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

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
Retired 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
Cypress, TX
Home Stager/Redesign

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
Cyber Properties - 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
Craig Daniels

awesome Lynn, I'm very glad that you found my notes useful :)

May 07, 2021 07:02 AM
Joan Cox
House to Home, Inc. - Denver Real Estate - 720-231-6373 - Denver, CO
Denver Real Estate - Selling One Home at a Time

Craig, thank you for showing us how to handle our photos.  You are a great resource for us.

May 15, 2021 06:00 AM
Craig Daniels

thanks Joan! hopefully a few pointers here useful to newbies as well as experienced ones too :)

May 18, 2021 10:09 AM
Steve Schultz
KW Smart Lakeland - Lakeland, FL

Hi Craig, this is fantastic information and written in a way that even I can understand it -- thanks for sharing!

-- Steve

May 23, 2021 11:50 AM
Craig Daniels

love to hear that Steve, thanks!

May 23, 2021 03:46 PM
Roy Kelley
Retired - Gaithersburg, MD

Thank you very much for sharing your experience and your advice.

Have an outstanding summer.

Jun 18, 2021 08:46 AM
Craig Daniels

I'm very glad to assist. Thanks Roy, enjoy your summer too!

Jun 18, 2021 12:13 PM
faye schubert
Retired - Branson, MO
Living the Branson Lake Life

Thank you for this detailed explanation , screen shots and value to the photo descriptions. I've found those descriptions are the MOST overlooked item, but the most valuable for SEO.

Dec 04, 2021 07:05 AM
Craig Daniels

Thanks Faye. Yes the photo file name and alternate description can have great SEO value. A small investment of time is all that is required to make this work in your behalf!

Dec 04, 2021 07:20 AM
Esperanza Butler® 818 926 5425
Your Home Sold Guaranteed Realty - West Hills, CA
Homes For Sale in West Hills, Ca (818) 926-5425

Hello Craig, and thank you for your helpful post. 

As I have been back and forth here at the AR, many times I forget the blog functionality. I am glad I found your post and for sure I will keep following you.  Thank you again and  Happy New Year!

Jan 01, 2022 07:44 PM
Thomas J. Nelson, REALTOR ® e-Pro CRS RCS-D Vets
Big Block Realty 858.232.8722 - La Jolla, CA
CEO of Vision Drive Realty - Coastal San Diego

Awesome post and a huge help - thank you Craig Daniels 

Sep 08, 2022 06:51 AM
Jerry Kays
eXp Realty inc. - Rancho Murieta, CA
Experience Counts 35+years Sales/Listings/Owner

Great post Craig.  I'm not new but have been gone for a bit.  I am not very technical when it comes to social media so I'm trying to learn all I can. It seems you have this stuff figured out, I know I need a lot of help so I'm glad I found your post.  I'm sure I will have basic questions.  Sometimes the basic instructions will confuse me so I might need some explanation from time to time.  I hope that's ok with you. I'm always ready to learn.  Thank you Jerry Kay

Sep 12, 2022 08:57 AM
Craig Daniels

the best thing to hear is that someone is trying! let me know if you need help

Sep 12, 2022 12:38 PM