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">
      <Switch>
        <Expr>
          <Column />
        </Expr>
        <Case Value=""></Case>
        <Default>
          <HTML>
            <![CDATA[<a href="]]>
          </HTML>
          <Column />
          <HTML>
            <![CDATA[">]]>
          </HTML>
          <HTML>
            <![CDATA[<img src="]]>
          </HTML>
          <Column />
          <HTML>
            <![CDATA[" style="border:0px;height=60;width=60;" /></a>]]>
          </HTML>
        </Default>
      </Switch>
    </RenderPattern>

-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.

Regards

Coordinator
Aug 3, 2011 at 9:06 AM

Hello,

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.

Anyway,

- 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 :)

Coordinator
Aug 3, 2011 at 9:39 AM

MMmmmmh.

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 :(

Coordinator
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 http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-5-using-the-listbox-and-databinding-to-display-list-data.aspx

Coordinator
Aug 3, 2011 at 11:04 AM

Hum

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 :

ID_of_uploaded_picture;#Path_toward_the_original_picture;#Path_toward_the_thumbnail

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.

Coordinator
Aug 4, 2011 at 4:20 AM

Hello,

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: http://stackoverflow.com/questions/232316/silverlight-image-load-url-dynamically

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,
                          }).ToList();

            this.NewsList.DataContext = _StaffNews;
        }

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

Coordinator
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);
Coordinator
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!

Coordinator
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?

Coordinator
Aug 11, 2011 at 5:05 AM

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

Coordinator
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.

Thanks