Add or change a picture

Pictures can be added to a page in two ways. The first is referred to as structured content the second unstructured or inline content.

Structured content is where the position of text and images is set in a template, shown as a text or picture box.

Unstructured (inline) content is where images and text are mixed in text block areas.

Sitekit best practice is for images to be structured because the system can:

• Manage all aspects of the image centrally - For example removing an image from the library will remove it from anywhere it is referenced in the structured content. Overwriting an image in the library will replace it with the new image wherever it is used.
• Monitor image usage -The library keeps a record of where an image is used Iin the website.
• Automatically control image Alt tags - The use of ALT tags is enforced by Sitekit CMS, when an image is uploaded it automatically creates an IE and FF based ALT Tag or a caption. The Image Library allows you to change the Alt tag of an image CMS with ALT tags provided centrally for images in the library.
• Control image position and size - Sitekit CMS enforces image sizes through the page templates, ensuring that editors are unable to break the design by uploaded images with invalid dimensions. If an image is resized for front page delivery it is also re-sampled to reduce the images file size.

Unstructured content can be used where flexibility of image postion is required however the central management and control of images is lost. Below details the three significant differences between structured and unstructed content.

• Unstructured content has the major disadvantage of negating template structure. Using a predefined template allows site builders to specify exactly where images are placed, their size and how many images can be placed onto the page. by placing images inside text boxes this central management is lost.
• Manual control of image Alt tags -  An image when used inline can have usage specific Alt tags set via its Image Properties in the text editor however it cannot be made mandatory to set these and if not set the image will not use the Alt tag held in the library created at initial upload.
• The inline Image Manager does not preview the selected image and this can look as if there is no image selected.

 Add or change a picture using structured content

1. Double-click the page you want to edit the Navigation tree, or right-click it, and select Edit, Content.
2. To add a new picture click on the Enter New Picture Icon or double click existing image, this will open the Image Picker window.
3. Select the picture you want to add to the page from the Asset Tree on the left of the Image Picker window. To search for an image use the Find item box beneath the tree.
4. If the image is to be a link, add the URL in the URL (if link) field, or use the link picker to the right of the field to browse to an item.
5. Click OK, this will return you to the Edit Content window.
6. Carry on work on the page, or Save, or Publish.

Top Tips

If you want to upload a new image when in the Image Picker window right click on the folder you want the image to be filed in and select Upload. This will open the Sitekit CMS Asset Uploader window.

Add or change a picture using unstructured content

The Image Manager provides an alternate method of placing graphics onto a web page. It allows you to mix text and graphics inside a text box.

To use the Image Manager to position a graphic,  place your cursor inside a Text Block where you want the want the image to appear.

1. Click the Insert/Edit Image Icon on the toolbar.
2. The Insert/Edit Image popup screen now opens. Click the Assets button to open Asset Navigation Tree. Click on a folder to open it and show the graphics inside. Click the graphic you want to select. Note that it appears in the preview area, so you can check it's the right one.
3. Type in a Description and a Title. (The Description is necessary, for people browsing thr site with Images turned off).
4. Optionally click the Appearance tab to adjust the alignment and dimensions of the selected graphic.
5. Click the Insert Button to insert the graphic into your text block.

The selected image is now placed directly into the text block.