Thumb op vierkant plaatsen [OPGELOST + SCRIPT]
Heeft iemand een tip waarmee ik de laatste stap kan doen?
Een thumb maken lukt me wel en het vierkantje ook.
Alvast bedankt voor de tips
Gewijzigd op 28/09/2011 18:41:03 door Jos Verra
Een duim (thumb) op een zwart vierkantje (op dat vierkantje zit dan inkt neem ik aan).
En waar wil je die vingerafdruk dan op plaatsen?
Of wil je hem uitlezen?
Nu even serieus.
Omschrijf beter en duidelijker wat je nu echt wilt.
In plaats daarvan... geef je thumbnail een zwarte border (rand) en dan krijg je hetzelfde effect.
<img src="mijnthumbnail.jpg" style="border:10px solid #000">
Gewijzigd op 28/09/2011 13:51:57 door Jos Verra
Code (php)
1
<img src="map/plaatje.jpg" style="border: 1px solid #000; height: 50px; width: 50px" />
zo zou het moeten werken
Op Maikels manier wordt de afbeelding 'vervormd'.
Code (php)
1
<img src="map/plaatje.jpg" style="border: 1px solid #000; max-height: 50px; max-width: 50px" />
Je kan anders een div maken met de afbeelding als achtergrond. Zo wordt echter een deel van de afbeelding gepakt.
Gewijzigd op 28/09/2011 14:18:20 door Erwin Goossen
Code (php)
1
2
3
2
3
<div style="background-color:#000;height:200px;width:200px;">
<img src="mijnthumbnail.jpg">
</div>
<img src="mijnthumbnail.jpg">
</div>
De width en height kun je dan aanpassen zodat zowel de portret en landscape versie er in passen.
p.s. de "style" heb ik nu voor de handigheid even in het div element gezet, maar uiteindelijk kun je die het beste in een extern css bestand zetten.
http://mrphp.com.au/code/image-cache-using-phpthumb-and-modrewrite
Ik wil echt dat hij wordt geschaald naar 110x110 en als hij dus smaller is de rest van vierkantje vullen met zwart. Maar dit moet echt als plaatje gebeuren. En niet in met CSS.
Toevoeging op 28/09/2011 14:47:22:
Maar kan geen begin vinden dus vroeg me af of iemand een tip had hoe ik moest beginnen ^^
Ger van Steenderen op 28/09/2011 14:40:22:
@ozzie: op jouw manier (met divs) zit je altijd nog met de uitlijning, tenminste dat is altijd mijn probleem. Als ik een gallery achtig iets moet doen zet ik de thumbs altijd in een tabel.
Gewoon het plaatje centreren in de div.
Jos Verra op 28/09/2011 14:37:17:
Bij croppen worden ze toch een stukje eraf geknipt?
Ik wil echt dat hij wordt geschaald naar 110x110 en als hij dus smaller is de rest van vierkantje vullen met zwart. Maar dit moet echt als plaatje gebeuren. En niet in met CSS.
Ik wil echt dat hij wordt geschaald naar 110x110 en als hij dus smaller is de rest van vierkantje vullen met zwart. Maar dit moet echt als plaatje gebeuren. En niet in met CSS.
Wat bedoel je daarmee? Je wil een nieuw plaatje genereren waarbij het zwart onderdeel is van het plaatje? Dat raad ik je af. Als je het met css niet aan de gang krijgt, gaat dit je al helemaal niet lukken. Dus ik zou gewoon even bij een css oplossing blijven.
Toevoeging op 28/09/2011 15:29:11:
Hij staat onderline. Heb hem snel gemaakt dus maten kloppen niet echt maar het gaat om het idee :)
Toevoeging op 28/09/2011 15:32:48:
En eventueel kan zwart ook wit, grijs of wat dan ook worden.
Met css: simpel te realiseren en fluitje van een cent.
Zonder css: kijk hier eens: http://php.net/manual/en/function.imagecreate.php
Dit script is namelijk bedoeld voor een vriend van me. En die wil ik niet opschepen met de css. Maar gewoon een upload functie waar hij dus bij nieuwere pagina's niet meer naar om hoeft te kijken. Ik heb dit script een keer eerder gehad maar kan het nergens meer vinden :(
zelfde als de imagecreate functie
En daarbij gaat bij CSS resize etc hij elke keer de grotere plaatjes inladen. Ik weet dat je de images zowieso kan verkleinen. Maar ik dacht dat het makkelijk was om een vierkantje achter te zetten vandaar dat ik het vroeg :)
Gewijzigd op 28/09/2011 15:57:08 door Jos Verra
@Ozzie: bij gaat het altijd mis met de vertilale uitlijning van de div ook al staat ie op middle. Daarnaast als ik 6 rijen en 6 kolomen heb dan denk ik niet eens meer aan div, dat is voor mij tabular data.
Ger van Steenderen op 28/09/2011 15:57:34:
@Ozzie: bij gaat het altijd mis met de vertilale uitlijning van de div ook al staat ie op middle. Daarnaast als ik 6 rijen en 6 kolomen heb dan denk ik niet eens meer aan div, dat is voor mij tabular data.
Mja, da's dus niet goed... tabellen moet je alleen voor tabular data gebruiken.
Warning: (): Unable to open '/thumbs/' for writing: Is a directory in /customers/0/b/d/tunder-design.nl/httpd.www/thumbs.php on line 34
Ik heb zowel de map als het bestand 0777 gegeven
Toevoeging op 28/09/2011 18:00:57:
http://tunder-design.nl/thumbs.php
Hij werkt!!!!! Iemand belang bij het eind script?
Toevoeging op 28/09/2011 18:15:44:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?php
function place_on($file, $fileName, $, $height ) {
$image = imageCreateFromJpeg($file);
$image_width = imagesx( $image );
$image_height = imagesy( $image );
if($image_width > $image_height) {
$widthScale = $image_width / $;
$newWidth = $;
$newHeight = $image_height/ $widthScale;
}elseif($image_height > $image_width){
$heightScale = $image_height / $height;
$newHeight = $height;
$newWidth = $image_width / $heightScale;
}
$thumb = imagecreatetruecolor($width, $height);
imagecopyresized ( $thumb, $image, 0, 0, 0, 0, $newWidth, $newHeight, $image_width, $image_height);
//filled Square()
$newimage = imagecreatetruecolor($width, $height);
$black = imagecolorallocate( $newimage, 0, 0, 0);
imagefill( $newimage, 0, 0, $black );
// Start positions
$x = ( $width - $newWidth ) / 2;
$y = ( $height - $newHeight ) / 2;
if ( $x < 0 ) { $x = 0; }
if ( $y < 0 ) { $y = 0; }
// Combine images
imagecopy( $newimage, $thumb, $x, $y, 0, 0, $image_width, $image_height);
// Save thumb
imagejpeg($newimage, $fileName);
}
place_on('image_src','output_name', 'thumb_height', 'thumb_width');
?>
function place_on($file, $fileName, $, $height ) {
$image = imageCreateFromJpeg($file);
$image_width = imagesx( $image );
$image_height = imagesy( $image );
if($image_width > $image_height) {
$widthScale = $image_width / $;
$newWidth = $;
$newHeight = $image_height/ $widthScale;
}elseif($image_height > $image_width){
$heightScale = $image_height / $height;
$newHeight = $height;
$newWidth = $image_width / $heightScale;
}
$thumb = imagecreatetruecolor($width, $height);
imagecopyresized ( $thumb, $image, 0, 0, 0, 0, $newWidth, $newHeight, $image_width, $image_height);
//filled Square()
$newimage = imagecreatetruecolor($width, $height);
$black = imagecolorallocate( $newimage, 0, 0, 0);
imagefill( $newimage, 0, 0, $black );
// Start positions
$x = ( $width - $newWidth ) / 2;
$y = ( $height - $newHeight ) / 2;
if ( $x < 0 ) { $x = 0; }
if ( $y < 0 ) { $y = 0; }
// Combine images
imagecopy( $newimage, $thumb, $x, $y, 0, 0, $image_width, $image_height);
// Save thumb
imagejpeg($newimage, $fileName);
}
place_on('image_src','output_name', 'thumb_height', 'thumb_width');
?>
Gewijzigd op 28/09/2011 18:26:30 door Jos Verra