Title: SharePoint Advanced: Adding An Image to A Site Purpose Policy Definitions

Transcription

1 416 Agriculture Hall Michigan State University Title: SharePoint Advanced: Adding An Image to A Site Document No. - Revision Date - Revision No / Purpose The procedures below provide outlined steps for adding an image to your SharePoint site. Policy N/A Definitions N/A

2 NOTE: In order to perform any of the steps in this document, you must be an owner of the SharePoint that you wish to change or have the proper permissions from the owner to do so. In this document, media will be pertaining to images/pictures. ADDING IMAGE MEDIA In this section you will be learning how to add images to your SharePoint site. In the example below, of the ANR Technology Services Training Site, you will notice that an image has been placed on the left side of the screen. This image is just a web part, an image web part. Continue below to see how this was accomplished. 2

3 1. Go to the SharePoint site that you would like to add an image to. Once on the site click on the Site Actions dropdown menu and choosing Site Settings. 2. Choose Content and structure under the Site Administration section of Site Settings. 3

4 3. Hover your mouse over the image folder (left side of screen), and a dropdown menu will appear, click on this menu and: Choose New Then choose Item 4

5 4. An Upload Document screen will appear. Click the browse button to find the image file you would like to upload. 5. A Choose File to Upload window will open. Find the file you would like to upload, click on it and click the Open button. 5

6 6. The file path will appear in the textbox under Name and to the left of Browse. Click OK to place the file in the image folder (seen in step 3 above). 7. On the next screen you will: Click on the Content Type dropdown menu and choose Image Type a title for the image in the Title test box Click Save to finish 6

7 8. Now we have to copy the URL or address of the image so we can place the image on the site. To do this, click on the title of the image uploaded (in the example below, the image uploaded was training_words ). 9. After clicking on the title of the image, the image will open in a new window. Highlight the images URL and then right click on it and copy the URL. 7

8 10. Now go back to your SharePoint site. To do this: Click on Site Settings in upper left corner 11. On the next screen click on the breadcrumb trail link to get back to the main page of your site. 8

9 12. Now we have to create a web part on the page to place the image in. To create the web part: Click on the Page tab at top of screen Click on Edit page 9

10 13. Next click on the words Add a Web Part. There are two places on the page that I can click, you can choose either one. 14. In example below, the right side Add a Web Part was chosen. Now we have to find the Image Viewer web part. To find the image viewer web part do the following: Click on the Media and Content folder under Categories Click on Image Viewer under Web Parts Click Add to finish 10

11 15. You will now see an Image Viewer web part on the page. Click on the link titled open the tool pane to open the tool pane for pasting in the URL of the image (copied in step 9 above). You will also be able to do more configuring of the image in the tool pane. 11

12 16. The image viewer tool pane will open on the left side of the page. Use this tool pane to: Paste in the URL copied in step 9 above- you paste the URL in the text box under words Test Link Give image an alternative text. Type a description of the image in the text box under Alternative Text. The description should be short, but describe the picture. Click on the + (plus) button next to Appearance. Under the Title text box, delete the words there, if you do not want a title for your image. If you want your image to have a title, name it here. 12

13 17. Under Appearance (further down) again, you can choose the Chrome Type or how the image will display. Under Chrome Type you choose: None This will just show the image Title and Border this will show the title (if you gave it one) and a border around the image Title Only this will show the title above the image (no border) Border Only this will show a border around the image, no title. Click OK when you are finished 13

14 18. To stop editing the image web part, you must click on Stop Editing. 19. Now your image should be showing on your site. In the example below, None was chosen under the Chrome Type. 14

15 20. To edit the image web part, simply click on the Page tab again, then click on Edit Page 15

16 21. Then click on the dropdown menu, to the right of the web part and choose Edit Web Part. 22. The web part tool pane will open (like in step 16) for you to use in editing this web part. 16