User Tools

Site Tools


tutorial:transcripts:editor:2-add-image

Transcription #2 Editor Add an Image

As an Editor, you may wish to add an image to a page.
Now we are going to add an image to our page. 'Edit'.

00:23 Now on our page, select where you would like to have the image. Oh I think we would like to have… I will just get rid of this bulleting. And we'd like to put our image beside this writing. So we go to where our image is. This one is on another website.

00:30 So we right click on the image, and where it says 'copy image url', click that, go back to our basic page, go to the image icon and 'control' or 'command ' + 'v' to paste it into the url.

00:55 Now you can see this one is 700 pixels wide. To try and standardise the size of the images on the website, we try to keep them to a maximum of 250 pixels either high or wide. We'll just change that to 250 and the proportions change automatically.

01:15 We won't give it a border, but we will give it a space, just so the writing won't be directly up against the image. And we're going to set it so the image is on the left, and the writing will be wrapped around it. So then we OK, and there it is. Now we'll save that. Have a look at our page.

Now we'd like to add another image, so edit, and this time we'd like to put in into the right hand side of the page. So click into the area we want it, and we click onto our icon. We go to where our photograph is. This time we'll use this photo.

02:09 We'll right click on the photo and see it says 'save image as', so we'll save the image some place where we can find it again next time. 'Save'.

02:27 We go back to our page and here we'll 'browse the server'. We want our photo to be stored in 'member services' so that we can find it again another time. It's not here, so we'll upload it. We'll go to where we stored it, 'open', and there it is. Double click on that one. Now it's 271 pixels wide, so we'll just change that to 250, and the proportions change automatically. We won't give it a border, but we'll give it a space of 10 pixels.

03:04 Now this time, we want the image on the right hand side with the writing wrapped around it. 'OK'. Now we'll save that, and have a look at our page. So there the photographs are a similar size, and are nicely balanced on the page.

Now we'll just have a look when you don't set the alignment of the photograph. We'll just go to 'edit'. We'll just delete our photo at the bottom – so select it and delete. Now we want this photograph to be up in here somewhere. So select an area.

04:07 Go to our image icon, we 'browse the server', click on our image, change it's size, give it a 10 pixel space in each direction, and this time we won't set the alignment. 'OK'. And 'save'. Have a look. Oh it doesn't look quite as nicely balanced, does it?

04:30 If you've got a photograph and you're not happy with its position, you'd think you might be able to drag it around, but you can't make it shift on the page. So you have to go to 'edit' and then select your photo, delete it, and then put it back in where you want it. So put it back in – click the icon 'browse the server', upload your photo, change it's size, give it a space in both directions, and this time we are aligning it to the right, 'save'. It's up to you. You can make the page look like you want it to.

05:36 If you've got your photographs on the page and you're not happy with them, another thing you can do is 'edit', without having to delete your photograph altogether. If you click on your photograph and then right click, you'll get 'Image Properties'. So select 'Image Properties', you'll see here that the alignment wasn't set. So we can go there and choose left or right – we're going to choose 'right' for this one. We're happy with the size, and it has its space.

06:00 We can put in an 'Alternative Text' which may be helpful for when you are browsing the websites, so we can say “Waterfall on Cape York” and OK. 'Save'.
Have a look at our page. So there we are actually able to change where the image sits on the page.

tutorial/transcripts/editor/2-add-image.txt · Last modified: 2012/12/10 15:40 by rikki