Add Images to a List Web Part in SharePoint 2010

Add Image to List Web Part SharePoint 2010I was recently working on a request to have Images appear in the announcements Web Part for SharePoint 2010. At first, I figured this was a simple enough task – just add an image to the page, right?

Well, I fell down the rabbit hole looking for the best way to manage this. Adding an image to the page worked, but it was ugly and not user friendly for managing multiple announcements. Searching online for a solution came back with similar recommendations to what I had already tried or to just write custom code.

I didn’t want this to be labor intensive (I never do!), so here is what I came up with after searching online came up short.

Prerequisites:

  • Having a Picture Library configured makes this process much easier.
  • Create a list you want this apply to or edit an existing list.
  • Full control of the page you are editing.
  • A few minutes to work on it.

The Process of Adding Images to a List Web Part:

  1. Go to the List Settings for your announcements that you would like to add an image to.SharePoint 2010 List Settings
  2. Under Columns, make sure Contact Photo is one of the columns currently listed. (It probably won’t be unless you have previously added it to this list.)
    a.  If not, click “Add from existing site columns”. Choosing “Create Column” will give the ability to add an Image Column, but when you are finished with this setup, it will only display a link and not the actual image. So, instead you will:Add from existing site columnsb.  Add Contact Photo to the Columns to Add. Since this is title is seen on the list, I have renamed mine “Image” after adding it in. You can name it whatever you please.Add Contact Photo to the Columns
  3. At this point, the column to add an image is available, but it is not going to appear in the Web Part. Again in the List Settings, you should create a custom view for this to prevent multiple lists from showing your image column, or just stick with “All Items“. Since this was my only list on this testing site, I went with “All Items”.All Items
  4. What you will gain by creating/editing a view is the ability to add and remove the columns that will appear in the list page and organize them in whatever order you want.Abilitiy to add and remove the columns
  5. Your will now have an option to place an Image URL when posting new announcements. I would recommend using a thumbnail from your Picture Library because it will use the full resolution photo if you do not. Luckily, you took my advice above and created a Picture Library to steal an auto generated thumbnail URL from. You can also go back and edit previous announcements to add an image.Add Images to announcementsSo, now your List will show an image, but not the web part. Then what has this all been for? To have the Web Part show an image:Have Web Part show an image
  6. Let’s edit the Announcement Web Part.
  7.  Under “Selected View“, Choose the View you configured earlier. Apply and Ok the Web Part.Choose your Selected View

 

 You will see this alert. This only applies if the view is shared with other Web Parts.

Manage from Webpage

Keep this in mind if you are using this view in other Web Parts.

Now you have yourself a List Web Part that will display an image “a la blog” mode. Congratulations! Now sit back and enjoy your handiwork.Your List Web Part Displays Image

2014-05-07T10:41:55+00:00 May 7th, 2014|

3 Comments

  1. Qadir Bux A. Munir February 16, 2015 at 1:17 am - Reply

    Good article

  2. Elena March 5, 2015 at 2:59 am - Reply

    Steve, I have to thank you for this article. After months of getting no results about my request regarding the possibility to have pictures in the lists- I finally came across this and it solved the problem. Yes it requires some manual work when you have a lot of items in the list, for example, but it gets the job done. Thank you again!

  3. Rick January 13, 2016 at 7:35 am - Reply

    Excellent! Thank you for publishing this article

Leave A Comment