Online Documentation

Uploading and Retouching Images

Learn how upload images to your website and use the internal tools to retouch your uploaded images.

6 minutes

Show Transcript

Images can be uploaded to your website from two different places

You can upload an image from within an article, product, event, or other item that takes an image. Or, you can upload an image from the images module.

Before you upload an image, check to make sure you’ve done the following:
Size your images in as large a size as possible, without exceeding constraints of about 1000 x 1000 pixels.

We'll start this tutorial by uploading an image from within an article.

We're in the admin panel and we're going to start at All Tasks. then click on articles.

From the list, find the article you want to add images to and click it to open it.

You're in the article editor.

Click on the media tab – that’s where you add media to your article and that’s also where you can upload images.

Find the upload link above the images pane and click it

In the upload window that appears, find your file or files (you can choose multiple files) , select them, and click open to upload them to the server.

When the upload is complete, your file displays in the image pane.

When you upload, the system filters your images to show the most recently uploaded images.

If you want to see more, click a different filter option, like view all.

If you wish to add your photo to your template’s designated place, just drag it to the display pane.

You don’t need to click save to save the upload, but if you moved an image to the display pane and want it to display on your article, click save.

Now, let’s look at uploading from the Images module.

We’ll return to All Tasks.

In the FILE menu, click Images.

In the Images list screen, right above the images, you’ll see the upload link. It looks just like the link in articles and you use it in just the same way.

So,  click the link.

In the open window, we’ll choose our file or FILES and either double click them or select them and click the open button.

You can see the image is uploaded and you may notice that it is turned sideways.

Ideally, you should prepare your image so it’s the right size and orientation BEFORE uploading, but if you find you need to retouch your image, you can use the tools within LVSYS to make some modifications.

Let’s take a look at those tools.

Click the image to open it for editing.

The first thing we want to do is rotate the photo to its proper position.

The tools are located below the image.

We’ll click rotate left to rotate the image 90 degrees counter-clockwise.

You can also use the retouch options to crop your images. We’ll crop this picture to minimize the foreground.

Click crop in the toolbar.

Notice that your pointer turns into a cross hair.

Take that cross hair and click and drag a selection around the part of the image you want to crop to. 

You can also click and drag on the resize handles to change the size of your selection.

When you've got your selection the way you want it, click apply crop on the toolbar to finalize the crop.

And remember to click save to save the changes.

If you do not want to save the changes, click one of the cancel options. Once you save, your changes cannot be undone.

Another modification you might want to make is to customize the thumbnail that displays below the image that appears in a slideshow.

The system choose a default, but you can change the position and the display area of the thumbnail.

See the little thumbnail box? We’re going to move that box to a different part of the image.

And we're going to change the area that's displayed by dragging on the resizing handles.

When you've got your thumbnail positioned just the way you want, you need to click the “Use Custom Thumb” box to tell the software to use your modified thumbnail.

Finally, you can enter a bit of descriptive text about your image, so if your image does not display for some reason, the text displays and users can understand what was supposed to appear.

Enter your text in the description field at the bottom.

And remember to save the changes that you've  made.

For more help and tips, go to help.lvsys.com.

And, as always you can contact us by email at help@lvsys.com.

Looking for more? See what Buildable and the LVSYS CMS can do for you today:

Web Design and Web Development by Buildable