Avatar resize script

HunterP · 5 sep 2010

Besten,

Voor gebruik op een forum heb ik onderstaand javascript welke controleert of de gebruikersavatars niet groter zijn dan de maximum afmetingen en deze indien nodig naar beneden schaalt :

Code:

function smf_avatarResize()
{
	var possibleAvatars = document.getElementsByTagName ? document.getElementsByTagName("img") : document.all.tags("img");

	for (var i = 0; i < possibleAvatars.length; i++)
	{
		if (possibleAvatars[i].className != "avatar")
			continue;

		var tempAvatar = new Image();
		tempAvatar.src = possibleAvatars[i].src;

		if (smf_avatarMaxWidth != 0 && tempAvatar.width > smf_avatarMaxWidth)
		{
			possibleAvatars[i].height = (smf_avatarMaxWidth * tempAvatar.height) / tempAvatar.width;
			possibleAvatars[i].width = smf_avatarMaxWidth;
		}
		else if (smf_avatarMaxHeight != 0 && tempAvatar.height > smf_avatarMaxHeight)
		{
			possibleAvatars[i].width = (smf_avatarMaxHeight * tempAvatar.width) / tempAvatar.height;
			possibleAvatars[i].height = smf_avatarMaxHeight;
		}
		else
		{
			possibleAvatars[i].width = tempAvatar.width;
			possibleAvatars[i].height = tempAvatar.height;
		}
	}

	if (typeof(window_oldAvatarOnload) != "undefined" && window_oldAvatarOnload)
	{
		window_oldAvatarOnload();
		window_oldAvatarOnload = null;
	}
}

Het gekke is dat tijdens het laden van de pagina alle avatars die juist kleiner zijn dan de max. afmetingen juist worden uitgerekt naar deze max. afmetingen om vervolgens, wanneer de pagina volledig is geladen, weer de normale afmetingen aan te nemen.

Blijkbaar doet het script ook iets met een avatar die niet te groot is, maar dat kan ik er zelf zo 1,2,3 niet uit afleiden...

Groeten, Peter.

csshunter · 5 sep 2010

Hoi Peter,
Ik haal het er ook niet zo 1-2-3 uit, maar heb een paar vraagpuntjes:

De smf_avatarMaxWidth en de smf_avatarMaxHeight worden in deze functie niet gedefinieerd, dat zal ergens anders gebeuren. Is dat alleen het toekennen van een waarde, of gebeurt dat op een andere manier?
Waarvoor is de tussenstap van een tempAvatar nodig, kan dat niet meteen met de gevonden possibleAvatars?
[*]En wat doet die functie window_oldAvatarOnload(); die op het laatst wordt aangeroepen?

Met vriendelijke groet,
CSShunter

ErikBooy007 · 5 sep 2010

Euhm, wellicht te simpel gedacht, maar even in de CSS een max-width en max-height toevoegen?

csshunter · 6 sep 2010

Da's best een goeie ...

... op het eerste gezicht.
Complicatie is, dat zowel de breedte als de hoogte een maximum hebben en je niet tevoren weet welk max overschreden gaat worden.

Voorwaarde lijkt me, dat in de html geen waarden staan voor de hoogte en de breedte, anders wordt de avatar uit model getrokken als er een hor. max is en de hoogte oké is (vice versa). - Dat is nog wel te overkomen.

Maar je loopt altijd het risico dat beide maxen overschreden worden, en de avatar eveneens uit proporties raakt. *)
Mijn conclusie: we hebben geen "voorwaardelijk css", dus het zal toch vlooien met js moeten worden.

Met vriendelijke groet,
CSShunter
__________
*) Tenzij zo'n avatar altijd een vierkantje is, dan heb je er geen last van (maar dan is ook 1 max voldoende).

HunterP · 9 sep 2010

Sorry voor de wat latere reaktie, maar het ligt iets anders dan ik dacht. Het script doet wat hij moet doen, maar als de beheerder van het forum (ben ik niet zelf) een maximum opgeeft, bijvoorbeeld 100x100 dan wordt dit ook in de HTML gezet. Alle avatars worden bij een pageload in eerste instantie geschaald naar 100x100 (zowel als ze kleiner of groter zijn) en pas als de pagina volledig geladen is komt het script in beweging en die zet alles recht. Die HTML code heb ik even over het hoofd gezien, ik had ook niet verwacht dat die beheersinstelling de afmetingen op 2 plekken neer zou zetten.

De CSS optie ga ik even proberen, waarvoor dank!

Groeten, Peter.

HunterP · 9 sep 2010

HunterP zei:
De CSS optie ga ik even proberen, waarvoor dank!

Werkt wel, maar het nadeel hiervan is dat de breedte/hoogte verhouding kan veranderen. Als ik een max instel van 100x100 en een avatar is 200x100 dan wordt daar 100x100 van gemaakt en wordt hij in de breedte dus in elkaar gedrukt. Eigenlijk zou dit dus 100x50 moeten worden, maar ik vrees dat we daar toch javascript voor nodig hebben...

csshunter · 10 sep 2010

Tja, als de avatars geen verplichte vaste verhouding hebben dan vrees ik dat ook.

En m.b.t. die aan- en uitfloepende beheerdersinstellingen gedurende het inladen: kan je die niet op een of andere manier overrulen door jouw javascript op een goede plek in de <head> te zetten? *)
Of kan je daar niet bij?
- Niet helemaal onwaarschijnlijk trouwens, dat die beheerdersinstellingen het met php of anderszins serverside doen. Want zolang er nog ingeladen wordt, hebben de avatars nog geen aanhaakpunten. Ze kunnen pas met javascript bewerkt worden als die er wel zijn (na het inladen), lijkt me. Dan zouden die beheerdersinstellingen niet met javascript werken, dus.
En kunnen ze ook niet van buitenaf onschadelijk gemaakt worden.

Dan is de ultieme oplossing: goede maatjes met de beheerder/ster worden.

Met vriendelijke groet,
CSShunter
_____________
*)
Of bv. iets als de hele <div> waar die avatars en andere personalia in zitten, tijdelijk uitschakelen met css:

Code:

.memberData { visibility = 'hidden'; }

...
// dan rustig alles laten klaarzetten
...
[JS]
window.onload = function() {
var avatars = document.GetMemberDataElementsByHunLurven;
avatars.style.visibility = 'visible';
}[/JS]
Of stiekem voor tmp:
[JS]avatars.src = "http://ergens.nl/images/transparant.gif";[/JS]

[edit]Hé (los van de tijdelijke vertoning), als die beheerdersinstellinengen de avatars al in verhouding terugbrengen tot een vast formaat, dan hoef je die max.with of max.height niet zelf te gaan bepalen, en kan je gewoon volstaan met .avatarStyle { width: [jouwGewensteBreedte]px;}. Zou dan desgewenst ook dynamisch kunnen met een width in een % van de beschikbare kolombreedte. Noscript?![/edit]

HunterP · 10 sep 2010

csshunter zei:
[edit]Hé (los van de tijdelijke vertoning), als die beheerdersinstellinengen de avatars al in verhouding terugbrengen tot een vast formaat, dan hoef je die max.with of max.height niet zelf te gaan bepalen, en kan je gewoon volstaan met .avatarStyle { width: [jouwGewensteBreedte]px;}. Zou dan desgewenst ook dynamisch kunnen met een width in een % van de beschikbare kolombreedte. Noscript?![/edit]

Klinkt opzich logisch, maar als ik het goed begrepen heb komt dat javascript automatisch tevoorschijn als er maximale afmetingen worden opgegeven. Dan zou ik moeten kijken of dat JS uit te schakelen is, maar de vraag is hoe hard-coded dat is om niet teveel aan de PHP te hoeven sleutelen...

EDIT: Nog een nadeel, dan worden avatars die kleiner zijn dan het maximum opgerekt. Geen ramp, maar ook niet echt netjes

csshunter · 10 sep 2010

Nog een nadeel, dan worden avatars die kleiner zijn dan het maximum opgerekt. Geen ramp, maar ook niet echt netjes

Nou, als het lukt om die superinstellingen te passeren, dan zou dat volgens de laatste "else" in jouw script niet het geval mogen zijn: die pakt de ware grootte op als het max. niet wordt overschreden. Isn't it?

PHP?
Misschien nog een heel andere optie. Met php is het mogelijk om images on the fly te wijzigen. Ik heb daar geen ervaring mee, maar ik Google'de op make img with php, en de eerste hit was deze tutorial, waarin ze zeggen:

From this tutorial, you will be able to create or modify an existing image in PHP.

Dan zou je de avatars zelf kunnen downscalen voordat ze gedownload worden, in plaats van het achteraf scriptsgewijze veranderen van de formaat-gegevens met downscalen door de browser.
Als je php in je pagina kunt frommelen, zou dat misschien de kip van Columbus kunnen zijn.

En het mooiste zou natuurlijk zijn, als de ingezonden avatars op een dergelijke manier aangepakt worden vóórdat ze de database in gestopt worden. Dus op moment van het uploaden door de gebruiker. Dan zijn ze meteen al goed. Kan dat eigenlijk niet?

Met vriendelijke groet,
CSShunter

ErikBooy007 · 10 sep 2010

Ik heb wel een beetje ervaring met images in PHP

. Ik ga eens wat voor je in elkaar knutselen, ik zal mijn bevindingen hier zo posten!

ErikBooy007 · 10 sep 2010

Dit is wat ik ervan gebakken heb, maar werkt helaas niet zo goed als ik verwacht had. Er gaat iets met de kleuren helemaal mis.

De code:

PHP:

<?php

	//ini_set ( 'display_errors' , 0 );

	$type;
	$image;

	$sUrl = $_GET[ 'url' ];

	$aHeaders = getimagesize ( $sUrl );
	
	header('Content-type: ' . $aHeaders[ 'mime' ]);
	
	if ( $aHeaders[ 'mime' ] == "image/gif" ) {
		$image = imagecreatefromgif ( $sUrl );
	} else if ( $aHeaders[ 'mime' ] == "image/png" ) {
		$image = imagecreatefrompng ( $sUrl );
	} else if ( $aHeaders[ 'mime' ] == "image/jpeg" ) {
		$image = imagecreatefromjpeg ( $sUrl );
	} else {
		exit;
	}
	
	$iAR = $aHeaders[ 0 ] / $aHeaders[ 1 ];
	
	if ( ( !isset ( $_GET[ 'width' ] ) || !ctype_digit ( $_GET[ 'width' ] ) ) &&  ( !isset ( $_GET[ 'height' ] ) || !ctype_digit ( $_GET[ 'height' ] ) ) ) {
		
		exit;
		$type = false; // geen geldige hoogte en geen geldige breedte opgegeven.
		
	} else if ( !isset ( $_GET[ 'width' ] ) || !ctype_digit ( $_GET[ 'width' ] ) ) {
		
		$type = 1; // hoogte is wel gezet, breedte niet
		$height = $_GET[ 'height' ];
		$width = round ( $_GET[ 'height' ] * $iAR );
		
	}  else if ( !isset ( $_GET[ 'height' ] ) || !ctype_digit ( $_GET[ 'height' ] ) ) {
		
		$type = 2; // breedte is wel gezet, hoogte niet
		$height = round ( $_GET[ 'width' ] / $iAR );
		$width = $_GET[ 'width' ];
		
	} else {
		
		$type = 3; // beide waarden zijn gedefinieerd
		$height = $_GET[ 'height' ];
		$width = $_GET[ 'width' ];
		
	}
	
	$newImage = imagecreate ( $width , $height );
	
	imagecopyresampled  ( $newImage , $image , 0 , 0 , 0 , 0 , $width , $height , $aHeaders[ 0 ] , $aHeaders[ 1 ] );
	
	imagejpeg ( $newImage, NULL, 100 );
	
	


?>

Je kunt het proberen via http://www.erikbooy.nl/Overige/image.php?{absoluatpadnaarafbeeldinginclusiefhttp}?width={width}&height={height}

Je kunt width of height ook omitten, dan behoudt het script de oorspronkelijke AR.

HunterP · 10 sep 2010

csshunter zei:
Nou, als het lukt om die superinstellingen te passeren, dan zou dat volgens de laatste "else" in jouw script niet het geval mogen zijn: die pakt de ware grootte op als het max. niet wordt overschreden. Isn't it?

Jawel, maar ik had het over het uitschakelen van het script

Er lopen volgens mij nogal wat ideeen door elkaar heen en dat geeft wellicht wat verwarring.

Overigens wil het kwartje over de verhoudingen als gevolg van de HTML-code niet helemaal vallen. Dat zijn immers ook harde waardes en er vind dus geen scaling plaats. De enige die dat doet (lees: kan) is het script, dus ik ben bang dat we daar toch aan vast zitten...

Ik zal eens kijken wat de mogelijkheden met PHP zijn, al betwijfel ik of we zo diep in het forum kunnen (mogen) wroeten..

HunterP · 10 sep 2010

ErikBooy007 zei:
Dit is wat ik ervan gebakken heb, maar werkt helaas niet zo goed als ik verwacht had. Er gaat iets met de kleuren helemaal mis.

imagecopyresampled ( $newImage , $image , 0 , 0 , 0 , 0 , $width , $height , $aHeaders[ 0 ] , $aHeaders[ 1 ] );

Werkt imagecopyresized() misschien beter ipv imagecopyresampled() ?

ErikBooy007 · 10 sep 2010

Nah, mocht niet baten... Nou ja, als iemand anders nog suggesties heeft..

csshunter · 12 sep 2010

Nou ja, als iemand anders nog suggesties heeft..

Heb ik: ik zou graag wat aanschouwelijk onderwijs zien in een link naar een testpagina die onze schaalgrappen uithaalt.

Heb je die, of kan je die maken? (liefst gereduceerd tot het avatar-gedeelte, dat vergemakkelijkt het doorzicht)

Misschien genereert dat verse ideeën, want het lijdend voorwerp hebben we tot dusverre nog niet gezien.

Met vriendelijke groet,
CSShunter

csshunter · 12 sep 2010

Vallende kwartjes!

@ #12:

Overigens wil het kwartje over de verhoudingen als gevolg van de HTML-code niet helemaal vallen. Dat zijn immers ook harde waardes en er vind dus geen scaling plaats. De enige die dat doet (lees: kan) is het script, dus ik ben bang dat we daar toch aan vast zitten...

Ik geloofde eerst, dat mijn kwartje voortijdig gevallen was. Ik had eroverheen gelezen dat de maten (via de beheerinstelllingen) hard in de html worden gezet. - Maar ik ging er gemakshalve van uit dat er niets aan width's en height's van de avatars in de html opgenomen zou zijn. Dus dacht ik: "dan kan het inderdaad niet met max-waarden in de css opgelost worden, want 'inline properties' in de html gaan altijd vóór".

Toch nog even experimenteren: misschien zou het met een !important toevoegsel in de css toch gaan.
En wat blijkt?
Mijn kwartje viel regelrecht door naar het 'geld terug' bakje!
Wat nooit zo tot mij doorgedrongen was

:

inline css-styles in de html winnen altijd van css-styles in het stylesheet (of css in een styleblock in de <head>),
maar losse eigenschappen in de html als width='..' verliezen van css-styles; de css kan deze waarden altijd overrulen, ook zonder het !important erbij!

Die harde html-maten zijn dus boterzacht.

Tenminste: zolang je niet om de ratio geeft, of als de ratio van de html-images voor alle avatars hetzelfde is.

Testpagina: www.developerscorner.nl/csshunter/tests/avastar-resize-css-a.htm
In IE7 blijft de ratio ook hier gehandhaafd!

Als je wel om de ratio geeft, kan css het alleen regelen als er géén maten in de html staan:

Tweede testpagina: www.developerscorner.nl/csshunter/tests/avastar-resize-css-b.htm
Voor IE7 is er dus geen verschil met de eerste testpagina.

Als we de de uitkomsten van de eerste en de tweede testpagina combineren, betekent dat, dat er voor het behoud van de ratio's alleen een scriptje nodig is om de vaste width- en height-waarden uit de html te verwijderen. De css lost het dan wel op.
Er is dus geen javascript beslismodel/rekenmodel nodig voor het uitrekenen van de waarden n.a.v. de uitgelezen ratio's en de al/niet overschrijding van 1 of 2 maxima.
Blijft over het simpele js:
[JS]function resize(){
var images = document.getElementById('normalize').getElementsByTagName('img'); // of andere avatar-vanger
for (var i=0; i<images.length; i++){
images.style.width = 'auto';
images.style.height = 'auto';
}
}
window.onload = function(){
resize();
}
[/JS]
Voor dit in werking:

Derde testpagina: www.developerscorner.nl/csshunter/tests/avastar-resize-js.htm

Voor IE7: niet nodig, maar baat het niet, dan schaadt het niet.

Mocht javascript uit staan (maar dan werkt waarschijnlijk het hele forum niet), dan is er geen kwartje pijn: dan gaat het downscalen gewoon door, alleen de ratio is er niet meer.

Tot slot: IE7 blijkt er dus een merkwaardig eigen willetje op na te houden, in tegenstelling tot alle andere browsers: FF, Opera, Chrome, Safari en IE8 getest. Gelukkig in dit geval niet storend, en zelfs voordelig.

Maar met dit al blijf nog wel m'n eerdere vraag staan: linkje?

Met vriendelijke groet,
CSShunter

HunterP · 13 sep 2010

csshunter zei:
Als je wel om de ratio geeft, kan css het alleen regelen als er géén maten in de html staan

Krijg nu wat! Ja daar heb ik dan even overheen gekeken (lees: waarschijnlijk niet geprobeerd). Inderdaad, als ik die harde waardes verwijder dan schaalt CSS inderdaad wel! Helemaal perfect zo

Ik heb een aangepaste CSS naar de beheerder gestuurd, ben benieuwd hoe het functioneert! Heb me de pl*ris gezocht naar scaling via CSS maar ik zou toch zweren dat elke hit nul op rekest gaf en doorverwees naar JS...

Meteen even vooruit denken, het zou ook wel leuk zijn als een avatar bij een hover alsnog in het oorspronkelijke formaat getoond wordt. Ik heb wat geexperimenteerd met :

img.avatar:hover
{
max-width: 800px;
max-height: 600px;
}

Dat werkt, maar aangezien we in een tabel zitten en een avatar groter kan worden dan de afmetingen van de cel waarin hij zich bevindt, kunnen er scrollbalken ontstaan. Die raakte ik kwijt met :

img.avatar:hover
{
position: absolute;
max-width: 800px;
max-height: 600px;
}

De avatar gaat dan 'zweven' boven zijn oorspronkelijke positie en overlapt alles wat eronder zit. Nadeel hiervan is echter dat de tekst die onder de avatar staat hierdoor naar boven klapt en onleesbaar wordt; want de avatar staat erboven. Niet dat die tekst op dat moment heel erg belangrijk is, maar als het beter kan, GRAAG

Voorbeeld : http://www.gsm-antennes.nl/hvforum/test3

HunterP · 13 sep 2010

HunterP zei:
De avatar gaat dan 'zweven' boven zijn oorspronkelijke positie en overlapt alles wat eronder zit. Nadeel hiervan is echter dat de tekst die onder de avatar staat hierdoor naar boven klapt en onleesbaar wordt; want de avatar staat erboven. Niet dat die tekst op dat moment heel erg belangrijk is, maar als het beter kan, GRAAG

Bij deze "te grote" avatar maakt het opzich niet zoveel uit, maar stel dat de avatar binnen de max. afmetingen valt, dan zal hij niet vergroten, maar de tekst eronder verschuift wel.

Okee, bovenstaande testpagina even aangepast met 2 avatars zodat het verschil duidelijker zichtbaar wordt.

csshunter · 14 sep 2010

Helemaal perfect zo

Kijk zo moeten we ze hebben: met minder nemen we geen genoegen!

Voor het behoud van de omliggende tekst-afstanden bij de avatar-hover:

Als je de avatars nu eens een jasje van een <div> geeft met de standaard-hoogte,
dan ontsnapt de avatar bij de hover uit z'n cel door de absolute hover-position,
maar blijft het <div>'je staan als nu "lege div", maar wel met z'n hoogte,
en kan de tekst niet omhoogspringen in het gat van de verdwenen absolute avatar.

Zou de praktijk bezwaar hebben tegen deze theoretische logica? Je zou zeggen van niet.

Met vriendelijke groet,
CSShunter

PS:

Heb me de pl*ris gezocht naar scaling via CSS maar ik zou toch zweren dat elke hit nul op rekest gaf en doorverwees naar JS...

Met de goede zoekwoorden kom je toch een heel eind.

De titel van de derde hit stond me wel aan, en ... ja hoor:

"An important thing to note here is that I removed the width="" and height="" attributes from <img> element in the scaling examples. This is necessary as specifying those will prevent the image from being scaled proportionally."

csshunter · 14 sep 2010

Hiep-hiep, het werkt!
Het <div>'je blijkt er al te zijn, en hoeft alleen maar een hoogte mee te krijgen.

Kijk: screenshotje van online experiment.

Groetjes,
CSShunter

Avatar resize script

Gebruiker

Meubilair

Terugkerende gebruiker

Meubilair

Gebruiker

Gebruiker

Meubilair

Gebruiker

Meubilair

Terugkerende gebruiker

Terugkerende gebruiker

Gebruiker

Gebruiker

Terugkerende gebruiker

Meubilair

Meubilair

Gebruiker

Gebruiker

Meubilair

Meubilair

Wij waarderen jouw privacy