SINGLE IMAGE SIZING IN VISUAL COMPOSER

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.

Step 1: Edit page

Let’s go to our back-end editor. To do that, click on Edit Page on the top menu bar of your

WordPress.

Step 2: Edit element

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.

Step 3: Single Image Settings

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.

Output

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

Step 4: Change Column Layout

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.

Output

Row layout now changed

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

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. Afterwards, click Save Changes and close the Single

Image Settings. To preview our changes, click on Preview Changes.

Output

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

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 500x200 pixels. 500 is the width of the image and 200 is

the height. So, this will give me a 500x200 pixels image.

Output

Now, as you can see, the image is now set to 500x200 pixels. We’ve also got a bit more room on the

sides because the column’s width is wide than the image’s size.

NOTE:

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