Resizing an image within a sharepoint list

Question

_{Monday, April 11, 2011 11:59 AM}

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

All replies (14)

_{Monday, April 11, 2011 12:15 PM | 2 votes}

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:25 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)
Number
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:43 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:51 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:56 PM}

Sorry ... I found it. Still not quite awake today!

Thanks,

R

_{Monday, April 11, 2011 1:30 PM}

Another way to do this would be to rezise it with JavaScript, Here is a link which should work for you.

http://atomgiant.com/2006/05/30/resize-images-with-javascript

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

Good Luck,

Gary

Gary Newman MCSE, MCT, CCNA MCDBA, MCAD, MCSA MCTS SharePoint 2007 Dev & Admin MCPD SharePoint 2010 Development

_{Monday, April 11, 2011 3:28 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]

https://address.com/picture.jpg" width="50" style="border:0px solid" />

_{Tuesday, July 3, 2012 8:43 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.

_{Monday, August 24, 2015 6:10 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.

_{Wednesday, May 24, 2017 10:49 PM | 1 vote}

Although this question is old, I noticed there are no good answers anywhere so I wrote a simple CSS to do the trick:

<style>

.ms-listviewtable img {

   width: 220px;

}

.ms-headerSortArrowLink {display:none;}

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

</style>

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.

_{Tuesday, August 22, 2017 4:44 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

[email protected]

_{Monday, October 23, 2017 1:52 PM | 1 vote}

If you modify your style to be more specific in what it's selecting, you don't need to hide anything. 

<style>
.ms-listviewtable .ms-cellstyle img {
    width: 144px;
    }
</style>

_{Tuesday, June 25, 2019 8:27 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.

_{Friday, August 23, 2019 6:58 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