All right, I have a question that isn't necessarily specific to component, but that's the layout I'm trying to work in, so I am posting here.
I want to be able to have userpics appear with my entries, but I want to make them no larger than 50px in width or height. I know how to write the code so that the image size will always be 50x50, but that is not exactly what I want. Instead, I would like to be able to have the icon's proportions retained when either the width or the height is resized to 50px. Essentially, I don't want the icon to look "squished" or "stretched" when I resize it.
I cannot figure out how to do this. At all. I'm not having an error when I compile the script, it's just the effects are not appearing in my browsers (Firefox, Safari on Mac). I'm guessing this has to do with the undefined width or height property in the HTML. I am not playing with CSS so this isn't a CSS issue. Anyway, here's my code under the cut.
var string width_height = "";
if ($show_poster or $show_userpic) {
if ($show_border) {
$iconborder = "border: thin solid $*entry_fgcolor;";
}
if ($e.userpic.width > $e.userpic.height) {
$width_height = $width_height + """width="50" height="" """;
}
elseif ($e.userpic.width < $e.userpic.height) {
$width_height = $width_height + """width="" height="50" """;
}
else {
$width_height = $width_height + """width="50" height="50" """;
}
$icon_data = $icon_data + """<div class="iconholder" style="$iconborder">\n""";
if ($show_userpic) {
if ($show_poster and $show_userpic) {
$icon_data = $icon_data + """
<div style="padding: 3px; background-color: $bgcolor;"><a href="$*SITEROOT/allpics.bml?user=$e.poster.username"><img border="0" src="$e.userpic.url" $width_height alt="$e.poster.name" title="$e.poster.name" style="border-color: $fgcolor;" /></a></div>""";
} else {
$icon_data = $icon_data + """<div style="padding: 3px;"><img border="1" src="$e.userpic.url" $width_height alt="" /></div>""";
}
}
if ($show_poster) {
$icon_data = $icon_data + """<div class="ljuser">$e.journal""";
if ($e.journal.username!=$e.poster.username) {
$icon_data = $icon_data + "<br />$e.poster";
}
$icon_data = $icon_data + """</div>""";
}
$icon_data = $icon_data + """</div>""";
}Layer ID: 5904865
Edit: I'm thinking I might just have to come up with some sort of algorithm to make this work, but I honestly have no clue how to do that without going through each possible pixel size & figuring out what the height/width ratio is.