Admin: 2 revisions imported

2016-04-06T20:03:18Z

2 revisions imported

New page

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 - Revision history

Admin: 2 revisions imported