Working with Images 1 / 12

Transcription

1 V2 APRIL / 12 To brighten up your website it is often nice to have images inserted onto various pages of your website. We have an easy option to size these photos on your page, as well as aligning multiple images on your page. Loading images into Media Folder 1. MEDIA Create new 2. Give your image a title and a keyword then browse your computer for the image you wish to load. 3. Submit your media once it is loaded. 4. You will land back on the media page once it is loaded, click on the URL beside this image.

2 2 / Copy the link in the pop up window by following the prompts: CTRL + C 6. Copy the link in the pop up window by following the prompts: CTRL + C. Go to WEBSITE CONTENT and find the page you wish to add the image to. Click on the pencil icon to edit this page. 7. Click on the green tree button (Insert/edit media).

3 3 / A pop up window will open. Paste the copied URL into Image URL box. You will then need to select either Small picture, Medium Picture or Large Picture from the radio buttons on the right. You will then get a preview of your image underneath. 9. Once you have made the choice of size, click on INSERT. You may get a pop up message like the one below you can just click OK and ignore it.

4 4 / You will now see your picture on your page. Make sure to update your page, then VISIT site to see your work. You can repeat the process with other images in your media folder. In the example below, I have used the same image and the different size options.

5 View from your live website. 5 / 12

6 6 / 12 WRAPPING TEXT AROUND YOUR IMAGE If you have a page that you would like to brighten up with images displayed throughout your text, follow these instructions. 1. Follow step 1-6 in the above guide. Once you are on the page where you would like to add your image, put your cursor where you would like the image displayed. 2. In this instance we have put the cursor at the very top left corner of the page. Click on the green tree (insert/edit image) and paste the URL into the Image URL box, then select the image size. (We have chosen MEDIUM in this example).

7 7 / Now click on the APPEARANCE tab at the top. Choose your alignment to be LEFT. 4. You will want to add some spacing around the picture, we suggest something around 5 pixels. Add 5 into both Vertical and Horizontal space. Then click Update.

8 8 / Your page will look like this. Click on SUBMIT and visit your site to see your work. You may also choose to have images aligned to the right, middle etc. If you would like the image on the right, pop your cursor on the line you wish your image to appear and then hit the green tree button. Repeat steps above, this time choosing Alignment to the RIGHT.

9 9 / 12

10 10 / 12 ALIGNING MULTIPLE IMAGES ON A PAGE You may find that you would like a row of images displayed on your page, as long as you keep the size choice the same, they will look great. 1. Load your images in to the media folder following the steps outline previously. Copy the URL of the first image and go to WEBSITE CONTENT to find the page you wish to edit. 2. Pop your cursor where you would like the image and click on the Green Tree (insert/edit image) and paste in the URL. Choose your picture size (in this instance we are working with SMALL. 3. Now click on the APPEARANCE TAB and add spacing between the pictures. Spacing between images should be about 2 pixels. So both Horizontal and Vertical space should be 2.

11 11 / Click on INSERT and you will see the image land on your page. 5. Go back to MEDIA and copy the URL of the second image you wish to load. Then go to WEBSITE CONTENT and edit the page you are working on. Pop your cursor to the right of the first image and then click on the Green Tree (insert/edit image) icon. 6. Paste your URL in, choose picture size SMALL and then click on Appearance to add in the vertical and horizontal spacing. 7. You will see your images aligned on your page, continue for as many as you like. Once finished, VISIT site to see your work.

12 12 / 12