3.10 Inserting Images on Your Page

Images are a great way to bring your website content to life and make your page interesting for your readers. You can use the SiteWizard CMS to add images to your pages. 

Before you can insert an image onto your page you must first upload the picture into your image and file library - see Section 6 Image & File Store

Inserting an image onto your page

  1. Click on the page where you would like the image to appear.
  2. Click on the Insert/Edit Image button on the toolbar.
  3. In the pop-up menu that appears click on the Browse Server button which is to the right of the URL input box.
  4. This will open the Image Library in a new pop-up window.
  5. Find the image you would like to insert and DOUBLE CLICK on it.
  6. This will now take you back to the original pop-up window. In the preview window, you'll now see the image you selected along with some sample text.
  7. If you are happy with how the image looks click on the OK button.

Figure 2.13 Click on the Browser Server button to view all the images you have available to add to your web page.

Figure 3.10.1 Click on the Browser Server button to view all the 
images you have available to add to your web page.

Changing the parameters of an image

Now that you have included an image you can go back and change any of it settings by Right Clicking your mouse over the image and selecting Image Properties in the pop-up menu. The list of features you can change or add to the image are given below.

Alternative text
This option allows you to give the image some text that will show if the picture doesn't load for any reason. The text will also appear when you hover over the image with your mouse. It's always a good idea to give your images some alternative text as Search Engines take notice of whether the information they contain is relevant. This text is also read by sight-readers and browsers created for the partially sighted.

Width and height
The width and height parameters allow you to set the dimensions of the image as it appears on your page. You'll notice that when you change the height of the image, the width will maintain the same aspect ratio (e.g. if you double the height of an image the width will double as well). This is because the ratio has been locked. If you would like to be able to set the height and width independently, click on the blue closed padlock so it becomes unlocked. If at any point you are not happy with the dimensions you have set, just click on the blue circular arrow next to the padlock to return to the image to its original size.

Please Note: You can upload large images in your file library, but we recommend you resize them to the size you need before inserting them on your page. See Section 6.4 Resizing Images

Border
This option allows you to set a black border around the outside of your image. The border size is set by a numerical value and the larger the number, the thicker the border becomes.

Hspace
This parameter allows you to set the space that appears to the left and right of the image. If for example you enter the number 5 in this box, a 5 pixel space will be added to the left and right of the image.

Vspace
This parameter allows you to set the space that appears at the top and bottom of the image. If for example you enter the number 10 in this box, a 10 pixel space will be added to the top and bottom of the image.

Align
The options in this drop-down box allow you to set how the image is positioned in relation to the surrounding text. When you have selected one of the alignments, have a look in the Preview box to see how the layout is affected.

Figure 2.14 The Preview window shows how your image will look next to the text.

Figure 6.10.2 The Preview window shows how your image will look next to the text.

When you are happy with all your chosen settings click the OK button to apply these changes.

Adding a link to an image

As well as adding a link to a word or block of text, you can also make a specific image a link.

  1. Right Click the image you wish to make a link and select the Image Properties option in the pop-up menu.
  2. Select the Link tab at the top of the window.
  3. If you would like to link to another website then type the web address for the site in the URL box, remembering to include the http:// (e.g. http://www.google.com).
  4. If you would like to link to a specific file or page on your website then click on the Browser Server button.
  5. This will open the Link Library. Select the file or page you wish to link to by clicking on the file name. This will insert the pathway to the chosen file in the Link URL box.
  6. You can now set how the linked item will show up when the image is clicked on. The best two options to select are <not set>, which will open the file in the same window as your website, and New Window (Blank), which will open the file in a new browser window, the second option is particularly good for when you are linking to an external site.
  7. In the Preview window you'll see that a blue border has been added to your image. This is added so users can identify that the image has link attached. If you would like to remove this, add 0 to the Border box before saving.

Advanced image settings
These settings should only be modified if you have an in-depth knowledge of how HTML works and are not covered in this guide.

3.11 Adding a Flash element on a page

You can add an element of Adobe Flash on your web page using the WYSIWYG editor. 

  1. Ensure you have uploaded your Flash SWF file into the File Library.
  2. Click to edit your web page, and in the WYSIWYG content area, click your mouse in the position you wish your flash to appear on the page. 
  3. Click on the 'Insert Flash' button in the WYSIWYG toolbar. 
  4. In the pop-up panel, select 'Browse Server', and select your flash file from the list of your website files which pops up. 
  5. You can edit some of the properties for the Flash in this panel, including Width and Height. However, if you are not an advanced user, it is not advised you change the settings in the 'Properties' or 'Advanced' tabs. 
  6. Click 'OK' in the pop-up to insert your flash, and 'Save Changes' at the bottom of the panel to save your page.

3.12 Editing Meta Tag Information

At the top of the Page Editing Panel, there is a button for 'Edit Meta Tags & Title'. Clicking this button reveals input fields for you to edit the Title, Meta Keywords, and Meta Description for the page you are on. 

3.12.1 - Click the 'Edit Meta Tags & Title button to
display the Meta Editing box

The Meta Tags and Title are not visible on your website, but they are very useful for helping your website be found in search engines. If these fields are not pupulated on individual pages, the system will use the default meta information, specified in the Settings section. See Section 7.1 - General Settings.

3.12.3 - Type your Title and Meta information for the page into the boxes.

Page Title

This box controls the text that appears in the blue bar at the very top of your Internet browser window. A maximum of 200 characters can be used in your title. 

Tip: Search Engines, such as Google, use the title bar to see if it relates to the content on a specific page. Often, this text is used as the blue link in the main search result listings. With this in mind, the title is a great place to insert keyword rich phrases to help with your Search Engine Optimisation. 

Meta Keywords

This box allows you to set a group of keywords of up to 500 characters for your site that are hidden in the code, used to help describe your page. 

Tip: Traditionally, search engines used these words to help rank a website, but they are used less often by search engines today. However, It is still recommended that you populate this field with key words relating to your page. Take care to ensure that the keywords you use are directly relevant to your pages! 

Meta Description

As well as adding Keywords to the code of your site, you can also include a description of 500 characters about your company and the services you provide. The Meta Description can be set on each page, but when they are not set, these keywords are used instead. 

Tip: This description is used by search engines to display what your page is about in search listings. It is used less often than it was in the past, but it does still carry weight for search results. Try to make your descriptions as keyword-rich, accurate, and specific as possible about your page.
If you'd like more tips for SEO, why not have a chat with your SiteWizard account manager for more help and advice? Call on 01622 200 045.

3.13 The View Source Button

The SiteWizard WYSIWYG Editor allows you to edit the HTML source code for any page you edit, which can be very handy for advanced users. HTML code is the language used to instruct the web browser what to display on the page. 

This code can be accessed by clicking the 'Source' button in the WYSIWYG toolbar. If you are not an advanced user, it is advised you do not edit the HTML source code for your web pages.

3.14 Content Templates

A new feature in the Sitewizard WYISIWYG editor is the content template button.


3.14.1 - The template button

This feature allows you to insert content into your site to preset layout templates. By default, the templates include 2, 3 and 4 column layouts, and a sidebox. However, your site may have had extra templates added, which are custom to your site.

To insert a template block into the page, click the template button and a pupup will show:


3.14.2 - Select the layout you would like to insert and click to insert into the page.

Click the template you would like, to insert into the editor. You can then add your content to the template layout.

In most cases, do not select the 'replace actual contents' box, because this will remove existing content from your page. Leave the box unticked to add the template to your page without affecting existing content.

 

^ Back To TopGo to next section >