Working with Images in the Post and Page Builder

Images help to relay your message to visitors and it is recommended to include images in your website content. The Post and Page Builder has features that make working with images in WordPress painless, which we will outline for you in the following guide.

How to Add Images in WordPress

Images are a key part of web design and for SEO and visibility purposes it is important to have at least one image per page. Below are the steps to add a new image to a Block.

• Click in the column where the image will go
• Click the Enter button to add a new line
• Click the Add Media button below the Page Title box to open the Media Library modal
• From here you can select an image or click Upload Files to add a new one to the Media Library
• Click on your desired image to open the Image Details screen
• From here you can add a Caption, Alt Text, control Alignment, Links, Image Size, and more. All these options are discussed in detail later in this article
• When finished click Insert into Page to see your image in the Editor

How to Replace Images in WordPress

Replacing images in WordPress is easier than ever with the Post and Page Builder and our Crop Image option, however you can always use the native replace image feature in WordPress.

• Click on the image you want to Edit or Replace
• Click the Camera Icon that is added to the DropTab

• Or, you can use the WordPress Image Editor edit pencil icon

• Either way, you will end up in the Media Library. From here, select the image you wish to replace it with
• Adjust the Image Details as needed, these options are explained later in this article
• Click Replace

Next you will learn how to crop the image.

How to Crop Images in WordPress

Crop an Image Already in the Media Library

If you want to crop an image previously uploaded to your Media Library, click the edit pencil icon above the image to open the Image Details.

From here, click the Edit Original button under the image.

This is where you can adjust the image as needed. Be sure to click the blue Save button under the image when done, then click the blue Back button in the lower right to close the panel.

Crop an Image While Uploading

When replacing an image with the Post and Page Builder, you can crop images while uploading. This feature maintains the aspect ratio, which means you can quickly swap images without harming your layout. To use the Post and Page Builder cropping tool, first click the image and then click the camera icon in the DropTab.

After selecting or uploading a new image, if the dimensions are different than the image you are replacing, you will see a Crop Image screen, as shown below. By default the Force Aspect Ratio box is checked to ensure your layout isn’t thrown off. You can always uncheck the box to replace the image without cropping and use the new image dimensions.

How to Update the Image Details

What is Alternative Text?

Each image’s alternative text, or alt text for short, displays on the page while the image finishes loading. They are read by screen readers and also help with website SEO. It’s highly recommended to include alt text on all images.

Add an Image Caption

You may give each image a caption if you would like. Each theme will display an image caption differently.

Change Image Alignment

• Left  – image appears on the left of the theme container boundary and other content will wrap around the image
• Center – image will be in the middle of the screen, in its own row
• Right – image appears on the right side of the theme container edge and other content will wrap around the image
• None – the image will be in it’s own row on the left side of the screen. Other content will not wrap around the image

Choose Image Size

WordPress Core has max image dimensions for each size, which are listed below, but some themes may override these defaults. When you upload an image, WordPress automatically creates a version of the image in each of these sizes. The size of the final image for Thumbnail, Medium, Medium Large, and Large will vary depending on the height of the original image.

• Thumbnail – 150px by 150px
• Medium – 300px by 300px
• Medium Large – 768px by 768px
• Large – 1024px by 1024px
• Full – actual size of uploaded image. Be careful how wide of an image you upload, take the size of your theme’s container into account. Using a large image increases page load speed.

Update Image Links

• Media File – the image will open larger on the screen, in the same window
• Attachment Page – the image will show on its own page, with the Image Title used as the page title
• Custom URL – you can add any link to an image, either on or off site
• None

Advanced Options in Image Details

Image Title Attribute

This text appears when a user hovers over the image.

Image CSS Class

Any custom CSS added here will be added to the image itself.

Link Rel

This advanced feature is used to control how image links are used for SEO purposes. Any standard HTML link rel attributes can be used.

Link CSS Class

These classes will apply to the image link.

Image Design

BoldGrid includes design shape options for images. The following steps will explain how to add custom designs to your images.

• Click on the image you want to change
• In the Drop Tab toolbar, select the Gear icon labeled Image Design
• You will see a list of Sample Designs to choose from or click Customize Design to create your own

Image Filters

BoldGrid offers Image Filters that allow you to change the way your images appear. This is helpful for making images work with your selected color scheme without opening an external image editing program.

• Click on the image you want to change
• In the Drop Tab toolbar, select the Magic Wand icon labeled Image Filters
• You will see a list of Filters to choose from
• Click Custom to create your own unique filter

WebP Images

As of WordPress 5.7, you can upload WebP format images into the media library just like a jpg, png, or pdf file. WebP images are on average 30% smaller than jpeg and 26% smaller than png images in file size, without losing image quality. Most modern browsers support WebP, including Chrome, Firefox, Edge, and Opera.

There are many free online tools available for converting images to WebP. If you are converting less than 25 per day, Cloud Convert is a good option. Depending on the size of your site, it may be worthwhile to convert and re-upload all your images. Otherwise you’ll need a plugin active to serve WebP images instead of the file format uploaded to the Media Library.

FAQs

How do I make the image be full-size in the attachment page?

By default, WordPress uses the medium image size on the attachment pages. In order to change this, you’ll need to either use the Code Snippets Plugin or use a child theme to create a custom filter. You can paste this code into a Code Snippet or into your Child Theme’s functions.php file to accomplish this:
function bgsc_full_attachment_size( $attachment_content ) {
if (is_attachment()) { //only change image size on attachment pages
return sprintf( '<p>%s</p>', wp_get_attachment_link( 0, 'full', false) ); //Change 'full' to 'large' if needed
}
}
add_filter( 'prepend_attachment', 'bgsc_full_attachment_size', 10, 1);

How do I set up my images so text is displayed when one scrolls over it?

The easiest way to show text on an image while hovering is to add an Image Title Attribute, however the styling of this text will vary per theme. If you’re looking for a more polished effect, you can use Custom CSS to further fine tune your design. Here’s some example code:
figure.hover-caption-display {
position: relative;
overflow: hidden;
}
figure.hover-caption-display > figcaption {
position: absolute;
left: 0px;
right: 0px;
height: 30px;
line-height: 30px;
bottom: -60px;
text-align: center;
background: rgba( 256,256,256,.8 );
color: #000;
transition: bottom 500ms;}
figure.hover-caption-display:hover > figcaption {
bottom: 40%;
transition: bottom 500ms; }

Congratulations!

You now know how to work with all the image options available from the Post and Page Builder, BoldGrid’s WordPress page builder. Next, you may want to learn how to make a slider.