1. Home
  2. Tutorials
  3. Tips and tricks for getting started
  4. Add an image to your page
 

Photography

Add an image to your page

No matter your type of computer, amount of storage, and your level, we are going to walk through the process of inserting an image into a page by using the page builder tool or using the widget for images.

 

We urge you to use the Image widget for many reasons, instead of adding the image using the visual editor.

  • The use of widgets allows you to edit complex image settings and page layout without you having to delve into code html (for example having text and an image side by side).
  • You can edit the size of each block.
  • You can change the order of the columns and blocks easily.
  • The address of the image is independent from that of the site. If you use the Image widget, your images will continue to display even if you change the adress website (so that when you want to have your own domain name nothing is lost).
  • To learn more about the way to manage pages with blocks and widgets, we recommend reading the tutorial : Page creation.

To add an image using the widget, add a block with one or more columns.

Select the Image widget(1) and the click on Configure. (2)

Untitled design 2

If your image, or images, are on your computer...

If your image, or images, are on your computer, you will need to upload them to your storage space. Click on Add an image. In the window that opens you will then click the Chose a file. Select the image you want and click Insert. Once the image saved in the file storage you can :

  • Edit the title of the image (by default the same name as the title)
  • Edit the image target link : the size of the image that opens when you click on the image. If you do not want an image to open choose No link.
  • Choose the size of the image that will be displayed in the page, (avatar, thumbnail, original, large medium or custom). These can be easily changed after.
  • Choose, also, the alignment of the image(where the image appears in the block : left, center, right).

Click on the image to make it bigger to see what a target link is, and to se what the image edit screen looks like.

Image Screen

Insert an image using the visual editor

Whether your image is on your computer or already in your file storage, you can insert using your Visual editor by clicking on the button in your tool bar Image.

Click Image (1) then choose the image or click Add an image(2) and make sure the image is in the file storage. Select your image and then click Insert. Once the image is uploaded and inserted to your page you can :

  • Edit the title of the image (by default the same name as the title)
  • Edit the the image target link : the size of the image that opens when you click on the image. If you do not want an image to open choose No link.
  • Choose the size of the image that will be displayed in the page, (avatar, thumbnail, original, large medium or custom). These can be easily changed after.
  • Choose, also, the alignment of the image(where the image appears in the block : left, center, right).

Click on the image to make it bigger to see what adding an image wit hthe vidual editor looks like.

 

vised

Attention ! You cannot drag and drop an image into the visual editor. You will be the only one to see this image, from your editor, and it will damage the rest of your page content. The image must be hosted on a server (the file storage area) if you want it to display on your page.

Your image is online, but not in your storage

If the image is already online, it has a URL that you can use without having to place it in your storage.

You can easily copy the address of the image. Two simple ways do this :

  • Right-click the image and choose Copy image URL.
  • Right-click the image, then click Open image in a new window and copy the address in the address bar in your window.

Using images that do not belong to you is illegal. You will always need to ask permission from the owner before using their image.

Once the URL of the image is copied. From your tools in the Visual editor, click on the button Image. Paste the address if the image and click on Insert;

The image will appear on the page with the original size. You can always modify the size and properties of your image:

  • click on the image you want to edit, click on the Image button and modify the properties of your image
  • double clicking the image and arriving at the edit screen

From here you can edit the advanced features or change the size, and add a link. Everything you need to edit your image is available here !

  • When using the visual editor, remember that your images will look different on the page. So use the image properties to ensure you image appears where you want on the page, for example hspace or vspace, will determine the gap between texts and images (if you try to do the same using the space bar, it will not work).
  • To avoid problems that could arrive with the image formatting we encourage you to use the Image widget, and you can add as many as six widgets on the same line by adding a column. To know more about this method, allowing you to create complex page layouts easily, we invite you to look over the tutorial : Use content side by side.

Deleting an image

Once your image is on the page, if you delete the image from your file storage, the image will no longer appear, and instead there will be a red cross where the image once was. So you should not erase the image from your storage space if it is used on your website.

  • If you wish to delete an image inserted with the Image widget, it's simple. As with every widget, you can click on the red x button and erase the column.
  • If you wish to delete an image inserted in the Visual editor, select the image by clicking on it and hit the DEL key on the keyboard.
  • Finally, if you wish to permanently delete an image from our servers, you should go through the file storage (in File storage > images) and delete the image you wish.

Using block and columns, add you images easily