Cookies on our website
Big Blast Design
Take control of your business

Call us now on 01279 755155

Connect with me at Twitter (click here) Click here for my LinkedIn page Click here to join me at Google Plus
Home > Website CMS > Other functions > Insert an image

Editing tools
Below is a copy of the tools available within the web builder. Click on each for the relevant help files:

Edit content boxesPublish or republishPage choicesHelp filesPreview pageSave page
Find and replaceCutCopyPastePaste from external sourceUndoRedoTable - insert or editInsert or edit an imageInsert or edit mediaInsert an emoticonAdd rule offAdd or edit a linkInternal page linkInsert or edit bookmarkInsert special charactersAdd a formAdd a text fieldAdd a text area (form)Add a buttonAdd a drop down list (form)Add a tick boxAdd radio buttonInsert content markerInsert roll over image
StylesFontSizeBoldItalicUnderlineMore font optionsFont colourHighlightAlign leftAlign centreAlign rightFully justifyMore paragraph optionsNumbering - ordered listBullet points - unordered listMore list optionsDecrease indentIncrease indentAdd or edit html snippetsAdd image galleries to pageAdd content box

Insert image

Opens a window to add an image in the current cursor position or to change properties of the selected image

Select the folder where the image is by double clicking on the folder. This opens the folder:

 

 Click on the image that you wish to insert.

You can either click on insert or click the 'Options' tab to the right and then add some text in the 'Screen tip' box. This is the Alt text for the image and will appear when the pointer is over an image on a web browser. 

 

Set image to float left
Set your image to float left - the system shows a little representation of how it will look.
Float image left with padding
You can also add padding around one or more sides of the image and again, it will show a thumbnail to describe your action.
Set the image to float right
Set to float right.

 

 

 

If there is no image available, or you have not yet uploaded an imagem use the 'Upload' option in the above screen, firstly making sure you have selected the right folder that you wish the imageto be placed within. You will be taken to the following screen:

 

Upload image

From here you can browser the image and upload one or more into the folder. The follow the above procedure to select an image and add alt text, as desired. This will add the image at the position of the cursor.

Adding an image / editing an existing image
To edit properties of an image at a later date, right click on it or select it and then click on the corresponding button in toolbar

TIP : Keep to a naming convention when using images. Name them logically, e.g. about-us.jpg or flower1.jpg, as this makes it easier to select and keep track of images as you use them. Keep a logical set of folders e.g. 'navigation' or 'flowers' in the above example and place your images in them as you browser items onto your site. This will help you organise image resources as your site gets larger.

TIP : As a rough rule of thumb, use .jpg images for photographs, and gifs in general for drawings or cartoons. Keep image sizes to a minimum to make the pages as fast as possible. Try to keep image sizes as low and efficient as possible - see the tip below on optimisation. DO NOT use bitmaps produced by paint for example, as these are very large in comparison to jpegs. You will need to 'save as jpeg' and not just add a .jpg after the file name as this does not work.

TIP : If you want an image with a shadow to look good on a coloured background, then use a 24bit png with transparency.  Unlike a gif with transparency, shadows will allow the background colour to come through and so you will be free from a while ghosting that can occur around gifs.

TIP: For all images of jpeg or png type, these should be run through image optimisation programmes before uploading. Make sure they are not too large for the page -keep them to the size you require. Secondly, use something like tinypng.com to optimise the image further -simply drag the image over the site and it will remove unnecessary information, without reducing quality displayed. I have often seen this make the image over 80% faster than before using this, particularly with png files which tend tp be fairly inefficient as standard.


Last update: 13.03.2017