Resizing Images

What is it?

Once you have embedded an image onto a page (view tutorial 1a. Embedding Images) in your website you can control the size of the image by using the engine code provided – basically, you can resize an image without uploading a bigger image!

Tutorial: Resizing Images

Step 1

Step 2

Click the tab [Edit] to edit your page, locate the “Home” page as this is where we previously embedded an image.

Step 3

Find the line of text that is calling the image:

{butterfly.jpg}

Which displays on screen your original image:

Step 4

Now to resize the image, simply add a comma , after the file extension (in this example the file extension is .jpg) and enter a percentage value, for example:150%.

The engine code should be similar to this:

{butterfly.jpg,150%}

Which displays on screen the resized image:

As before, once you have inputted the Image code click [Save changes] and then have a look at your website’s Home page.

Please note: you will need to refresh the page of your website to view the changes.

Step 5

This method also works to downsize the original image by inputting a lower value, for example 50% - so that the resized image will be displayed at half the size of the original image.

In this example the engine code would be similar to this:

{butterfly.jpg,50%}

Which displays on screen the resized image: