Questions? Feedback? powered by Olark live chat software

How to add images to a list Web Part in SharePoint 2010

Joe Knows Support

Submit Your Question!

Prefer to read what's in the video? See below for the transcript:

Adding images to a list Web Part in SharePoint 2010


Hi, this is Joe with and you are watching Joe Knows Support. As you can tell, we lost the projector and if you know where it is at, please let us know. I do not have the galley line that we normally use for the tickets, so I don't how I’m getting a ticket here. “Order Up!” Oh, here they are! Ah, adding an image to a list webpart. Let us see how you do that.


So here, you will see we have a picture library already set up with, if I click on it, a picture already in it. Now we are going to come back to that later. So first, let’s go back to the list. In the list, we’re going to notice there is no picture. So, let us click on it, and go to list, and list settings. Under list settings, we’re going to go down and add a column. Once I add this column in, I am going to come over here and actually pick 'contact photo’. Contact photo is what is going to be shown usually in a user profile or something. But, we’re going to use it for the list. Click 'OK’. Once we are back here, we’re going to go back in and add this column and format the column into the way that we want it to look.

As far as actually seeing that image that we are going to put in here, I like to put it first. So, we are going to put it at column one. So as you can see, the columns list the items. We are going to go down to the bottom, and we are actually going to click on 'OK’. Now we are going to click on 'list’ and we are going to look at that image. Click on the 'image’. You are going to see that it is really huge. We do not want the really huge version of it, so we’re going to go back and right click on it and go to copy image URL, right here. Click on that, and now I have a copy of it on my clip board.

I’m going to go back to the actual list. Now that I am here, I am going to click on 'add new announcement into this list’. I am going to put in an announcement. Put in whatever, “Adding new image to list” here. Put that in and then I am going to actually go down and put in the URL under contact photo. And save it. Now you do not see it, which is okay. We are actually going to go in and edit web part now. That is how we are going to see it.

Now we are going to go in, click on 'edit webpart’, and go over to views and change it to all items. Once I do that, click 'OK’. Now, when I look at the list view of that list, what we will see is the picture. So now, that picture will be associated with this list. That is how you do it.


All right, now one thing to keep in mind if you are using the all items view. That image is going to show up across all the webparts, so you may want to create a unique view just for that webpart list. And with that, it’s another ticket served.

© Copyright 2017 LC. All Rights Reserved