Home  /  Editing Your Website  /  Adding a Picture

Adding a Picture

First step you need your picture

  1. Take it yourself on your phone - can work surprisingly well.
  2. A digital camera is another obvious choice.
  3. Still taken on a video camera.
  4. Your tablet probably takes photos.
  5. Purchase a picture from picture library - might seem expensive but if you cost out the real cost of taking a picture, travel expenses, equipment, avoid getting there to find it is raining heavily etc are remarkably good value for money.
  6. Engage a professional photographer. A good head shot can be well worth the cost.

Editing the photo

You will almost certainly need to adjust the photos size from maybe 3000 pixels to perhaps 600 wide and 2000 pixels deep to say 400 pixels. - Few people can view a 3000+ x 2000+ pixel picture on a screen without it being reduced and so it makes sense to upload it at a smaller size. (Reduces the load time of the page.)

Software for editing photos.

Picasso from Google - used to be my recommendation but that is no longer supported http://www.techradar.com/news/the-best-free-photo-editor lists some options.

You might well already have some software on your pc for this.

Online there is this site http://picresize.com/  where you can upload a picture and it will resize it for you.

Your Photo is Now Sized How You Want It

Once you are happy with your photo the next step is to upload it.



The resources folder is home to your photos and it is possible to add more folders. It is worth reflecting on your website and if there might be some logical way of organising the photos. 

Example - you manufacture 10 different products - you could create a folder for each product line and add the photos to the appropriate folder. Benefit easier to find the photo you are looking for.

If you only have 3 or 4 photos this does not seem a big deal in 6 months time with a hundred plus photos you might regret not starting off with a logical filing system.

Naming folders - use lowercase and put a hyphen between two words.

Naming pictures - you could use 1.jpg 2.jpg - but you will almost certainly be better of using descriptive words which might also be searched for on Google. type "large spring" in Google and it brings up a pictures on a clients website, in the first few results.

Once your picture is uploaded in to the folder click on it

That brings up the pictures url

Copy the url and you can now put that on your website page.

Adding the picture to the page


1. Drag a sample block across from the right and then swap the picture by clicking on the box and swapping in the html view and pasting the url 

2. Type <img src=""> in html mode and then paste the picture url between the " " quote marks.

3. Copy and paste the URL of the picture and add that between the code <img src="file path here">when in the html view.

Lorem Ipsum

Lorem Ipsum is simply dummy text. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Swapping a Picture

In this instance the lighthouse was generated with this 

<img src="assets/minimalist-basic/e09-1.jpg">

by going in to html mode (blue box white arrows) and swapping out the file path details to the jpg and replacing with the one from resources (use copy and paste) revert back from html view and the picture is no longer the lighthouse but the new picture.

Adding a Folder

Folders are the way to help organise your pictures. You do not have to but they are useful.

Once you have got the hang of adding a picture to a page

If you note the width and height of your photos you can help the device which the viewer is using display the photo by adding the size.




alt="lighthouse on a peninsula"

title="lighthouse on a peninsula"

Alt is aimed at helping visually impaired people understand the picture.

Title refers to what is the title of the picture. Not essential but Google likes to see these details present.

In a responsive website this might display at a different size.

lighthouse on a peninsula

If you do the things Google likes there is a greater chance of your page being displayed. higher up the results.

example code if you are in html mode.

<img src="assets/minimalist-basic/e09-1.jpg" width="580" height="280" alt="lighthouse on a peninsula" title="lighthouse on a peninsula">

How To Upload Pictures

Navigate to resources - folder in question click on upload and the Upload files box appears.

click on Choose file - that allows you to find the picture on your computer.

You can if you wish upload 4 pictures at a time using this technique.

Once loaded click Upload Files

Once You Have Uploaded Your Picture

If you click on the name that will put the file path to that picture in the address bar. This is where the picture can be found on your website. Copy this with your mouse and then you can paste the url where you want the picture to appear..


This is the file path

all pictures are displayed by adding the file path to the website page.

The file path can include the full url or it can be shortened.

1 /resources/site1/General/adding-pictures/that-will-add-the-file-name-address-bar.jpg

2 will create the same result as

Problem Solving With File Paths

Name folders descriptively example "adding-pictures"

Name the pictures with a descriptive phrase. example uploading-a-picture.jpg

You can have a space between in file names so you could have

uploading a picture.jpg but that would produce %20 in the file address. That does not look great and can lead to a problem namely uploading  a picture.jpg in this example there are two spaces between uploading and a - this may well cause your file to not display. Using hyphen between pictures overcomes this issue.

Very long file names which look like paragraphs can work but when it comes to backing up the pictures that can cause the file to not backup. I would keep file names to less than 72 characters and as stated use a hyphen.

Fixing Problems

This graphic highlights what a broken file path looks like. No pictures just a funny little graphic.

To fix this: -

1 Check you have uploaded your picture successfully

If you put the file path in the browser address bar, can you see your picture on your screen.

2. Has your file got .jpg .png .gif etc. on the end as required.

3. Is the surrounding code correct?

Patience - have a break and come back.

Can you link to another picture on the internet? Yes, but this is rarely a good idea. Websites chop and change and chances are sooner or later that picture will move and therefore your link will break.

Introduction To Editing

Add new words lists change the colour of text .


Adding content and pictures and then edit to create your own look.

Adding A New Section

Adding a new section to a page to expand the content .

Search Engine Optimisation

Title, description how to come up in Google

Dividing A Page In To Sections

Sections in a page makes it more manageable.

A Picture

Pictures brighten up text make it more readable

Adding A

Video is the

Adding A

Adding a pdf
to your website.