AutomaticImageResize

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.

AutomaticImageResize

Navigation menu

Search