define image size, set default image

Aug 3, 2011 at 8:57 AM

Hi ssougnez & all

I have 2 questions:

-1.  In the new Areaprog.ImageField project, can i ask u how i may set the image size to be the same for every custom list item created? I did something similar with the previous project 'ImageField' by modifying 'fldtypes_ImageField.xml to the following:

<RenderPattern Name="DisplayPattern">
          <Column />
        <Case Value=""></Case>
            <![CDATA[<a href="]]>
          <Column />
            <![CDATA[<img src="]]>
          <Column />
            <![CDATA[" style="border:0px;height=60;width=60;" /></a>]]>

-2. Also, How can i set the default image to point to an image file(default.png) located within the project, if the user fails to select a picture to upload on creation of a SharePoint 2007 custom list item? Any ideas please? Much appreciated.


Aug 3, 2011 at 9:06 AM


for your first question, you can do something like you did expect that it is in the xsl file. Actually, for the list view, I use thumbnails generated by SharePoint. Indeed, if the user uploads a file of 3 MB, it would be very inefficient to load this picture in the list view, so I load the thumbnail. So if you define a size greater than the thumbnail, the picture shown will have a bad rendering quality.


- just edit the line <xsl:text>border-width:0px;</xsl:text> in the xsl file and add the width/height attribute. If you just do it, I advice you to define a size smaller than the thumbnail one
- If you want a size greater than the thumbnail, change also this line :

<xsl:value-of select="substring-after(substring-after($PictureUrl, ';#'), ';#')" />

By something like

<xsl:value-of select="substring-before(substring-after($PictureUrl, ';#'), ';#')" />

But pay attention that if you do that, the original image will be loaded, not the thumbnail, so if image is 3 MB, 3 MB will be load and then the image will be resize, so be careful of what you want ;-)

For your second question, it is not possible in this release but I will think about it and maybe implement it ;-)

Aug 3, 2011 at 9:34 AM

Hi ssougnez

Please pardon me for my lack in understanding in this project, while i pick up as fast i can. Actually, it does not matter (to me)if the thumbnail is generated by SP or the original image, as long as i may define a standard size for every image @ the custom list. Also, i cannot seem to find this xsl file?

Your patience towards my ignorance has made my day :)

Aug 3, 2011 at 9:39 AM


If you have downloaded the source code of Image Field, you can find the XSL in the XSL folder. The file is called fldtypes_ImageField.xsl.

Aug 3, 2011 at 10:26 AM

Yes ssougnez, i did download the related source code only to find it(XSL) at folder 'SharePoint 2010'. I am using MOSS 2007 & i am able to open the solution file of folder 'SharePoint 2007', but not at 'SharePoint 2010'. For fear that i may "damage" the code, i did not do any imports from the latter to the former project.

I'm stuck :(

Aug 3, 2011 at 10:30 AM

Ow yeah ! Sorry, I thought that you were on SPS 2010 ;-)

So, for SP 2007, it is almost the same thing except that you have to edit the file fldtype_ImageField.xml. Locate the following line :

<![CDATA[" />]]>

And change it to

<![CDATA[" style="width:60px;height:60px" />]]>

And normally, it will be OK ;-)

Aug 3, 2011 at 10:58 AM

Hi ssougnez, you totally saved my life! :) Now for the 3rd question if i may, can i check with you:

- Suppose i have a Silverlight 2.0 (web part) to be added to the SharePoint 2007 site, which retrieves data from a custom list via lists.asmx (it's working),

- it displays each item in the custom list to my Silverlight control in a ListBox (title,image,description etc),

- the constructors takes in 'strings', which include rendering the images via a web link (previous column field type was 'Hyperlink or Picture' before i implemented this project AreaProg.ImageField)

- so will you please guide me as to which section of your code where i may retrieve that image value (string) to be passed into the Silverlight control? Definitely i would like to understand how you did it so i can do it :) I would most certain to post my code snippet if you like.

- in any way, if you do decide to implement my 2nd question @ my 1st post, do notify me as well.

- my current Silverlight application is similar to this thread

Aug 3, 2011 at 11:04 AM


normally, when you retrieve list items from lists.asmx, you already have the information. You can retrieve the value of the image field as for any other field like Title.

If I remember well, when you retrieve the xml response of lists.asmx, there are Element <z:Row that contain attributes like ows_Title. Saying that you have a field "Picture" (Image Field Type). In the XML response, you'll have an attribute ows_Picture.

The format of Image Field value is :


You can just analyzing the value and retrieve the part you want to.

I hope I'm cleary enough (I'm french, so sorry for my poor English :-D)

Aug 3, 2011 at 11:11 AM

ssougnez you are so helpful ;) Nice. Will try it out & keep you updated. Thanks so much for the time!

Aug 4, 2011 at 3:41 AM

Hi ssougnez

Based on your guidance as above, somehow i do get to see something like "value "20;#http://moss:48420/Image Picker Picture List/1e166fc4-a07a-4680-a52a-c04f75394cc9.jpg;#http://moss:48420/Image%20Picker%20Picture%20List/_t/1e166fc4-a07a-4680-a52a-c04f75394cc9_jpg.jpg" string" @ the console. How can i utilize it & perhaps convert it to an image(if i need to), to my Silverlight control? I was thinking if each image @ the custom list was read in & converted via bytes, i may actually pass them via parameters to the silverlight control? Im confused. :(

Thank you ssougnez.

Aug 4, 2011 at 4:20 AM


as I said, this value is a concatenation of Picture ID, Image URL and Thumbnail URL. So, if you wan't to display the thumbnail in Silverlight, you have to do a substring in this value in order to retrieve string after the last ";#" and after, you can load your image in Silverlight as explained here:

Aug 4, 2011 at 5:36 AM

Hi ssougnez

The closest i could get is something like the following, based on the link you provided me with. Will you correct & enlighten me please? :(

private void ProcessResponse2()
            XDocument results = XDocument.Parse(_responseString);

            _StaffNews = (from item in results.Descendants(XName.Get("row", "#RowsetSchema"))

                          //where !item.Element("NewsThumbnail").Attribute("src").Value.EndsWith(".gif")
                          select new StaffNews()
                              Title = item.Attribute("ows_Title").Value,
                              NewsBody = item.Attribute("ows_NewsBody").Value,
                              Thumbnail = FormatImageUrl2(item.Attribute("ows_Thumbnail").Value),
                              DatePublished = item.Attribute("ows_Date_Published").Value,
                              PublishedBy = item.Attribute("ows_PublishedBy").Value,

            this.NewsList.DataContext = _StaffNews;

        private string FormatImageUrl2(string value)
            return value.Substring(0, value.IndexOf(','));

Aug 4, 2011 at 5:58 AM

Once "ProcessResponse2" is executed, is your collection correct ? Does it contain StaffNews item ?

I also think that your FormatImageUrl2 is not correct. I'll rather see something like this :

private string FormatImageUrl2(string value)
        return value.Substring(value.LastIndexOf(";#") + 2);

Now, if your collection is correct, you just have to do something like :

Uri uri = new Uri(StaffNewsObj.Thumbnail);
YourImage.Source = new BitmapImage(uri);
Aug 4, 2011 at 7:19 AM

Hi ssougnez

The collection is correct as it contains StaffNews items. Assuming that i have edited FormatImageUrl2() to your suggestion, I'm not sure if/how the following lines apply to ProcessResponse2(), as 'Thumbnail' will set the image to the datacontext of the ListBox named 'NewsList', @ the xaml file?

Uri uri = new Uri(StaffNewsObj.Thumbnail);
YourImage.Source = new BitmapImage(uri);
Aug 4, 2011 at 7:22 AM

Actually, I'm not very experimented with Silverlight.

If, in you collection items are good and the Thumbnail Url too, you have to find a way to convert the url in a valid Source property. If I'm not wrong, it is possible to make some custom converter that convert value in other format during the binding, but I'm not sure. Just make a few search on this subject and you'll surely find what you want

Aug 4, 2011 at 10:10 AM

Thanks so much ssougnez :) Your time to this matter helped me nonetheless. Also, if the 'default image' function is implemented, i would be most interested!

Aug 4, 2011 at 6:56 PM

Hi ssougnez

You do know Silverlight, definitely :) Your solution (substring) worked! Turns out that if a user did not specify an image @ the SP custom list item, it would generate the exception @ the Silverlight control & prevent it from displaying the image properly. Which still suggests that if this project includes a 'default image' functionality, things would turn out even greater :)

Thumbs up for your project & help anyw!

Aug 5, 2011 at 5:47 AM

I'll let you know as soon as I finished the modification that you asked (I'll try to do it during the week end).

During this time, can you rate the codeplex please ? :p

Aug 8, 2011 at 2:18 AM
Edited Aug 8, 2011 at 2:48 AM

Hi ssougnez

In the meantime, as a temporary solution to your 2nd possible implementation mentioned @ my 1st thread, I was wondering if i may edit the following source code @ CreateChildControls():

from:  //ddlExistingPicture.Items.Add(new ListItem("none", "-1"));

to: //ddlExistingPicture.Items.Add(new ListItem("noimage.jpg", "-1"));

Doing so will not somehow force the picture available @ the picture library to be uploaded with the creation of new items @ the custom list. How may i achieve it? (as a temporary solution) Or rather, i may actually include 'noimage.jpg' @ the picture library but it'll be the 1st item @ the combobox? I understand you have your liabilities as well. Much appreciated! :)

Aug 10, 2011 at 1:04 AM

Hi ssougnez?

Aug 11, 2011 at 5:05 AM

Yeah sorry, I'm currently quite busy. I'll answer you ASAP.

Aug 11, 2011 at 6:02 PM

Hello miiike.

Can you please create a new issue for your request ? It is easier for me to not forget it with this manner. I will normally be able to do what you want this week end.