Adding Images to Pages
When you create a new page 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 and your Image Bank currently empty, see how to Manage Images).
Your Spanglefish site makes adding images to pages very easy, and it will also automatically scale and 'web optimise' images when 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 to add an image to the page you have been working on ...
1) Click on the 'Edit Page' button in the blue control panel at the top of your page content area.
2) First you must decide where you want the image to appear on the page - 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.
3) Then click on the image icon on the toolbar (indicated above). This will bring up an Image Properties 'pop-up' preview window containing assorted fields and buttons for configuring how your image will be displayed.
4) Now you must choose an 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 contain only a couple of placeholder images for you to try out.
5) 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 its 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.
6) 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 - 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.
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 . . .
7) Click the 'Update Page' 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.
