I 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.
- 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:
- Go to the List Settings for your announcements that you would like to add an image to.
- 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:b. 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.
- 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”.
- 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.
- 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.So, 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:
- Let’s edit the Announcement Web Part.
- Under “Selected View“, Choose the View you configured earlier. Apply and Ok the Web Part.
You will see this alert. This only applies if the view is shared with other Web Parts.
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.