Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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())
            {
                oSPWeb.AllowUnsafeUpdates = true;

                // 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)
                {

                    ListBox1.Items.Add(item.Title);

                }


            }

enter image description here

share|improve this question
    
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
add comment

1 Answer

up vote 3 down vote accepted

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();
    Controls.Add(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();
        table.Rows.Add(row);
        row.Attributes["onclick"] = string.Format("window.location='{0}';", fullEditUrl);
        row.Style[HtmlTextWriterStyle.Cursor] = "Pointer";

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

        var imageCell = new TableCell();
        row.Cells.Add(imageCell);
        if (item.Attachments.Count > 0)
        {
            imageCell.Controls.Add(new HyperLink()
            {
                ImageUrl = SPUrlUtility.CombineUrl(item.Attachments.UrlPrefix, item.Attachments[0]),
                NavigateUrl = fullEditUrl
            });
        }
    }
}
share|improve this answer
    
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
show 5 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.