none
Size an image in gridview? RRS feed

  • Question

  • I am just trying out EW3 and have a couple of issues I cannot seem to get a start on. One is: can I stipulate the size which an image is shown in gridview?

    I've searched the web but can't find it and things like the row style height property don't do it.

    I have a simple sample page up at www.khembalung.com/page1.aspx . As you can see there the default image is too big. I do not want to size the images themselves as they are used for other purposes elsewhere and there are thousands of them.

    Can anyone steer me in the right direction please?

    Thanks

    John

     

    Saturday, August 14, 2010 11:08 AM

Answers

  • John's comment is right on. There are however a few times when HTML resizing of an image make sense. For example, suppose all you need is to show these "thumbs" in the administration area of the site. You might not want to go through all the work it takes to resize images. In an example like that, html resizing makes a lot of sense, to me at least.

     

    I am assuming that you have, in a grid view, the large versions of the images displaying.  For me, I like to work down in the code, so I:

    1. Click on the gridview handle, upper right, and select EDIT COLUMNS

    2. I select the field name in the lower box, left. Then click on the link "Convert to a template field"

    3. Once that is done, you have some choices. I call them naughty and nice.

    As you may know, by "converting to a template field", it gives you a lot of freedom to reach into the code and make it do your bidding.

     

     

    - nice -

    set the size in an image control:

    <asp:Image id="Image1" Width="100px" imageurl='<%# "/pictures/ & Bind("mypicturefilename")%>' runat="server" />

    (Your imageurl will be of course different than mine..)

     

    -naughty- (Good old fashion html)

    <img width=100" src="/pictures/<#% Eval("mypicturefilename")%>" />

     

    Notice that when I went to the html version I changed Bind to Eval

     

    Rick

     

     


    rickidoo
    • Marked as answer by JohnBuckley Saturday, August 14, 2010 2:03 PM
    Saturday, August 14, 2010 1:41 PM

All replies

  • Since the larger images are used elswhere, make a small version just for the grid view.

    You really don't want to force a browser to resize an image because they do a terrible job.
    Use an image editor to resize / resample the image to the dimensions you want it to display.
    The free Irfanview will do an excellent job of resizing and many other functions:
    www.irfanview.com

     

     


    Expression Web MVP
    • Proposed as answer by Steve Easton Saturday, August 14, 2010 1:10 PM
    Saturday, August 14, 2010 1:08 PM
  • John's comment is right on. There are however a few times when HTML resizing of an image make sense. For example, suppose all you need is to show these "thumbs" in the administration area of the site. You might not want to go through all the work it takes to resize images. In an example like that, html resizing makes a lot of sense, to me at least.

     

    I am assuming that you have, in a grid view, the large versions of the images displaying.  For me, I like to work down in the code, so I:

    1. Click on the gridview handle, upper right, and select EDIT COLUMNS

    2. I select the field name in the lower box, left. Then click on the link "Convert to a template field"

    3. Once that is done, you have some choices. I call them naughty and nice.

    As you may know, by "converting to a template field", it gives you a lot of freedom to reach into the code and make it do your bidding.

     

     

    - nice -

    set the size in an image control:

    <asp:Image id="Image1" Width="100px" imageurl='<%# "/pictures/ & Bind("mypicturefilename")%>' runat="server" />

    (Your imageurl will be of course different than mine..)

     

    -naughty- (Good old fashion html)

    <img width=100" src="/pictures/<#% Eval("mypicturefilename")%>" />

     

    Notice that when I went to the html version I changed Bind to Eval

     

    Rick

     

     


    rickidoo
    • Marked as answer by JohnBuckley Saturday, August 14, 2010 2:03 PM
    Saturday, August 14, 2010 1:41 PM
  • Thank you very much. That also gives me an insight into where to go with other problems.

    Interestingly both Bind and Eval  work but I don't really understand them.

    <ItemTemplate>
                        <asp:image id="Image1" ImageUrl='<%# Bind("IMAGE") %>' width="50px" runat="server"  />
                    </ItemTemplate>

    or

    <ItemTemplate>
                        <asp:image id="Image1" ImageUrl='<%# Eval("IMAGE") %>' width="50px" runat="server"  />
                    </ItemTemplate>

    Possibly because the complete url is in the image field.

     

    John

    Saturday, August 14, 2010 2:08 PM
  • John's comment is right on. There are however a few times when HTML resizing of an image make sense. For example, suppose all you need is to show these "thumbs" in the administration area of the site. You might not want to go through all the work it takes to resize images. In an example like that, html resizing makes a lot of sense, to me at least

    Sorry, but I couldn't disagree more. Why download a full size image just to shrink it in  a browser window.
    It makes page rendering take longer and wastes bandwidth.

    <fwiw>
     With an image editor such as Irfanview, you can thumbnail a folder with 100 images in the time it takes to read this sentence.
    </fwiw>

     


    Expression Web MVP
    Saturday, August 14, 2010 3:56 PM
  • I'll have to agree with Steve on this one. Besides the obvious bandwidth and render time hit, it still remains the case that the algorithms used by browsers for quick, on-the-fly sizing of images is inferior to those used by dedicated graphics programs. Unless you just don't care about the quality of the result, that should play into your decision.

    Most sophisticated graphics editors, from Irfanview to Photoshop, include batch mode processing that can process a ton of images in no time at all. The job make take a tad longer to do right, but it is done only once and then that factor becomes moot.

    And, not to minimize the effect of size on required bandwidth. downloading, resizing, and then rendering twenty 1280 x 960 images (standard for a paltry 2 MP camera, much larger in these days of multi-megapixel cameras) takes significantly longer than downloading, no resizing required, and rendering pre-processed 320 x 240 thumbnails.

    Image information increases by the square of the difference in image pixel dimensions, so an image four times as large in both dimensions has sixteen times as much image information as the thumbnail. Do the math: 1280 x 960 = 1,228,800, while 320 x 240 = 76,800. Why download all of that extra baggage, only to strip away all of the unneeded image information using a substandard resizing algorithm?

    Your choice... ;-)

    cheers,
    scott 


    C'mon, folks. This isn't rocket science, nor neurosurgery. It's "Expression" (singular) "Web" (singular), in that order, followed by a version numeral if you wish to be specific. It is often abbreviated "EW." It is not "Web Expression," "Expressions Web," "Web Expressions," or plain "Expression" or "Expressions." Not using the correct name indicates either ignorance or laziness. Most folks would rather avoid the appearance of either.
    Saturday, August 14, 2010 5:45 PM
  • Actually in this instance I think resizing is the answer. To be fair I kept the question simple and you didn't have all the information and assumed that the image was large.  It's easy enough to write a script to reprocess the 6000 odd images I have but new ones are being made all the time. I would need to rewrite part of the database programme which produces them. It produces a large image about 1200x1200 and a smaller one 130x130 (pixels), which is used elsewhere on the website.

    So we are only here talking about an image which is about 130x130 and resizing it to fit in the grid. It seems to me that resizing in this very particular case is the better answer.

    Anyway I wanted to know how.

    Thanks

    John

    Saturday, August 14, 2010 6:08 PM
  • What size inage is actually "served" to the client?
    Expression Web MVP
    Saturday, August 14, 2010 8:22 PM
  • I haven't decided yet but probably about 85 x 85 px.

     

    John

    Sunday, August 15, 2010 12:52 AM
  • Ah... the example I gave was for a back end administrative panel, where bandwidth usage will be minimal on most small business sites.

    In such a case, when the html resizing is reasonable (e.g, taking a 400 px image and html shrinking to say 100px), then if I can save myself and the person who owns the website hours of work then I think its a worthy trade off.

    Here's where I would not do html resizing: on a public site or if the resizing was tremendous, e.g, a 15MB photo html sized down to 100px, even if it were in the admin section.

    Of course, there are on-the-fly ways in asp.net to take an image, create a thumbnail, and save it back to the server automatically, so one does not have to mess with a graphics program. But for the quick and dirty admin section, where I can be more flexable on what I can get away with, I use this technique where it makes sense.  Where it doesn't, I don't.

     

    Rick

     


    rickidoo
    Sunday, August 15, 2010 12:05 PM
  • [quote]

    I haven't decided yet but probably about 85 x 85 px.

    [/unquote]

    I think there's still misunderstanding here: Steve Easton is referring to "size" as in kilobytes or megabytes, not dimensions. 

    How big is the image in "k" or "Mb" (to find out, go to Windows explorer, right click the image file and select "properties" - this should give you the information about the file's size.   In EW the file list/manager should also list this kind of information.

    If the image is 50K, and 300px x 300px and you reduced it to75px x 75px, by just changing the dimensions, it is still a 50k image on the disk.

    You need to reprocess the image/optimise the file size with something like Irfanview as previously mentioned, not the actual dimension of the image as you see it on screen.

    Andrew M


    http://www.murraywebs.com

    "Nothing spoils numbers faster than arithmetic!"
    -- Peppermint Patty (Peanuts, Charles M. Schulz)
    Monday, August 16, 2010 10:55 PM