Width / height image in categories/category view
Posted: 21 Aug 2013, 12:20
Hi,
I had a problem with Imported Facebook albums in Phoca Gallery. The images in categories / category view filled the screen in Internet Explorer => a mess.
So, I did some research what the problem could be.
These were my settings in options:
Thumbnails => Images And Detail Window Size Settings
Medium Image Height & width: 104
Category View Settings: Different Thubmnail Height : No
This works perfectly in Chrome/Firefox/..., but not in IE. How come?
As it turns out, the attributes width and height of an image are overwritten by css attributes.
In Twitter bootstrap is width = auto and height =auto\9. Chrome detect this as auto and fits the image to the box. IE ignores this and uses the real size of the image.
=> Real size is 480*720 (or 720*480) for facebook images
=> cause of the problem
Solution:
Add width and height not as <img width height, but like <img style="width:...px;height:...px;"
So I changed the source code a bit.
I don't know if I missed a setting, but this is working for me (in all browsers)
I had a problem with Imported Facebook albums in Phoca Gallery. The images in categories / category view filled the screen in Internet Explorer => a mess.
So, I did some research what the problem could be.
These were my settings in options:
Thumbnails => Images And Detail Window Size Settings
Medium Image Height & width: 104
Category View Settings: Different Thubmnail Height : No
This works perfectly in Chrome/Firefox/..., but not in IE. How come?
As it turns out, the attributes width and height of an image are overwritten by css attributes.
In Twitter bootstrap is width = auto and height =auto\9. Chrome detect this as auto and fits the image to the box. IE ignores this and uses the real size of the image.
=> Real size is 480*720 (or 720*480) for facebook images
=> cause of the problem
Solution:
Add width and height not as <img width height, but like <img style="width:...px;height:...px;"
So I changed the source code a bit.
Code: Select all
line68 default_images.php : (site/views/category/)
echo "<img src='" . $cv->extm ."' alt='". $cv->altvalue."' style='width:". $correctImageRes['width'] ."px;height:".$correctImageRes['height'] ."px;' class='pg-image' />";
//echo JHtml::_( 'image', $cv->extm, $cv->altvalue, array('width' => $correctImageRes['width'], 'height' => $correctImageRes['height'], 'class' => 'pg-image'));
line20 default_categories.php: (site/views/categories):
echo "<img src='" . $cv->linkthumbnailpath ."' alt='". $cv->title."' style='width:". $correctImageRes['width'] ."px;height:".$correctImageRes['height'] ."px;'/>";
//echo JHtml::_( 'image', $cv->linkthumbnailpath, $cv->title, array('width' => $correctImageRes['width'], 'height' => $correctImageRes['height']));I don't know if I missed a setting, but this is working for me (in all browsers)