View Full Version : Instant Sample

05-06-2009, 12:03 AM
Hi All,

What I am trying to do, is that on my server, I have a number of images. I would like for a potential customer to be able to modify the text on a particular image. E.g. there are images of Engagement Card. I would like a potential bride / groom to go onto the site - select the card that they like - for them to then use a form to enter the relevant details (e.g. Their name, venue, dates etc) - and then for the computer to talk to the server and for the image to be re-generated with their details on.

I have no idea where to start for something like this so any help would be much appreciated.


05-06-2009, 12:30 AM
With a lot of PHP GD, it could be done. :)

Look it up, I can't make the code right now.

05-06-2009, 12:35 AM
Yes, PHP GD ...

But, only for a quick sample.
The final image it produces won't be good enough quality for an official download file.

Do you really mean sample, or are you planning on rendering the final image?

Just out of curiosity, give us a link to one of your sample cards.

05-06-2009, 12:43 AM

I have attached the image.

Thanks for your help :thumbsup:

05-06-2009, 12:45 AM
Ooh,that's going to be real tough. :\

Make the image without all the text, and then take the string submitted by the user and align it accordingly in each area, presumably, the same cursive font.

05-06-2009, 12:49 AM
Also ...
The font you use must be available as a .ttf file
What is the font you are using?

And NBS88 is correct ... we need the image without the text,
(but seeing the text shows us what it is supposed to look like).

05-06-2009, 12:56 AM

Thank you for your replies. I have attached the image without any text.


05-06-2009, 01:08 AM
What is the name of that font you used?

05-06-2009, 01:08 AM
$image = ImageCreateFromPNG("URLOFIMAGE.PNG");
$color = imagecolorallocate($image, 0xFF, 0xFF, 0xFF);
$colorShadow = imagecolorallocate($image, 0x66, 0x66, 0x66);
$font = 'arial.ttf';
$fontSize = "10";
$fontRotation = "0";
$str = $_POST['fieldnamefortext'];

/* Shadow */
ImageTTFText($image, $fontSize, $fontRotation, 7, 22, $colorShadow, $font, $str);

/* Top Level */
ImageTTFText($image, $fontSize, $fontRotation, 5, 20, $color, $font, $str);

header("Content-Type: image/PNG");
ImagePng ($image);
} else {

the form stuff here, make sure it's POST


This is something I quickly grabbed from the internet. Try editing it to your needs, and let us know if you need any help.

05-06-2009, 01:15 AM

There are 2 different fonts used - but can make do with only one. The names of the font is Amazone and Adorable.

Thanks a lot for both your help - I will definitely be trying your suggestions.

Thanks again.

05-06-2009, 01:22 AM
Check back tomorrow AM.
I can make a real example using your image,
but this does take some time to do.

05-06-2009, 01:24 AM
Thanks very much for both your help.

Bedtime for me.

Thanks again. :)

05-06-2009, 02:06 AM
Here is my working test site ....

I only did the names at the top, but you can see by the script shown
that you duplicate the sections with different X/Y coordinates and font sizes.
You can also mix fonts and font colors if you upload the correct .ttf file(s).

No validation shown, so you need to limit textbox lengths, etc.

This is just a basic PHP GD example:


Have fun!

And best of all, the output is an actual JPEG image, so you can store it, serve it, resize it,
make a thumbnail, attach to email, etc. ... do anything you want with it. Just realize that
the quality will not be as good as a "real" card. Also, you can see that creating the rest of
the card will require tedious positioning. Making other cards will take a lot of time to create.
I'm wondering if simply using "sample" cards with fake names might not be the better solution.

The only silver lining to using a form (and PHP GD), is that you could save the form information
in a database ... example, the client will be giving you all the information to use on the real cards.
So maybe it would be a good thing to use. Saving all of the data is a whole other thing not yet
described, and then you would need an admin section to view the data.

You might want to hire a freelance programmer, if this is part of a business you do.
The money you spend would then be a tax write-off.


05-06-2009, 02:39 AM
Nice mlseim!

oodya, don't forget to cleanup and validate your post variables before using it live though. ;)

05-06-2009, 02:04 PM
That looks exactly like something I was looking for. Now the difficult part for me - to try doing the same to some of my other images. :D Can you please leave that example on your site for the time being?


05-06-2009, 02:28 PM
That looks exactly like something I was looking for. Now the difficult part for me - to try doing the same to some of my other images. :D Can you please leave that example on your site for the time being?


You could just copy the html and the script and put it into a php file.

05-06-2009, 02:33 PM
I'll leave it there ... others may see the post and the link should remain valid.

05-06-2009, 08:44 PM

Can you please let me what I should keep as the file names?

I have tried copying the code from your site and saving it to the server. In the same location I have called the image card1. I keep getting "No input file specified."


05-06-2009, 08:52 PM
The font file (mlsjn.ttf) needs to be uploaded to your website,
and the image of the card (card1.jpg) is the actual image you
provided of the blank card. I just renamed it when I uploaded
it on my server.

Attached is a screenshot of the files I have in my website directory.
You can name your files anything you want as long as you reference
those names properly in your HTML and scripting.

If you want to use the other font you have, you upload that .ttf
file into the same directory, and reference it where needed.

05-06-2009, 09:17 PM
Sorry for being a pain - but did you resize the card (image)?


05-06-2009, 09:41 PM
Here is my exact file:

Some browsers open images smaller, with an "enlarge" button
when you mouse over it. You need it full size before you save it.

Dimensions: 549px 932px

No worry about asking questions ... this is a forum.

05-08-2009, 08:59 PM
Thanks a lot for your help. Do you know if there is any software that can help me do this?


05-08-2009, 09:02 PM
What do you mean by "to do this"?

You just upload the image as you have it (the size you want),
and then determine where to place text as pixel coordinates.
You already know the size of your image.

If you're not sure, you can use any type of image software such
as a free one like this: http://www.irfanview.com/

05-08-2009, 11:45 PM

Thanks for the link.

I am messing about with the coding. Just a couple of things. What does this mean?

(155-($b3[2])/2), 200,

I'm guessing it's something to do with centering the text?


05-09-2009, 03:23 AM
One of the GD functions determines how many pixels it takes to display the text
in the context of characters based on the font and font size. The results end-up
being an array of values, the 3rd array item is the width, in this case, $b[2]
(array items are numbered: 0,1,2,3 ... ) ... so [2] is the 3rd item in the array.

So I determined that 155 pixels from the left margin is the center of where I want
to be, and 155 minus the width of the text divided by two, puts the text in the center.
The next number (200), is how far from the top of the image to position the text.

An image's upper-left corner is always 0,0 ... and the lower-right corner is the
maximum width and maximum height (depending on the size of your image).

References to images in most cases always works with "width,height" in that order...
or "distance from the left","distance from the top" in the case of determining position.

I know that sounds all technical, but there is a way to learn all about GD with many
examples of code: http://us2.php.net/manual/en/book.image.php


05-26-2009, 04:07 PM

Thanks for all your help. I have not had time to mess about with my other images. One thing is that I have over 150 images that needs the Instant Sample created for and about the same number of envelopes. Is there not an application that can help me do this quicker? I work full time and don't have a lot of time to do this.

Thanks, :cool:

05-26-2009, 04:35 PM
I don't know of any application to do this, but it would be a good idea for someone
who might want to write it (using AJAX)? Some sort of WYSIWYG interface?

For your project, perhaps you could hire someone to do all of
the positioning for you ... it is a tedious job.

05-26-2009, 04:52 PM

Thanks. I am surprised that there is not application that does this, I will look to see if I can pay someone to do this for me. Let me know if you do come across anything like this though :D


06-11-2009, 09:01 PM

I have finally got round to editing the file, but am coming into a problem straightaway :confused:. I have added an extra section to the script for the "Bride's father", but when entering the details for the "Bride's father", it is just displaying a blank image. It is known as 'bfather' in the script. Can someone please help? The code is as follows:

Try it out with your own names ...

Bride First Name:
Bride Middle Name:
Bride Last Name:
Bride Father Name:
Groom First Name:
Groom Middle Name:
Groom Last Name:

The script as it currently is ...

// Card Sample - Generator

// Get form variables
$gfirst = $_POST['gfirst'];
$gmiddle = $_POST['gmiddle'];
$glast = $_POST['glast'];
$bfirst = $_POST['bfirst'];
$bmiddle = $_POST['bmiddle'];
$blast = $_POST['blast'];
$bfather = $_POST['bfather'];

// Generate Image & set width
$image = imagecreatefromjpeg("card1.jpg");
$imageWidth = imagesx($image);

// Generate Bride
$color = imagecolorallocate($image, 179, 63, 66);
$font = "mlsjn.ttf";
$fontSize = "24";

// The hardest part will be to get the actual width of the text (in pixels).
// This will be used to determine the position and margins.
// You will then do some math to center each line of text.
// Keep in mind that the width of various letters is not the same,
// so it will be very hard to exactly center each line.

$b1 = imagettfbbox($fontSize, 0, $font, $bfirst);
imagettftext($image, $fontSize, 0, (155-($b1[2])/2), 130, $color, $font, $bfirst);
$b2 = imagettfbbox($fontSize, 0, $font, $bmiddle);
imagettftext($image, $fontSize, 0, (155-($b2[2])/2), 165, $color, $font, $bmiddle);
$b3 = imagettfbbox($fontSize, 0, $font, $blast);
imagettftext($image, $fontSize, 0, (155-($b3[2])/2), 200, $color, $font, $blast);
$b4 = imagettfbbox($fontSize, 0, $font, $bfather);
imagettftext($image, $fontSize, 0, (155-($b4[2])/2), 210, $color, $font, $bfather);

// Generate Groom
$color = imagecolorallocate($image, 179, 63, 66);
$font = "mlsjn.ttf";
$fontSize = "24";
$g1 = imagettfbbox($fontSize, 0, $font, $gfirst);
imagettftext($image, $fontSize, 0, (400-($g1[2])/2), 130, $color, $font, $gfirst);
$g2 = imagettfbbox($fontSize, 0, $font, $gmiddle);
imagettftext($image, $fontSize, 0, (400-($g2[2])/2), 165, $color, $font, $gmiddle);
$g3 = imagettfbbox($fontSize, 0, $font, $glast);
imagettftext($image, $fontSize, 0, (400-($g3[2])/2), 200, $color, $font, $glast);

// Output & Free Memory
header("Content-type: image/jpeg");

Many Thanks,

06-11-2009, 11:36 PM
Give us a link to your form (where you enter the father name).
I think the variable is wrong there?
It's shows a blank page when the script fails.

06-12-2009, 12:35 AM

I have managed to get it working. Thanks for your help. No doubt I'll be asking more questions in the future :thumbsup:

06-13-2009, 12:58 AM

I am getting familiar with the functions now. One problem that I am having is that I am trying to centre the Groom and Brides name. Although I have used the same width calculations for both names, they are not appearing in the same location. The coding used for the bride's name is:

$b1 = imagettfbbox($fontSize, 0, $font, $bname);
imagettftext($image, $fontSize2, 0, (160-($b1[2])/2), 320, $color, $font, $bname);

and for the groom it is:

$g1 = imagettfbbox($fontSize, 0, $font, $gname);
imagettftext($image, $fontSize2, 0, (160-($g1[2])/2), 370, $color, $font, $gname);

See the attached screenshot of the results I am getting. I was under the impression that they would both appear in the centre. I think that the Groom text is the correct one.

Can someone please help?

Thanks in advance.

06-14-2009, 07:21 PM
any ideas anyone?