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!
Comments (34)Subscribe to CommentsComment