[PHP] Afbeelding automatisch procentueel resizen

[Verwijderd]

Hey iedereen,

ik heb een scriptje waarmee ik jpg's uitlees uit een map en deze wil laten zien als thumbnails. Als ik er op klik komt er een lightbox tevoorschijn. Nu werkt dit perfect in IE, maar niet in FF en ik weet niet waar de fout zit. Ik geef op het einde height= 7% mee, kan FF niet procentueel verkleinen? Of hoe pak ik dit aan?

Ik heb dit met erg veel moeite voor elkaar gekregen want ben niet erg goed in php.

Dit is mijn code:

PHP:

<?php
    function createLbFromDir ($linkname, $galname, $directory, $thumbdirectory, $extensions = array ('jpg', 'jpeg')) {
    $gallery = "";
    $dh = opendir ($directory);
    while ($file = readdir ($dh)) {
        $parts = explode(".", basename ($file));
        $extension = $parts[count($parts)-1];
        if (!is_dir ($directory . $file) && ($file != ".." && $file != ".") && in_array($extension, $extensions)) {
    $gallery.= "<a href=\"".$directory.$file."\" rel=\"lightbox[".$galname."]\"><img src=\"".$directory.$file."\" alt=\"\" height=\"7%\" border='0'></a>\n";
            }
    }
    return $gallery;
    }
?>

Kan iemand me hiermee helpen?

Avlast erg bedankt!

[JefSnare]

Je weet waar de fout waarschijnlijk zit, waarom probeer je niet de height="7%" te vervangen door dit:

HTML:

style="max-height: 100px;"

Dan kun je makkelijk alle afbeeldingen schalen, als je namelijk 7% pakt, waarvan moet hij 7% uitrekenen? 100px is een vaste afmeting

Edit als je goed wil schalen moet je ook de breedte (width) aangeven in de style.

EDIT: 2.0
Als je perse percentage wilt gebruiken dan moet je een div er om heen zetten, die vaste afmeting geven en dan de afbeelding daarin procentueel resizen.

[ Voor 30% gewijzigd door JefSnare op 08-12-2009 14:14 ]

[Mike2k]

Het is geen goed idee om een plaatje te resizen in html... Alleen al omdat dan het plaatje in zijn geheel gedownload moet worden...

Je kan dus beter de GD library gebruiken...
Zoiets als: http://www.php.net/manual/en/function.imagecopyresized.php

[Barleone]

^^Met Mike2k
Je kan beter ECHTE thumbnails maken op je server. Dan hoeven alleen die kleine plaatjes (=weinig MB's) gedownload te worden naar de gebruiker. Op het moment dat dan de gebruiker op een thumbnail klikt, laat je de HTML/JavaScript het hele plaatje downloaden.
Op die manier heeft de gebruiker snel de normale pagina voor zijn snufferd en hoeft niet te wachten totdat al die grote jpegs gedownload en geresized zijn.

[Verwijderd]

Barleone schreef op dinsdag 08 december 2009 @ 14:23:
^^Met Mike2k
Je kan beter ECHTE thumbnails maken op je server. Dan hoeven alleen die kleine plaatjes (=weinig MB's) gedownload te worden naar de gebruiker. Op het moment dat dan de gebruiker op een thumbnail klikt, laat je de HTML/JavaScript het hele plaatje downloaden.
Op die manier heeft de gebruiker snel de normale pagina voor zijn snufferd en hoeft niet te wachten totdat al die grote jpegs gedownload en geresized zijn.

Dat weet ik, maar mijn php kennis reikt zo ver niet. Ook niet om bovenstaande library te gebruiken.
Het gaat toch niet om zoveel plaatjes. Het enige probleem dat eigenlijk dringend van de baan moet is dat ze in FF ook moeten verkleinen.

[JefSnare]

Mike2k schreef op dinsdag 08 december 2009 @ 14:16:
Het is geen goed idee om een plaatje te resizen in html... Alleen al omdat dan het plaatje in zijn geheel gedownload moet worden...

Je kan dus beter de GD library gebruiken...
Zoiets als: http://www.php.net/manual/en/function.imagecopyresized.php

offtopic:
Even een offtopic vraag, hoe verwerk je hierbij de output in een img tag?

[MueR]

JefSnare schreef op dinsdag 08 december 2009 @ 14:31:
[...]

offtopic:
Even een offtopic vraag, hoe verwerk je hierbij de output in een img tag?

Kijk eens bij "Example 1" van die link. Daar staat een stuk php code. Stel dat je die php code in een file dumpt, en vervolgens die file aanroept via je image tag. De headers die je meestuurt in de PHP file gaan de browser dan gewoon laten denken dat het een JPEG is wat ze doorkrijgt (wat feitelijk zo is). Voorbeeldje, kijk maar naar de teksten in custom font (ja ik weet dat sifr en andere ook mogelijk zijn).

[ Voor 11% gewijzigd door MueR op 08-12-2009 14:37 ]

[Verwijderd]

Blijkbaar als ik de width aanpas doet ie het wel in FF.

PHP:

<img src=\"".$directory.$file."\" alt=\"\" width=\"7%\" border='0'></a>\n";

Vreemd dat dat het wel doet en height niet. Nu ondervind ik nog wel dat de lightbox overgangen "stotteren" en "schokken" in IE. De lightbox projecteer ik bovenop een flash site. In FF nu geen probleem.

Komt dat omdat die php blijft zoeken naar jpg bestanden of door de manier waarom FF en IE javascript verwerken? Kan iemand me daar nog wijzer in maken?

Nogmaals bedankt.


PS: ik weet dat dit niet de mooiste oplossing is, maar daar kan ik nu wegens tijdsgebrek niet dieper op ingaan.

[ Voor 6% gewijzigd door Verwijderd op 08-12-2009 14:39 ]

[JefSnare]

MueR schreef op dinsdag 08 december 2009 @ 14:36:
[...]

Kijk eens bij "Example 1" van die link. Daar staat een stuk php code. Stel dat je die php code in een file dumpt, en vervolgens die file aanroept via je image tag. De headers die je meestuurt in de PHP file gaan de browser dan gewoon laten denken dat het een JPEG is wat ze doorkrijgt (wat feitelijk zo is). Voorbeeldje, kijk maar naar de teksten in custom font (ja ik weet dat sifr en andere ook mogelijk zijn).

offtopic:
Ik krijg het niet voor elkaar klik hier voor mijn code...Krijg alleen maar de url naar de php file te zien

[ Voor 3% gewijzigd door JefSnare op 08-12-2009 14:47 ]

[MueR]

De image tag hoor je ook in je HTML uit te poepen. Deze PHP file zou enkel en alleen een image serveren.

[Matis]

iets in de trant van

HTML:

<img src="bestand.php">

en
bestand.php

PHP:

<?php
// File and new size
$filename = 'Picture1.jpg';
$percent = 0.5;

// Content type
header('Content-type: image/jpeg');

// Get new sizes
list($width, $height) = getimagesize($filename);
$newwidth = $width * $percent;
$newheight = $height * $percent;

// Load
$thumb = imagecreatetruecolor($newwidth, $newheight);
$source = imagecreatefromjpeg($filename);

// Resize
imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);

// Output
imagejpeg($thumb);

imagedestroy($thumb);
?>

Mocht dat niet werken, dan ondersteunt je webhost hoogstwaarschijnlijk geen GD(2)

[ Voor 6% gewijzigd door Matis op 08-12-2009 15:32 ]

[JefSnare]

Matis schreef op dinsdag 08 december 2009 @ 15:30:
iets in de trant van

HTML:

<img src="bestand.php">

en
bestand.php

PHP:

<?php
// File and new size
$filename = 'Picture1.jpg';
$percent = 0.5;

// Content type
header('Content-type: image/jpeg');

// Get new sizes
list($width, $height) = getimagesize($filename);
$newwidth = $width * $percent;
$newheight = $height * $percent;

// Load
$thumb = imagecreatetruecolor($newwidth, $newheight);
$source = imagecreatefromjpeg($filename);

// Resize
imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);

// Output
imagejpeg($thumb);

imagedestroy($thumb);
?>

Mocht dat niet werken, dan ondersteunt je webhost hoogstwaarschijnlijk geen GD(2)

Ik denk dat dit het geval is, even onderzoeken...

[MueR]

Keertje dit in een bestand zetten:

PHP:

var_dump(gd_info());

[ Voor 10% gewijzigd door MueR op 08-12-2009 16:31 ]

[Matis]

offtopic:
Ik zie in "mijn" voorbeeld dat ik nog vergeet om $source te imagedestroy-en

[MueR]

offtopic:
Maakt niet uit Matis, dat doet de end of file wel voor je. Die twee milliseconden (indien trage server) waar je hem langer in het geheugen houdt boeien niet veel

[Matis]

MueR schreef op dinsdag 08 december 2009 @ 17:33:

offtopic:
Maakt niet uit Matis, dat doet de end of file wel voor je. Die twee milliseconden (indien trage server) waar je hem langer in het geheugen houdt boeien niet veel

Oh, vreemd, want ik heb een tijdje geleden een fotoboek-php-klasse geschreven en als ik daarin niet imagedestroy niet aanriep faalde mijn php-scrtipt op memory overflow etc.

[MueR]

Het zou niet uit moeten maken in ieder geval. Maargoed, het zou niet de eerste vreemde bug zijn in PHP.

[JefSnare]

Laat maar

[ Voor 85% gewijzigd door JefSnare op 08-12-2009 18:47 ]

[BtM909]

Nicktrax, als je Waar hoort mijn topic? doorleest, dan zie je dat je topic eigenlijk in Programming hoort. Ik ga je topic dan ook verplaatsen

Ik wil je wel even nadrukkelijk vragen om iets meer zelfinzet te tonen, anders gaat je topic geen lang leven tegemoet in Programming

[Cartman!]

Sowieso zou ik in het voorbeeld de nieuwe width en height even afronden met round(), die functie verwacht een integer, geen float. En misschien ook even display_errors en error_reporting op E_ALL zetten

[JefSnare]

Cartman! schreef op woensdag 09 december 2009 @ 17:47:
Sowieso zou ik in het voorbeeld de nieuwe width en height even afronden met round(), die functie verwacht een integer, geen float. En misschien ook even display_errors en error_reporting op E_ALL zetten

Is wel jammer wanneer je vol overtuiging je script test en een afbeelding krijgt die 1) gewoon 1,4 procent is ipv van een factor van 1.4 of 2) een error krijgt en niet weet waar die zit .

Ik gebruik max-width en max-height alleen of afbeeldingen bij bijvoorbeeld een artikel te verkleinen, dan gaat het om respectievelijk 10% verkleining, maar voor een avatar kun je beter met GD werken of niet?

[Matis]

JefSnare schreef op woensdag 09 december 2009 @ 21:53:
[...]


Is wel jammer wanneer je vol overtuiging je script test en een afbeelding krijgt die 1) gewoon 1,4 procent is ipv van een factor van 1.4 of 2) een error krijgt en niet weet waar die zit .

Ik gebruik max-width en max-height alleen of afbeeldingen bij bijvoorbeeld een artikel te verkleinen, dan gaat het om respectievelijk 10% verkleining, maar voor een avatar kun je beter met GD werken of niet?

Beter kun je gewoon altijd een thumbnail genereren en die eventueel klikbaar kunnen maken zodat de gebruiker dan het origineel ziet.
Dus GD het rekenwerk laten doen en niet de browser!

[wackmaniac]

JefSnare schreef op dinsdag 08 december 2009 @ 14:09:
Je weet waar de fout waarschijnlijk zit, waarom probeer je niet de height="7%" te vervangen door dit:
[code=html]Edit als je goed wil schalen moet je ook de breedte (width) aangeven in de style.

Dat is niet helemaal waar, de browser kan prima zelf de verhouding uitrekenen en het scheelt jou weer een beetje rekenwerk.

Overigens eens met de meerderheid; gewoon met PHP simpel thumbnailtje maken, het internet staat vol met kant-en-klare oplossingen hiervoor.

[JefSnare]

Matis schreef op woensdag 09 december 2009 @ 21:55:
[...]

Beter kun je gewoon altijd een thumbnail genereren en die eventueel klikbaar kunnen maken zodat de gebruiker dan het origineel ziet.
Dus GD het rekenwerk laten doen en niet de browser!

Ik snap je punt, het is dus gewoon verstandiger om alle afbeeldingen in (bijvoorbeeld) 3 formaten bij het uploaden te verkleinen zodat je gewoon alle formaten hebt?

EDIT: Opslaan hoeft niet altijd maar verkleinen kan ook dus zonder op te slaan...

[ Voor 8% gewijzigd door JefSnare op 10-12-2009 08:50 ]

[Ram0n]

JefSnare schreef op donderdag 10 december 2009 @ 08:49:
[...]
EDIT: Opslaan hoeft niet altijd maar verkleinen kan ook dus zonder op te slaan...

Dat klopt, maar het opslaan heeft wel erg veel nut. Zo kan het plaatje dan gecached worden (hoewel dat ook zou kunnen met het niet opslaan, op een andere manier), en het scheelt je server een paar nutteloze extra verkleiningen. Eigenlijk is de enige reden om het niet te gebruiken dat je wellicht te weinig ruimte hebt (wat ook niet vaak het geval is).

[ Voor 6% gewijzigd door Ram0n op 10-12-2009 11:23 ]

[Matis]

Ram0n schreef op donderdag 10 december 2009 @ 11:22:
Dat klopt, maar het opslaan heeft wel erg veel nut. Zo kan het plaatje dan gecached worden (hoewel dat ook zou kunnen met het niet opslaan, op een andere manier), en het scheelt je server een paar nutteloze extra verkleiningen. Eigenlijk is de enige reden om het niet te gebruiken dat je wellicht te weinig ruimte hebt (wat ook niet vaak het geval is).

Ja, het grote voordeel van het opslaan/cachen van afbeeldingen, is het feit dat het je server maar 1 keer rekenwerk kost.
Stel dat je 1000 views per minuut krijgt op je forum waar 100 verschillende iconen instaan. Dan is dat zeer rekenintensief. Als je in dat geval gebruik maakt van gecachte afbeeldingen is dat een stukje efficientie.