Adding an Image to a Web Page in Virteom

This article will explain how to upload an image into your Virteom powered website.

Login

First login to your website. You should see the Virteom administration toolbar at the top. Then click on the page in your site you want to add the image to.

Login

Make Page Editable

Make the page editable by:

1. Clicking on the "Editor" option on the top toolbar.

2. You should see an editable zone, this will have a dotted outline around it. In here you can add text and images to your website.

Make Page Editable

Focus your Cursor

Place your cursor inside the editable zone where you want the image to appear.

Focus your Cursor

Click on Add Image Icon

Click on the add image icon. It will look like a little photo of a house and it's next to the flag icon. This will open a new window.

Click on Add Image Icon

Image Properties Box

After you click the icon this image properties box will show up. Now you need to browse for the image that you want to place on the page. Click the "Browse Server" button to browse for an image.

Image Properties Box

File Browser

Once you click "Browse Server" the Image File Browser will appear. In here you can either select an image that you previously uploaded or you can upload one from your computer to the site. We are going to show you how to upload one from your computer. Click "Upload File".

File Browser

Upload a File

After you click "Upload File" a new box will appear. This is the file uploader box. To browse for a file on your computer click the "Browse File" box.

Upload a File

Select File(s)

Now go tot he folder on your computer that has the image that you want to upload. You can select one or more images and upload them all at the same time. Once you find the image(s) click the "Open" button to load them into the uploader window.

Select File(s)

Verify the Images

All of your images should be ready to upload. When you are ready, click the "Upload" button to get the images to the server.

Verify the Images

Find Images

Now that you've uploaded the images, browse to the folder that you loaded the image(s) to and select the image by clicking on the blue check next to the image to select it to insert into the webpage.

Find Images

Add Alternative text to the image

After you click on the check the dialogue window will show your image. Fill out the Alt text with an image description for better SEO. Then click the "OK" button to finish.

Add Alternative text to the image
 

floating images to the right or left

After you load your image in, you may find that you want it to appear to the right or left of your text. In web development, we call this floating an image. 

Floating images to the right or left of text is relatively easy in Virteom CMS. When you're on the Image Properties Screen (in the steps prior to this) there is an option for Alignment on the bottom left-hand side of the window. 

Alignment of Images in Virteom CMSFloating Images  | Virteom CMS

 

Floating images to the left

If you would like to float an image to the left, choose 'Left' from the Alignment box.

Floating Images to the right

If you would like to float an image to the right of your text, choose 'Right' from the Alignment box.

adding space

Adding Horizontal Space to Photos in Virteom CMS Adding Space in Virteom CMS

Adding whiteSpace to the left or right of your photo

If you find that the text is too close to the left or right of your photo, add in 'HSpace'. H Space is short for Horizontal space. The number entered into this box goes by pixels. 

Adding whitespace to the top and bottom of your photo

If you find that the text is too close to the top or bottom of your photo, add in 'VSpace'. V Space is short for Vertical space. The number entered into this box goes by pixels.

You're Done

Now your image is on the webpage. Make sure to hit "Save Page" to save the image to the webpage. That's it you are done.

Want to know more about images in virteom cms? 

Check out How to Add Images and Other Photo Tips by Clicking Here

Want to know how to resize images the right way? Click Here


Article revised 06/26/2018 by Olivia Justice

Most Recent

How To Set A Social Share Image for a Page

By Alesha Wireman
May 01, 2020 Category: Learning, Modules, How To

Need to know how to you upload a social share image on your RocketSite? It's easy! You can upload or change a social share image for every individual page on your website in no time!

How to Add, Edit and Delete Photos Using the Masonry Module

By Olivia Justice
March 23, 2020 Category: Learning, Modules

Is your Virteom powered website utilizing the Masonry Photo Module? Adding new photos to your gallery is really simple and even allows you to upload multiple images at one time. The one real advantage of using the masonry module is so that you can display images in groupings or categories on a singular webpage. This allows you to separate images out into different galleries so like photos can appear together. For example:Say youre a landscaper and you have a webpage entitled Hardscapes. You may want to output multiple galleries on this single page to break out each type of hardscape youve done: walkways, patios, pergolas, steps, fire pits, etc. The masonry photo module allows you to accomplish this. You can set multiple categories, and multiple galleries in that one category - all to output on one single webpage. In this how-to article, we explain how to add a new category, add a new gallery, edit an existing category, edit an existing gallery (adding images to an existing gallery), and

How to Create Private Pages with Virteom

By Olivia Justice
August 21, 2019 Category: How To

Sometimes you don't want everypage on your website accessible to the general public. That's why we offer the ability to create private pages that are only accessible to a designated user.

Address

  • Virteom LLC
  • 7017 Pearl Road, PO Box 10
  • Middleburg Heights, OH 44130
  • Come visit us on the 2nd Floor!