1. Skip to content

Call us on 07796 405818 or email stephen@mcwebs.co.uk for a free quotation.

Add or Edit a Picture Element

This section will show you how to add and or edit a Picture element in a page.

The Picture element allows you to insert photographs or other images into your pages.

To add a Picture element to the page click on the Picture button at the bottom of the page or to edit a Picture element that already exists click the Edit Element button above the element. This will open a popup window that allows you to add or edit the element.

Move your cursor over each part of the Picture Element Popup Image below to learn about how it works.

Picture Element popup window

Hold your cursor over the image to find out more about the element.

Picture Element Help Text

Show Help

Clicking on the Show Help link will bring up help buttons for the different features of the element. Then clicking on the ? button next to a feature will give you some help with that feature.

Title *

The title should reflect the content of the picture. The picture title also appears as alternative text should the picture not appear or when the cursor is hovered over it.

NB New laws governing the accessibility of websites now require that all pictures have alternative text associated with them. Alternative text is read by screen readers (like Jaws) so that visually impaired users can understand what picture is on the screen.

Picture *

You will only see a picture here if you are editing an existing Picture Element. You will also be told the format of the picture, its size and dimensions.

For example, this the picture is in the GIF format, 7k (kb) in size and is 200 pixels wide by 175 pixels high.

To insert or replace a picture, click on the Browse button, which will give you access to your computer’s files. Now locate your picture and click the Open button.

Pictures have a maximum size as set up by the website designer and will be reflected in the max boxes. Images larger than the maximum size will be resized and resampled to fit accordingly. Pictures that are smaller than the maximum size will not be affected.

You can ignore the Remove tick box as it is obsolete!

There are limitations on size and format - see the 'Picture Formats' page for more information.

Description

Enter a brief description to be associated with this element. Make it short, attractive and as descriptive as possible.

Use the Check Spelling button to check that the description is spelt correctly.

Show Description

The default selection is Yes! Click No if you don’t want the description to appear under the element.

The description is a good way of telling your visitors what the picture is about.

Alignment

This allows you to select how you want the element aligned on the page and how it will affect any elements below it. If you leave it as -default- then the element will take on the alignment of the page. Select from the dropdown box to change the alignment.

  • left, center or right will position the element accordingly and any element below it will stay below it.
  • float left will position the element to the left of the page and any element below it will be pulled up to the top of it on the right.
  • float right will position the element to the right of the page and any element below it will be pulled up to the top of it on the left.
  • clear left will cause the element to stay below a Float Left element above it.
  • clear right will cause the element to stay below a Float Right element above it.
  • clear both will cause the element to stay below any Float Left or Right elements above it.

See the 'Arranging Page' page for more information.

Style

This will only appear if specific styles have been set up by the website designer.

Click on the dropdown box to select a style to apply to the element as a whole.

Link to Page *

To make the element a hyperlink to another page within your website click on the Choose Page button and select the page from the list.

Click the Clear button to delete any previous selections.

Click the Go button to test that the hyperlink works correctly.

You can either Link to Page or to an External Website, but not both.

or External Website *

To make the element a hyperlink to another website enter the website’s address here. e.g. www.example.com

Click the Go button to test that the hyperlink works correctly.

You can either Link to Page or to an External Website, but not both.

Alternative Title

Use this to further describe the picture. For example, the Title may say “Our office staff” and the Alternative Title may say “Five office workers standing together.” This will further help your visually impaired visitors to understand what the image is about.

Parent Page

This identifies the page that this element sits on and this box only appears when you are editing an existing element. Changing the parent page will move the element to the chosen page and delete it from this page.

To move this element to another page, click the Choose Page button and select the new page from a list of the website's pages. You can click the Go button to check that you have selected the correct page.

If you do move an element to a new page you must then go to that page, position the element where you want it and then publish the page before it will go live.

Parent Page Position

This determines the position that the element will have on the web page. Every element has a number, which governs the overall layout of the page. By changing the Parent Page Position you can quickly determine where this element should sit on the page.

By default, new elements are added to the end of the page.

Click the Save button to save the element. Or click the Cancel button to cancel it.

* These fields are required.

Back to top