Add Page images

When you create a new page on your site it will initially have no content of any kind other than a title.  After you have added some text to it, you may want to start adding some illustrative images to it from your site's Image Bank. (If your site is new your Image Bank may currently be empty, in which case you can easily upload images to it.)

Your Plexus WS6 site makes adding images to pages easy, and it will also automatically scale and 'web optimise' images that you upload to your site's Image Bank, making sure that they are the right size for your page and quick to load for viewers.

Here is how you add an image to the page you have been working on ...

1) Click on the 'Edit Content' button in the turquoise control panel at the top of your page content area.

First you must decide where you want the image to appear in the text content area - at the top, bottom, between paragraphs, or with the text 'wrapped' around it. Generally it's best to insert an image at the start of a paragraph, and you do this by first clicking your cursor to the left of the paragraph's first character.
 

2) Then click on the image icon on the toolbar (indicated above).  This will bring up an Image Properties 'pop-up' window containing assorted fields and buttons for configuring how your image will be displayed on the page.

3) Now you must select the image to be added to your page. You do this by clicking on the 'Browse Server' button (see above). This will open an Image Bank pop-up window displaying a list of the folders in your Image Bank on the left, and the images held in those folders on the right. If this is the first time that you have added an image, then your Image Bank will probably contain only a couple of placeholder images for you to try out.

[In this example, you can see in the left column that I have several folders. I have highlighted on by clicking on it, and the right panel shows a list of the image files in that folder.

I prefer to view the images s thumbnails rather than in list format, so I have clicked on the 'thumbnails' link at the top right corner of the right panel, and the images are now shown as thumbnails.]

4) Select the image you want by clicking on the Small, Medium or Large text links beside its name if viewing is list view, or below it's name in thumbnail view, as appropriate . . .

and the pop-up will close revealing the image now inserted into the text preview in the Image Properties pop-up window.

5) You can now configure various display options in the Image Properties pop-up:

• Alternative Text - the ALT text used when the image is not loaded. Also handy for the visually impaired and for search engines.
• Margins - how much space there should be between the edges of the image and the surrounding text. The default is none.
• Border - whether the image should have black border around it. The default is not.
• Align Dropdown - Align Left will put the image on the left side of the page with the text wrapping around its right. Align Right will put the image on the right side of the page with the text wrapping around its left. Leaving the drop down at '' means that no alignment will be specified - useful if you have the images placed between the paragraphs as it allows you to use the ordinary text alignment options in the text tool bar to align it later.

Once you are happy with the changes, click on 'OK' button to confirm them. The pop-up will close, showing the image you have chosen 'embedded' in the page text on your page. Click the 'Update' button to confirm and record your changes. The page will reload showing the new image in place on your page.

Changing image formatting later

If you decide later that the image alignment isn't the way you want, or you'd like to add a border, simply select the image in the edit text field by clicking on it once, then either click on the image icon on the toolbar, or Right+Click (Mac: Control+click) on the image to open the Image Properties pop-up again, where you can change the alignment, border, spacing, etc.

To remove an image from a page

In the editing field, select the image by clicking on it. Now press the delete key on your keyboard (<– ) and submit the changes on the page by clicking on the 'Update' button at the bottom of the page. Note that this doesn’t delete the image from your Image Bank, it just removes it from the page.