Scenario: the source Catalogue has 256 pixel thumbnails but you wish to use a smaller size in your PortWeb pages for layout purposes.
There are 2 possible solutions, depending on whether bandwidth is an issue (for the user as much as yourself).
1 - Bandwidth is not a factor
(Solution by User forum member MaryE)
Here's the underlying algorithm: take the largest dimension (of parameters height, width), and divide into desired dimension (targetSize). Use it as a multiplier for both height and width. Max dimension will be the desired dimension, the other will size appropriately. I wouldn't want to do more than 10 or 20 per page without testing the overhead of the JavaScript "parseFloat()" function.
Here's the code for the Header and Item blocks of the template:
--------------- Header -------------------------------
<HTML>
<HEAD><TITLE> Portfolio -%page%/%TotalPages%</TITLE>
<script>
<!--
function writeImg(src, h, w)
{
var targetSize = 128;
var max = (h > w)? h: w;
var mul = parseFloat(targetSize/max);
document.write ('<IMG src = "' + src + '" height=' + (h * mul) + ' width=' + (w * mul) + ' >';
}
//-->
</script>
</HEAD>
<BODY bgcolor=#C0C0C0 TEXT=#000000>
<FORM>
<Table Border = 0 cellspacing = 30>
------------------ Item Block -------------------------
<TD Align = left Width = 200>
<FONT FACE="Arial" SIZE=2>
<script>
writeImg(%thumbnail%, %Height%, %Width%);
</script>
<BR>
------------------ /Item Block -------------------------
2 - Bandwidth is a factor
(by PortfolioFAQ)
This solution is more time consuming but will equip you with both larger and smaller (112x112) thumbnails for use with the same catalogue, e.g. large for normal client work and small for PortWeb supplied pages.
Portfolio will only hold one size of thumbnail in the catalogue. If you scale 256 pixel thumbnails in the browser, you are still downloading the larger thumbnail image, with the bandwidth implications, even though they are rendered on screen at a smaller size.
The alternative is to create another set of lower resolution thumbnails. This method is a lot of work but may suit your needs.
You could leave out the extra step of getting the thumb height/width but having it will help your template pages to render faster and with less on-screen movement of page elements during page rendering.
Question: Can I create smaller thumbnails for my HTML pages - or re-scale them? [FAQ00217.htm]
Last Update:- 31 May 2006
Site and articles © Mark Anderson 2001-2007 - Visit my home page