AutomaticImageResize: Difference between revisions
m (2 revisions imported) |
(No difference)
|
Latest revision as of 15:03, 6 April 2016
This has been tested in OmniWeb, Mozilla, Firefox, and Safari.
Add this javascript function to the javascript section of local/html/Elements/HEADER.
function resizeImage() {
var images = document.getElementsByTagName('img');
targetWidth = document.body.clientWidth - 250;
for (i=0; i < images.length; i++) {
if (images[i].width > targetWidth) {
images[i].width = targetWidth;
}
}
}
Next add this to the body tag in HEADER
onResize="resizeImage()" onLoad="resizeImage()"
so that it reads:
<BODY BGCOLOR="<%$BgColor%>"
ONLOAD="
% if ($Focus) {
var tmp = (document.getElementsByName('<% $Focus %>'));
if (tmp.length > 0) tmp[tmp.length-1].focus();
% }
resizeImage();"
onResize="resizeImage()"
>
(Above example taken from RT 3.2)
The above example didn;t seem to fit v3.8.4 very well, so I came up with this. maybe someone can improve. uses Scriptaculous "Scale" effect, since RT ships with Prototype/Scriptaculous anyway.
Copy html/Elements/HeaderJavascript to the "local" directory and then edit it to add the following after:
<script type="text/javascript" src="<%RT->Config->Get('WebPath')%>/NoAuth/js/scriptaculous/scriptaculous.js?load=effects,controls"></script>
% if($m->{'top_path'} =~ /(Display\.html|History\.html)/) { # try to only do this on ticket page
<script type="text/javascript">
// <![CDATA[
Event.observe(window, 'load', function() {
var z = $$('.messagebody img');
var maxImgWidth = document.viewport.getWidth() - 100;
z.each(function(n) {
if(n.getWidth() > maxImgWidth)
{
new Effect.Scale(n, 20, {scaleFromCenter:true} );
}
});
});
// ]]>
</script>
% }
The result is that only on Ticket pages, javascript will be added to the page that selects every img inside a messagebody CSS class, checks if it is wider than the viewport, and if so, applies the "Scale" effect to reduce it down to 20% original size.
Doing this will make it so you don't get scroll bars around images too large to fit in their assigned html area.