Image distortion on MOSS People Search page
Recently I came across this issue where the images on the people search results page get distorted. Image was getting strecthed vertically and only part of the image was displayed horizantally. Images were not getting resized to 75*75 px as designed.
On analyzing, found that People Search Core Results web part is designed to display the people's my profile image in 75*75 px size. The web part contains the javascript function resizeProfileImage('img_id') which resizes the image. This javascript is set to trigger in 1 ms once the profile image is displayed. When there is large images this function will get triggerred before the image is loaded and hence causing the distortion.
To overcome this issue, I increased the trigger time of the above function to 2 sec i.e. window.setTimeout("resizeProfileImage('img_id')", 2000) . With this change issue didn't occurred again. However later I added the Faceted Search web part on the page, which was taking some time to compile the facets and due to this image distortion issue appearred again. This time I used different approach and added the below javascript to the page using a content editor web part and this resolved the image distortion issue permenenetly.
----------------------
<script>
function fnResizeNew()
{
var fields,i;
fields = document.getElementsByTagName('IMG');
for( i = 0; i < fields.length; i ++ )
{
var imgid = fields[i].getAttribute('id');
if(imgid.indexOf("CSR_IMG_") != -1)
{
resizeProfileImage(imgid);
}
}
}
_spBodyOnLoadFunctionNames.push("fnResizeNew");
</script>
------------------
On analyzing, found that People Search Core Results web part is designed to display the people's my profile image in 75*75 px size. The web part contains the javascript function resizeProfileImage('img_id') which resizes the image. This javascript is set to trigger in 1 ms once the profile image is displayed. When there is large images this function will get triggerred before the image is loaded and hence causing the distortion.
To overcome this issue, I increased the trigger time of the above function to 2 sec i.e. window.setTimeout("resizeProfileImage('img_id')", 2000) . With this change issue didn't occurred again. However later I added the Faceted Search web part on the page, which was taking some time to compile the facets and due to this image distortion issue appearred again. This time I used different approach and added the below javascript to the page using a content editor web part and this resolved the image distortion issue permenenetly.
----------------------
<script>
function fnResizeNew()
{
var fields,i;
fields = document.getElementsByTagName('IMG');
for( i = 0; i < fields.length; i ++ )
{
var imgid = fields[i].getAttribute('id');
if(imgid.indexOf("CSR_IMG_") != -1)
{
resizeProfileImage(imgid);
}
}
}
_spBodyOnLoadFunctionNames.push("fnResizeNew");
</script>
------------------
Labels: MOSS