Resizing an image within a sharepoint list RRS feed

  • Question

  • Hi, 

    I have a sharepoint list with a Picture column.

    This picture is retrieved from a URL. However, the image is too large and I'd like to resize it without creating a duplicate, smaller image.


    Any ideas??

    Monday, April 11, 2011 11:59 AM

All replies

  • There is a alternate for picture column. Use the picture publishing column instead picture columun. It allows user to resize the picture(also paly with other picture properties) and allows user to pickup the image from the portel.

    1. Go to Site setting --> Site Columns --> Create new column

    2. Name the column as you like and select "Image with formatting and constraints for publishing" type.

    3. Navigate back to the list/library where you want to display the picture.

    4. Go the the list/library settings and click Add from existing site columns

    5. Select the new column that got created in step 2

    6. Click ok

    7. Add new item and enjoy editing the picture properties.


    Hope this will help you


    Senthilrajan Kaliyaperumal
    Monday, April 11, 2011 12:15 PM
  • Thanks very much for the speedy response.

    However, I don't have that column type available...
    These are my only options: 

     The type of information in this column is:  

    Single line of text
    Multiple lines of text
    Choice (menu to choose from)
    Currency ($, ¥, €)
    Date and Time
    Lookup (information already on this site)
    Yes/No (check box)
    Person or Group Name
    Hyperlink or Picture
    Calculated (calculation based on other columns)
    External Data
    AJAX Lookup
    Managed Metadata
    Monday, April 11, 2011 12:25 PM
  • This column type will be available if you create a new site column(not list columns). Kindly follow the above steps.
    Senthilrajan Kaliyaperumal
    Monday, April 11, 2011 12:43 PM
  • Sorry, i should have been more specific.

    I followed the steps, adding the Site Column to Custom Columns.

    However the column does not appear as an option for my new list column...

    Monday, April 11, 2011 12:51 PM
  • Sorry ... I found it. Still not quite awake today!




    Monday, April 11, 2011 12:56 PM
  • Another way to do this would be to rezise it with JavaScript, Here is a link which should work for you.

    This is done after page loads, but should still fulfill your needs.

    Good Luck,


    Gary Newman MCSE, MCT, CCNA MCDBA, MCAD, MCSA MCTS SharePoint 2007 Dev & Admin MCPD SharePoint 2010 Development
    Monday, April 11, 2011 1:30 PM
  • Thanks for the second suggestion.
    I actually got it working, so I can see the images when viewing the "Manage Content and Structure" edit page.


    However, I've created a view with this in and when viewing that view in a Live webpart, the image is not shown.
    There is a blank image placeholder, followed by the sizing html elements.

    Any idea what might be causing this and how to resolve it?



    [IMAGE PLACEHOLDER WITH RED X]" width="50" style="border:0px solid" />

    Monday, April 11, 2011 3:28 PM
  • You can use free Picture column for SharePoint 2010 that allows to upload images from local disk and displays them in list views. In columns settings page, you can specify image size for list views.

    If you need to automatically resize image during its upload or need thumbnail generation for list views, you can take a look at the commercial products, like Sparqube Picture Column.

    Tuesday, July 3, 2012 8:43 PM
  • Senthilrajan,

    I can't thank you enough. I've been scouring the web trying to figure out how to render a list attachment as a resizable picture without using SharepointDesigner or JavaScript. This is the simple answer I was looking for. If anyone is curious on how to show the attachment, just copy the attachment address into the new Site Column.

    Monday, August 24, 2015 6:10 PM
  • Although this question is old, I noticed there are no good answers anywhere so I wrote a simple CSS to do the trick:


    .ms-listviewtable img {

       width: 220px;


    .ms-headerSortArrowLink {display:none;}

    .ms-newdocument-iconouter {display:none;}


    Basically I'm setting the width of the image to 220px in the listview table, and then hiding a couple elements that popup awkward when you apply the css. Just use a script editor web part and this works perfect.

    Wednesday, May 24, 2017 10:49 PM
  • Please explain, I did the exact same thing but it is an empty filed nothing happens when I click on the image button. Please email me if you can or post it here because I need this to work Thank you

    Tuesday, August 22, 2017 4:44 PM
  • If you modify your style to be more specific in what it's selecting, you don't need to hide anything. 

    .ms-listviewtable .ms-cellstyle img {
    	width: 144px;

    Monday, October 23, 2017 1:52 PM
  • This works almost perfect for me, an unfortunate side effect is that the More Options (Ellipsis) image is also affected, I can't seem to edit the script to avoid this.
    Tuesday, June 25, 2019 8:27 PM
  • Hi, i know this unrelated, but do you know how to make an image in the list expand(enlarge) once hovered over. Thank you
    Friday, August 23, 2019 6:58 PM