[HTML] plaatje verkleinen maar vervorming tegen gaan

[JoostMartijn]

Hi,,,

Ik heb nu weer een probleem met html ....

Ik wil een hele rij plaatjes laten zien voor een foto boek. Ik gebruik hier voor een php lus..dit werkt helemaal prima.

Nu het probleem. De plaatjes die ik wil laten zien moeten allemaal 100 pixels hoog zijn. Maar als een plaatje een resolutie heeft van 400*200 wil ik dat als de hoogte 100 de breedte in dit geval naar 200 gaat. zodat het plaatje niet in een keer vet uitgerekt lijkt..

Weet iemand hoe ik dit met HTML kan oplossen, of moet ik hier een hele ingewikkelde php functie voor gaan schrijven

[Dido]

Wat zou je zeggen van thumbnails maken, met bijvoorbeeld Irfanview, en die gebruiken?

[Epitome]

Of de opties voor fotoalbum die in Photoshop en Dreamweaver zitten!

[Denker]

Cascading Stylesheet:

img
{
height: 100;
width: 200
}

en in je html pagina:

HTML:

[img]"huppeldepup.jpg"[/img]

edit:
Hm, heb ik het verkeerd begrepen?

[ Voor 39% gewijzigd door Denker op 19-05-2004 10:24 ]

[JoostMartijn]

Dido schreef op 19 mei 2004 @ 10:21:
Wat zou je zeggen van thumbnails maken, met bijvoorbeeld Irfanview, en die gebruiken?

Misschien is dit een idee. Weet je misschien ook wat thumbnails zijn. Ik heb hier zelf nog nooit mee gewerkt. Ik zou het echt heel erg waderen als ik een kleine uitleg kreeg

[JoostMartijn]

De grote blijft steeds varieren dus niet alle plaatjes zijn 400*200. Het gaat er alleen om hoe kan ik zorgen dat de plaatjes niet vervormen maar in verhouding blijven

[Denker]

Thumbnails zijn verkleinde versies van afbeeldingen. Thumbnail betekent duimnagel en daarmee zou je de figuurlijk de grootte kunnen vergelijken.
Het is bedoeld dat je niet overspoeld wordt door grote afbeeldingen op een pagina, maar dat je ze in het klein kunt zien.

[André]

Een thumbnail is een klein voorbeeldplaatje waarmee je kunt zien hoe het origineel onegeveer er uit ziet.

[Dr. Malsain]

Je hoeft niet altijd een plaatje te verkleinen. Een optie is om een gedeelte van het plaatje te laten zien, bijv. het midden van het originele plaatje.

Bij verkleinen heb je last van vervorming die niet tegen te gaan is omdat er simpel gezegd beeldinformatie verloren gaat, dus minder pixels. Bij vergroten zijn er verschillende technieken om vervorming tegen te gaan.

[Terror]

Ben een redelijk noob op dit gebied, maar is het neit mogelijk om eerst vakjes te klussen die de juiste grote hebben en daarna plaatjes in te voegen die je op de juiste manier geresized hebt. (Percentage hoogte verandering toepassen op je breedte) Of is dit niet wat je bedoelt?

[ Voor 6% gewijzigd door Terror op 19-05-2004 10:29 ]

[JoostMartijn]

Het gaat er om dat het plaatje in even wicht blijf...in verhouden

400 * 200 wordt dan 200 * 100 dus verhouding 2:1
600 * 150 wordt dan 400 * 100 dus verhouden 4:1

[Dido]

Je maakt een kleine versie van je plaatje.
Vervolgens gebruik je iets als:

code:

a href="plaatje.jpg" onclick="window.open(plaatje.jpg,'','');return false;"><img src="thumb.jpg" alt="Plaatje"/></a>

Je thumbnails zelf maak je met irfanview: met een batch resize resize je alles naar width 100, met een vinkje bij "keep aspect ratio"

[ Voor 25% gewijzigd door Dido op 19-05-2004 10:30 ]

[André]

Dr. Malsain schreef op 19 mei 2004 @ 10:25:
Je hoeft niet altijd een plaatje te verkleinen. Een optie is om een gedeelte van het plaatje te laten zien, bijv. het midden van het originele plaatje.

Bij verkleinen heb je last van vervorming die niet tegen te gaan is omdat er simpel gezegd beeldinformatie verloren gaat, dus minder pixels. Bij vergroten zijn er verschillende technieken om vervorming tegen te gaan.

Maar omdat een thumbnail alleen dient als voorbeeldje maakt die vervorming geen ruk uit. Hij heeft het over vervorming die optreed als je de breedte/lengte verhouding veranderd

[Sosabowski]

code:

[img]"my_logo.gif"[/img]

Zo wordt ie 100 pixels hoog terwijl de hoogte/breedte verhouding hetzelfde blijft.
Of bedoel je iets anders?

[JoostMartijn]

Nee, zou blijft de verhouding niet gelijk.

Je laat het plaatje naar 100 pixels hoog gaan. Maar als het plaatje 400*200 was blijft de breedte op 400 staan dus krijgje rare dingen.

[supergert]

Je kunt in je php-lus ook de grootte opvragen van een afbeelding, en dat gebruiken om de breedte/hoogte van je plaatje in html aan te passen. Zoiets: (uit m'n hoofd, kan dus niet helemaal kloppen)

PHP:

$plaatje = "plaatje.jpg";
list($breedte, $hoogte) = getimagesize($plaatje);
$breedte = $breedte * 100 / $hoogte;
print('[img]"$plaatje"[/img]');

[Sosabowski]

Nee hoor. Juist als je geen breedte meegeeft pas ie het automatisch aan.

code:

[img]"http://www.google.nl/intl/nl_nl/images/logo.gif"[/img]
[img]"http://www.google.nl/intl/nl_nl/images/logo.gif"[/img]

geeft:




de verhouding blijft prima

[ Voor 18% gewijzigd door Sosabowski op 19-05-2004 10:39 ]

[Verwijderd]

Het beste lijkt mij ook om met thumbnails te werken, dit omdat je hierdoor maar kleine plaatjes hoeft in te laden en dus minder lang hoeft te wachten voordat alle foto's op je scherm staan.

Wil je dit echter niet dan kun je ook gewoon de foto's erin zetten en enkel alleen de hoogte opgeven. Internet explorer schaalt dan automatisch de breedte mee.
Dit heb ik ook zo gedaan met afbeeldingen die uit een database kwamen, en dat werkt prima.

edit: er waren dus net nog drie andere op hetzelfde idee gekomen

[ Voor 9% gewijzigd door Verwijderd op 19-05-2004 10:40 ]

[Dido]

Als je grote plaatjes hebt, is het inderdaad sowieso aan te raden om met thumbs te werken, om de reden die Marco_J aangeeft: als een plaatje van 1024x768 1,5 MB groot is, dan is het met een width=100 nog steeds 1,5 MB groot!

[WhizzCat]

Dido schreef op 19 mei 2004 @ 10:43:
Als je grote plaatjes hebt, is het inderdaad sowieso aan te raden om met thumbs te werken, om de reden die Marco_J aangeeft: als een plaatje van 1024x768 1,5 MB groot is, dan is het met een width=100 nog steeds 1,5 MB groot!

Maar daarentegen, als je dan op het plaatje klikt dan zie je het grote plaatje wel in 1x omdat die al geladen is

offtopic:
beetje laat, maar nog gefeliciteerd

[TRON]

IorGie schreef op 19 mei 2004 @ 10:32:

code:

[img]"my_logo.gif"[/img]

Zo wordt ie 100 pixels hoog terwijl de hoogte/breedte verhouding hetzelfde blijft.
Of bedoel je iets anders?

Dit is een goede oplossing.

Of je wilt thumbs gaan creeren mbv PHP.

[JoostMartijn]

ow, wat dom

Jullie hebben helemaal gelijk....ik heb het bekeken met een andere browser I-explorer en het werkte prima...

[Dido]

WhizzCat schreef op 19 mei 2004 @ 10:49:
Maar daarentegen, als je dan op het plaatje klikt dan zie je het grote plaatje wel in 1x omdat die al geladen is

Alleen lullig voor iemand die met een 56k6 lijntje drie uur zit te wachten op dertig "thumbs" van 1,5 MB ieder

offtopic:
beetje laat, maar nog gefeliciteerd

offtopic:
Dank je.
Ik ben bezig de foto's te scannen en on-line te gooien. Dat zal ik wel netjes met kleine thumbjes doen

[Sosabowski]

JoostMartijn schreef op 19 mei 2004 @ 11:03:
ik heb het bekeken met een andere browser I-explorer en het werkte prima...

Ook met FireFox werkt dit prima hoor.

[Cartman!]

Als je toch al met php werkt kun je ook een script maken die de thumbs genereert, is al wel gezegd hierboven, maar verder geen info erbij. Kijk eens op http://www.php.net/image/ naar de voorbeeld scripts die in de commentaren staan. imagecopyresampled() en imagecreatetruecolor() zou ik naar kijken. Die 2 heb ik gebruikt en die werken in combinatie erg goed

Let wel dat je host GD Library moet ondersteunen hiervoor. Ook kun je ImageMagik gebruiken maar daarheb ik zelf geen ervaring mee.

[Morphine]

PHP:

Even vragen, dan stuur ik het naar je toe :)

Een on the fly image verkleinings programmatje
Aan te roepen met

code:

thumbnail.php?width=200&height=200&img=woei.jpg

Als je geen hoogte en breedte opgeeft wordt het formaat automatisch verkleind ( $new_w = 52;)

[ Voor 81% gewijzigd door Morphine op 30-05-2004 12:56 ]

[Morphine]

g00fy schreef op 19 mei 2004 @ 13:07:
Als je toch al met php werkt kun je ook een script maken die de thumbs genereert, is al wel gezegd hierboven, maar verder geen info erbij. Kijk eens op http://www.php.net/image/ naar de voorbeeld scripts die in de commentaren staan. imagecopyresampled() en imagecreatetruecolor() zou ik naar kijken. Die 2 heb ik gebruikt en die werken in combinatie erg goed

Let wel dat je host GD Library moet ondersteunen hiervoor. Ook kun je ImageMagik gebruiken maar daarheb ik zelf geen ervaring mee.

imagemagick is ook een super tooltje. Het moet wel op de server geinstalleerd staan; wat meestal niet het geval is.

[sniklaas]

ik gebruik een php script die verwijst naar b.v directory X.

Wanneer ik in X een directory 1, 2 en 3 plaats , worden deze mappen automatisch door het php script gelezen.

Het enige wat ik hoef te doen om bijvoorbeeld de foto's van 1 te bekijken, is 1 selecteren in een dropdown menu en het resultaat is een pagian met allemaal foto's van dezelfde grootte , die ook nog clickable zijn.

zie www.triathlonaalsmeer.nl/algemeen/gallery/index.php voor een voorbeeld