Single Image Sizing with Visual Composer

Single Image Sizing with Visual Composer

Get a copy of the transcript of this guide (pdf)

Edit a page using the back-end editor of the Visual Composer

single-image-sizes-in-visual-composer-1

On our sample page, we’ve got two different sized images. We’ve got the large one on the right and a thumbnail on the left. Let’s try to change the size of the image on the right side in a way that it would fill the whole width of the column. Let’s go to our back-end editor. To do that, click on Edit on the top menu bar of your WordPress.

Hover your mouse over the right image and click the pencil icon

single-image-sizes-in-visual-composer-2

To edit the image, hover your mouse over the image that we want to edit and a green bar will appear. Click on the pencil icon.

Single Image Settings will pop-up – change image size from thumbnail to large

single-image-sizes-in-visual-composer-3

As you can see, the size of the image on the right image is ‘thumbnail’. So what we’re going to do is to change the image size from thumbnail to large. Make it all in lowercase then press Save Changes. So let’s preview our changes by pressing Preview Changes.

Image now set to large

single-image-sizes-in-visual-composer-4

Now, you’ll see that the image on the right got bigger.

Change row layout from three columns to two

single-image-sizes-in-visual-composer-5

Let’s have the layout of our row into two columns. To do that, click the option ½ + ½. So now we’ve got two column pictures. Let’s preview our changes again.

Row layout now changed from 3 columns to 2

single-image-sizes-in-visual-composer-6

As you can see, the pictures are still filling the entire column width. The trick with this is that the large image size is approximately 1024 pixels wide while the columns’ width is 585 pixels only. Now that the picture’s width is greater than the column’s width, it will automatically shrink to exactly fit into the columns entire width.

If we were going to change that picture’s size to medium, which is 300 pixels wide in default WordPress settings, will definitely leave empty spaces inside the column.

Change image size from large to medium

single-image-sizes-in-visual-composer-7

Let’s try to change the image size from large to medium. The same process as before. Hover your mouse over the image that you want to edit. Click on the pencil icon inside the green bar. Then, change the image size from large to medium. Afterward, click Save Changes and close the Single Image Settings. To preview our changes, click on Preview Changes.

Image changed from large to medium

single-image-sizes-in-visual-composer-8

As you can see, the image is leaving big space in between. Setting the image to medium will usually work to columns set to 1/3 or ¼.

Setting the image size approximately

single-image-sizes-in-visual-composer-9

If you’re going to set the size of the image, then you need to know the exact dimension that you want to set. For example, let’s set the size to 500×200 pixels. 500 is the width of the image and 200 is the height. So, this will give me a 500×200 pixels image.

Image now changed from large to 500×200 pixels

single-image-sizes-in-visual-composer-10

Now, as you can see, the image is now set to 500×200 pixels. We’ve also got a bit more room on the sides because the column’s width is wide than the image’s size.

These are the dimensions of WordPress’s default image sizes:

  • thumbnail – 150 x 150 pixels
  • medium – 300 x 300 pixels
  • large – 1024 x 1024 pixels
  • full size – image’s full size