Reference library

Article number: 301110

The Image Picker Window

The Image Picker window allows you to select a picture and place it into a specific location on your page. Pictures are stored as image files in the Sitekit system and can be viewed on the Asset Tree.

Using the Image Picker you have the choice of either selecting an existing picture from your Asset Tree, or uploading a brand new picture into your Asset Tree, and then using it.. 

Navigation and Selection of Existing Images

When you first open the image picker, you're shown a list of folders in the left hand panel, as shown below. When you navigate to the folder you want and click on it  the folder will open, displaying any pictures or nested subfolders contained in the folder.

To navigate further down the tree, keep clicking on subfolder names until you find the one you want. Once you're in the right folder, click on a picture to select it. To navigate back up the tree, click the UP icon in the tree. This will reopen a higher level of the tree.
Clicking on the very top folder will do nothing, because there's nothing above it to open.

The easiest way to select an Image is to switch to thumbnail view (by clicking the small thumbnail icon, top right). The graphic below shows a thumbnail display. As you can see, it's probably easier to identify a specific picture by its thumbnail, rather than by its filename. However if you prefer filenames, then you can click back to a file listing view (the icon works as a toggle between the two views).

 

Cropping Images

In older versions of Sitekit, if you wanted to crop an image you had to manually type in the new left-right-bottom-top numbers. In 9.3 and later you can crop an image by  simply dragging the mouse. In the example below,  a wide picture has been cropped to centre on the rider, while the unimportant blank space to either side has been cropped.

Note: The original picture is not cropped. It is left unchanged. This operation only affects the way the image is displayed in this particular instance.

When you have selected and (optionally) cropped you pricture, click the OK button to drop it into place on your web page.

Removing a Picture

If you want to remove a picture that you've already positioned, click inside the picture to open the Image Picker. Now click the Remove button on the top left of the Picker screen.
The picture will be removed from the page (but will remain safely on the asset tree, for future use) and the Image Picker window will close.

 Step by Step

Click inside the Choose an Image button where you want the picture positioned.  The Image Picker now opens.

  1. On the left hand of your screen you'll see the Asset Tree. Navigate to where your target picture is, and then click on it to select it.
  2. Optionally crop the picture.
  3. Click the OK button, and the picture will be placed on your page.

There are some extra options.

  • To link the picture to another web page, type the address of the web page into the URL box.
    When someone clicks on the picture, the linked web page will open in a new window. If you want the linked web page to open in the current window (replacing the page with the picture on it) click the current window radio button.
  • If the selected picture has a caption associated with it you can tick the Show caption box. The caption will be displayed below the picture on your page. A caption is a short piece of text that can be displayed below a picture.

 

Uploading a New Asset

If the picture you want to use is not one of your current assets, then the Image Picker allows you to upload an image and add it to your assets.

  • Click on the Choose an Image button to open the Image Picker.
  • Select the Folder into which you wish to store the new picture.
  • Click the Upload button near the bottom of the Picker screen. The screen shown below will now open. (In the image below, the left hand navigation panel is not shown).
pic4

 

  • Click on the Select button.
  • A navigation panel now opens, displaying all the drives available to you on your computer. Navigate to the folder you want, highlight the picture you want, and then click the Open button.
  • The navigation panel now closes, and the window shown above is displayed. Click the Upload button to load a copy of your selected image into your assets folder.

The selected picture will now be uploaded into your assets folder. Helpfully, it will also be placed onto the Page where you wanted to put it.

 

Related questions