Working with Images in the Post and Page Builder | BoldGrid
If you have any questions after reading this article, please be sure to post a comment at the bottom of the page. We're more than happy to help!

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.

Adding Images

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 an image to add a Title, Caption, Alt Text, or Description
  • The Attachment Display Settings control Alignment, Links, and Size
  • When finished click Insert into Page to see your image in the Editor

Replacing Images

Replacing images is easier than ever with BoldGrid and our Crop Image option. This feature maintains the aspect ratio, which means you can quickly swap images without harming your layout. Below are the steps for replacing images with the Post and Page Builder.

  • Click on the image you want to Edit or Replace
  • A camera icon is added to the Drop Tab, but you can also use the built in WordPress Image Editor toolbar
  • Click on either camera icon to replace the image
  • In the Media Library, select the image you wish to replace it with
  • In Attachment Display Settings, select the full size option and link preferences of the image
  • Click Replace
  • You can crop the image before inserting it into your page, or choose not to by clicking Skip Cropping.
  • If you decide to crop the image, checking the FORCE ASPECT RATIO option will keep the same aspect ratio as the original image

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

Congratulations! You now know how to work with all the image options available from the Post and Page Builder by BoldGrid.

 

SIGNUP FOR

BOLDGRID CENTRAL  

   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

10 thoughts on “Working with Images in the Post and Page Builder

  1. How to link an image to an external site? Say I have an image of a book cover and want to link to the publishers site? I went into Edit the image but did not seen an option as i would for turning text into a link. Thanks… Paul. Also, is it possible to feed an external blog onto it’s own page in my site? Or the posting having to occur first on my site? The idea would be that the posting I make on, say, Medium would also show up on my site’s blog page. Thanks for all the help…

    • Hello Paul-
      Probably the easiest way to accomplish this is to click on the image in the editor, and use the link shortcut Ctrl-K (or Cmd-K on a mac) and paste the link into the pop-up box that comes up. Alternatively, you can click on the image and click the Edit/Pencil icon. That will bring up the Image Details screen, where you’ll find the “Link To” option. Select Link To: Custom URL from the drop-down selection menu, and paste the URL into the new field that shows up.

  2. hi, how do I move an image further down the page? I have a column with 1 image above another and want the bottom one moved further down. there is nowhere i can click to place the cursor and click enter for paragraph.
    If i click and drag the image disappears. Thanks

    • Hi Carolyn-
      That’s a great question. One easy way is to simply use the “Image Title Attribute” which will appear when a user hovers over it (hover over this image to see what it looks like):
      Using a Title Attribute on an image
      If you’re looking for a more polished effect, you can use Custom CSS to make your image links look great. Here’s a video I created to walk you through that process:

      Here’s the CSS code I used in the video:
      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; }

  3. I tried to follow your advice in this post, but could not achieve what I wanted. I want the images on the page to be thumbnail-sized, but when a viewer clicks on the image, it would take them to an attachment page with a full-sized image.

    I tried changing Attachment Display Settings like you say above. I selected Size to be Full Size. What happened was the image inserted into the page was full size, but in the attachment page it was still thumbnail-sized. Which was the opposite of what I wanted.

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

    Thanks!

    • Hello E-
      Thanks for the great question. By default, WordPress uses the medium image size on the attachment pages- which is to say that they’re 300 pixels wide for most themes. 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);

  4. That is not what I am looking for. What I want to know is how to make the image non-clickable. in the BG Sandbox that happens automatically, but on the site it does not. Right now all my images are clickable — going to their media page and I do not want that. thank you.

    • Hello Zusu-
      You can change your image links from “Media Page” to “None” by editing the image, and changing the “Link To” field. Here’s an example screenshot:
      Edit Image with the Pencil IconChange the

Leave a Reply

Your email address will not be published. Required fields are marked *