Images or graphics play a large role in catching your reader’s eyes and attention, but the styling of your images can make an impact, too. Let’s dive into a couple of ways you can style images with borders, backgrounds and padding, or display multiple images side by side.
Setting up your image using the Image/Media panel
The Image/Media panel is the most common way to add images to a blog post. From the editor, you can place your cursor where you want your image or media file, and click “Add Media” button. This opens the Image/Media panel, which provides a thumbnail preview of the image you have uploaded or selected. Also, it has a section to fill in alternate text, captions or descriptions for the image, and a section to choose how large the image should be displayed, where you want our image in relation to text, and where it should link. Use this panel to place your image or images where you want them, and let’s get started with customizing.
Adding a border, padding, or a background
If you want to style your image to sport a new, colored background or border, or add some extra padding between your image and the text surrounding it, you can add a few CSS tags to your image tag and presto! You will need to insert your image first, switch to Text tab view and locate your image tags. Look for tags that start with an <img src=" and end with />. Once you’ve found this, look for the style=" tag. If your image doesn’t have this, add the style=" in after the <img src="http://yoursite.com/yourimage". Now, you can add in your desired background, border, or padding tags.
To add a background, use:
style="background: color;"
To add a border, use:
style="border: 1px;"
To customize the padding around your image, use:
style="padding:20px;"
Try out a few different colors, and pixel thicknesses to figure out what settings you want to use for you images.
Featuring multiple images side-by-side
Another useful way to style your images is to set them to display side-by-side. WordPress places multiple images vertically by default, but here’s one way you can style your images to display side-by-side:
- First, size all of your images to the same vertical dimensions. You can do this with your photo editing software, or use a free image editing service online, like Pixlr.com or PicResize.com.
- Then, insert the images where you want to use them. They will display like the images to the left, by default.
- Next, click on the “Text” tab in the post editor and find the image tags for each image.
- You may want to separate each set of image tags with a few returns to make it easy to see the tags for each image.
- Then, add the following div styles around your first image tag.
<div style="text-align:left"> <div style="display: inline-block; margin-right: 1px"> <img src="YOUR FIRST IMAGE HERE"/> </div>
- Add this to images in the middle.
<div style="display: inline-block; margin-right: 1px"> <img src="YOUR MIDDLE IMAGE HERE"/> </div>
- Add this to the last image.
<div style="display: inline-block; margin-right: 1px"> <img src="YOUR LAST IMAGE HERE"/> </div> </div>
- Save your draft and preview.
Your images should look like this.
If you want to learn more about image styling or get other ideas, here’s a couple of resources for you:
https://codex.wordpress.org/Styling_Images_in_Posts_and_Pages:
https://codex.wordpress.org/Wrapping_Text_Around_Images
Have a better way or creative ideas for styling your blog images? Share them with us.
Vanessa is responsible for coordinating conference sponsorships and creating marketing collateral to help support our team and public-facing story.