Rendering IMAGES (attached to announcement list) in my custom web part?

Please bear with me as I am brand new to the whole sharepoint world. I want to be able to display images that have been attached to OOTB announcement list in a custom visual web part I am trying to build. I would also like to be able to show the title (from the list) right under the image as a hyperlink (I am thinking I would have to convert it after retrieving it from the list) I want to display three images in a row with some spacing in between them. Here is the code I have as of now:

using (SPSite oSPsite = new SPSite("http://sharepointdev:2000/"))
{

using (SPWeb oSPWeb = oSPsite.OpenWeb())
{

// Fetch the List
SPList list = oSPWeb.Lists["Announcements"];

SPQuery spQuery = new SPQuery();
spQuery.Query = "<Where> <Eq> <FieldRef Name='Title' /> <Value Type='Text'></Value> </Eq> </Where>";
spQuery.Query = "";
spQuery.RowLimit = 3;

// Show item in text box
SPListItemCollection oListCollection = list.GetItems(spQuery);
foreach (SPListItem item in oListCollection)
{

}

}


-
This is not an answer, but a thought on an alternative solution. You might want to look into using the content query webpart for something like this, as it will let you grab list items and render them along with an image. You need to have publishing enabled to use that webpart though. –  AndrewSwerlick Mar 19 '12 at 15:02
Andrew thanks for the suggestion but I am trying to work it out with a repeater control in my custom visual web part –  user7400 Mar 19 '12 at 20:55

First a number of small remarks:

• Usually you don't hardcode the URL of the site you want to work against. It may be ok but if you want to access the current site the just use SPContext.Current.Web
• Unless you need to make updates on a get you shouldn't set AllowUnsafeUpdates
• A listbox will not allow you to add images inside it (so in my code I just added a table with links)

To get the full url of attachment you use item.Attachment.UrlPrefix and then add the filename of each attachment. So a sample might be like this:

protected override void CreateChildControls()
{
base.CreateChildControls();
SPWeb oSPWeb = SPContext.Current.Web;

// Fetch the List
SPList list = oSPWeb.Lists["Announcements"];

SPQuery spQuery = new SPQuery();
spQuery.Query = "<Where> <Eq> <FieldRef Name='Title' /> <Value Type='Text'></Value> </Eq> </Where>";
spQuery.Query = "";
spQuery.RowLimit = 3;

// Show item in text box
SPListItemCollection oListCollection = list.GetItems(spQuery);

var editformUrl = list.Forms[PAGETYPE.PAGE_EDITFORM].ServerRelativeUrl;
var table = new Table();
table.GridLines = GridLines.Both;
foreach (SPListItem item in oListCollection)
{
var fullEditUrl = String.Format("{0}?ID={1}&source={2}",
editformUrl,
item.ID,
HttpUtility.UrlEncode(HttpContext.Current.Request.Url.OriginalString));

var row = new TableRow();
row.Attributes["onclick"] = string.Format("window.location='{0}';", fullEditUrl);
row.Style[HtmlTextWriterStyle.Cursor] = "Pointer";

var titleCell = new TableCell();
titleCell.Controls.Add(new LiteralControl(string.Format("<a href='{1}'><span style='color:lime;'>{0}</span></a>", item.Title, fullEditUrl)));

var imageCell = new TableCell();
if (item.Attachments.Count > 0)
{
{
ImageUrl = SPUrlUtility.CombineUrl(item.Attachments.UrlPrefix, item.Attachments[0]),
NavigateUrl = fullEditUrl
});
}
}
}

-
Per Jakobsen Thanks for the valuable info! Additionally, is it possible for me to make/convert them both (Image attachment and Title) into hyperlinks so when a user clicks on either, he would be directed to the edit window with all details shown. I am assuming I would also have to create a image cropping function. –  user7400 Mar 16 '12 at 21:03
I was also wondering if I could go ahead and add navigation so the user will be able to navigate left/righ. The latest "three" (which is what I have set my row limit to) would be shown first and then the user could click to the right to see earlier announcements. –  user7400 Mar 16 '12 at 21:05
I've added links to EditForm in my sample. Image cropping is a bit outside SharePoint scope look for standard ASP.NET functionality, which might want to use in an EventReceiver. Paging isn't easy using CAML queries lookup SPListItemCollectionPosition on MSDN, but notice that SharePoint only supports forward paging (unless you use the REST interface) –  Per Jakobsen Mar 16 '12 at 21:31
Hey Per Jakobson Sorry to bother you again but Im wondering how I might be able to position each of these (Title + Image) side by side and not stacked? –  user7400 Mar 19 '12 at 19:14
The easy solution would be to create a table with two columns –  Per Jakobsen Mar 20 '12 at 7:09