Announcements with Image - SharePoint 2010

Given below are the steps to configure Announcement web part with image

Steps to Display Image in an Announcements List.

• Create an Announcement List
o Create->List->Announcements
o Name the List

• Go to List Settings and check if you have Page Image Column available in list settings

• If you can't find a Page Image Column, click Add existing Site Column

• Select Page Image Column from the List.

• Select the option of , Add this column to your default view

• Now come your home page(Page where you want to add announcement web part with image)

• Add a content Query web part and go to settings of CQWP.

• in Query Section select your previously created announcement list as source. (show items from this list type)

• Scroll down to Fields to Display section under Presentation in settings of CQWP

• In Title Add the name of Column (list column) in this format List Column [Group of List Column] e.g: Title[Custom Columns]

• In Image section add name of image column in this format List Column [Group of List Column] e.g:- Page Image[Page Layout Image]

• you can apply different styles available in Styles column by making combination of Group Style and Item Style: e.g: Group Style Default and Item Style Fixed Image Size

• click apply and ok and you will start seeing the data in your CQWP


Customizing column width/image size etc

Open the site in SharePoint Designer
Open All Files->Style Library->ItemStyle.xsl

This xsl has styles which are applied on CQWP, so you may want to override some of them to make any changes.