AutomaticImageResize

From Request Tracker Wiki
Jump to navigation Jump to search

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.