Post on 31-Mar-2018
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