Icon size
From Wikanual
INTERDUBS pre renders icons in a couple of sizes.
You can select the size of an icon to be used via the
Icons
configuration.
Contents |
Icon sizes to choose from
You can choose from the following value for their width:
| Width | File name prefix | Index |
|---|---|---|
| 75 | xxs_ | 1 |
| 100 | xs_ | 2 |
| 140 | s_ | 3 |
| 180 | 4 | |
| 240 | l_ | 5 |
| 320 | xl_ | 6 |
| 400 | xxl_ | 7 |
| source | orig_ | 108 |
The Y dimension will be scaled accordingly to maintain the aspect ratio of the source.
CSS class
On client pages INTERDUBS assigns the class
idx_icon
to all images used as icons. This allows you to style or resize the image files via HTML configurations.
When INTERDUBS uses a generic icon based on the type of the file and not based on an image of the file then the class
idx_icon
will be replaced with the class definition
idx_icon idx_genthumb idx_icon_FILEXTENSION
were FILEEXTENSION is actually the type of the file. For instance for a zip file this would look like:
idx_icon idx_genthumb idx_icon_zip
This allows you to style generic icons differently from those with images.
RSS Feeds
An Rss_feed can request icons with a specified size via the iconsizeindex switch.
Also see INTERDUBS_for_Web_Designers for more information about INTERDUBS web design.
Names of thumbnails for different resolution can be altered. By replacing a starting xxs_ with xxl_ you get a different file with the expected dimension.
Please note that this is not guaranteed to stay this way. It is safer to work in with iconsizeindex.
Y Size - and icon uprez avoidance
Since INTERDUBS scales icons for their X value it might be that icons grow large if the source clip or image has is quiet tall.
This can be avoiding be setting the maximum height of an icon via the
Upper limit for icon height and prevent icon uprez
configuration. If this value is set INTERDUBS will also use the original sized thumbnail should its width be smaller than the desired icon size. This avoid blurry thumbnail images.
corresponding carousel skins
If you use a reel look and would like to alter the thumbnail size then you need to make a change in 3 places:
Pixel size
First select from any of the pixel sized icon dimensions. The choice 'original' will not work.
css template keyword
Then find the css keyword for the carousel in HTML content and pick the corresponding value:
75px jcarousel-skin-idx01 100px jcarousel-skin-idx09 140px jcarousel-skin-idx03 180px jcarousel-skin-idx10 240px jcarousel-skin-idx07 320px jcarousel-skin-idx06 400px jcarousel-skin-idx08
As you can see the numbers of these carousel skin looks do not correspond to a size. This has historic reasons.
INTERDUBS will automatically load the proper css file when you select any of the jcarousel-skin looks.
javascript overlay
Finally you have to adjust the javacript code that displays the overlays in relation to the thumbnails.
For instance the values 185 for Y and 365 for X will work for 320px / jcarousel-skin-idx06
function showovl(val){
$j("#ovl" + val).css ("position" , "absolute" );
$j("#ovl" + val).css ("top" , 185 );
var xpos;
if (val == 0){
xpos = 0 ;
}
else{
xpos = val * 365;
$j("#ovl" + val).css ("left" , xpos );
$j("#ovl" + val).show();
//alert ('xpos: ' + xpos );
}
