/    Sign up×
Community /Pin to ProfileBookmark

Glueing Images Together

Hi everyone,

I’m trying to write a script that automates the task of creating button sets for a website.

Basically, I create three image files: the left side of the button, the right side, and a section of middle. The function (which takes the ‘label text’ and ‘output file’ as arguments) should judge the amount of middle section needed for the text, then ‘glue’ the pieces together to create an appropriate size button image. Then it should paste the label on top, and save to a file.

I have some pseudo code, but I’m not sure what image function should be used to glue an image onto the right side of an existing image…

[code=php]
function create_button($text, $filename)
{
$lc_image = @imagecreatefromgif(‘filename1.gif’); // import the left cap
$mid_image = @imagecreatefromgif(‘filename2.gif’); //import the right cap
$rc_image = @imagecreatefromgif(‘filename3.gif’); // import the middle chunk

$text_len = strlen($text); //take the var $text and figure out how long it is

//create a variable for the final output image, and insert the left cap into it
$final_im = $lc_image;

for($i = 1, $i < $text_len, $i++)
{
$final_im .= $mid_image; // paste copies of the center section onto the main image untill it’s wide enough to fit the text
}

$final_im .= $rc_image; // paste the right cap on the end

// $final_im should now contain a complete blank button that’s the right size….

// now take $text and paste it on top in the center of the button

$final_im = imagestring($final_im, 3, 5, 3, $text, ‘#ffffff’);

$result = imagegif($final_im, $filename); //save the final image to a gif file
}
[/code]

to post a comment
PHP

8 Comments(s)

Copy linkTweet thisAlerts:
@bokehJun 14.2007 — This is child's play with GD but personally I believe you should abandon this approach. Use CSS instead. Make the button from two overlapping images, a CSS background colour and some text in the HTML document. That way you could have 50 buttons and still only need two images. Also it will work fine with images and CSS turned off.

Post a link to your three files and I'll have a look.
Copy linkTweet thisAlerts:
@lightnbauthorJun 14.2007 — Thanks bokeh,

The buttons are for a Zen Cart installation, which looks for .gifs with certain names in a predefined location to display as buttons.

It took about two hours to create the first set, since you have to change the text, adjust button size, center text and save under a new name (for all 60 buttons).

Of course when I finished and uploaded them, I found that the shadowing underneath them was too dark, and some of them were overbearing.

I'd like to be able to just change the base image, and have the buttons be automatically generated.

One of the buttons from the first batch is attached.

[upl-file uuid=55b048f9-f5f3-4814-9c4e-2f179174d133 size=5kB]button_checkout.gif[/upl-file]
Copy linkTweet thisAlerts:
@bokehJun 14.2007 — One of the buttons from the first batch is attached.[/QUOTE]Can you upload the three base images please?
Copy linkTweet thisAlerts:
@lightnbauthorJun 14.2007 — Here they are...

[upl-file uuid=501222bc-543e-426d-aa19-f0b01f5a1c21 size=1kB]right_cap.gif[/upl-file]

[upl-file uuid=33555ef2-e611-4812-8096-a980215e3ed3 size=892B]left_cap.gif[/upl-file]

[upl-file uuid=e36c3bc5-1036-4960-979a-5e23564a3ab4 size=570B]button_mid.gif[/upl-file]
Copy linkTweet thisAlerts:
@lightnbauthorJun 17.2007 — Yeah Exactly!

Then I can loop it through a function that that takes a label / filename pair as an argument.

How does it work?
Copy linkTweet thisAlerts:
@bokehJun 17.2007 — [code=php]function CreateButton($ButtonText, $LeftFile, $RightFile, $FontFile, $FontColor, $destination = null, $FontSize = 12, $padding = 10)
{
/*******************************************************

FUNCTION NAME:
CreateButton

CREATOR:
Bokeh (bokehman.com)

PURPOSE:
Create a dynamic width button with text overlay using GD

NOTE:
There is no centre image as this is unnecessary.

DESCRIPTION:
bool CreateButton( string ButtonText , string LeftFile , string RightFile , string FontFile , array FontColor [, string destination [, int FontSize [, int padding ]]])

INPUTS:
ButtonText: String, Text to write to the button
LeftFile: String, Path/filename of left image
RightFile: String, Path/filename of right image
FontFile: String, Path/filename of TTF font file
FontColor: -> array('red'=>255,'green'=>255, 'blue'=>255)
destination: String (optional), Path/filename of output file
FontSize: int (optional), Point size of TTF font
padding: int (optional), number of pixels to the left and right of the text (not including the cap)

RETURN VALUE:
Boolean true or the function dies

EXAMPLE USE:
CreateButton('My button', './left.png', './right.png', '../fonts/arial.ttf', array('red'=>255,'green'=>255, 'blue'=>255));

*********************************************************/
putenv('GDFONTPATH=' . realpath('.'));
$LeftResource = @imagecreatefrompng($LeftFile)
or die('I cannot open "'. $LeftFile.'".');
#imageAlphaBlending($LeftResource, false);
#imageSaveAlpha($LeftResource, true);
$RightResource = @imagecreatefrompng($RightFile)
or die('I cannot open "'. $RightFile.'".');
#imageAlphaBlending($RightResource, false);
#imageSaveAlpha($RightResource, true);
$LeftWidth = imagesx($LeftResource );
$LeftHeight = imagesy($LeftResource );
$RightWidth = imagesx($RightResource);
$RightHeight = imagesy($RightResource);
$AsciiChars = '!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~';
list(,,,$FontDip ) = ImageTTFBBox($FontSize,0,$FontFile,$AsciiChars);
list(,,$TextWidth) = ImageTTFBBox($FontSize,0,$FontFile,$ButtonText);
$OutputResource = imagecreate($OutputWidth = ($LeftWidth+$TextWidth+$RightWidth+($padding*2)), $LeftHeight);
#$OutputResource = imagecreatetruecolor($OutputWidth = ($LeftWidth+$TextWidth+$RightWidth+($padding*2)), $LeftHeight);
$position = $LeftWidth-1;
imagecopy($OutputResource, $LeftResource, 0, 0, 0, 0, $LeftWidth, $LeftHeight);
while($OutputWidth > ($RightWidth + $position))
{
imagecopy($OutputResource, $RightResource, ++$position, 0, 0, 0, $RightWidth, $RightHeight);
}
$Baseline = floor((($LeftHeight+$FontSize)-$FontDip)/2);
$Shadow = imagecolorallocate($OutputResource, 127,127,127);
$Colour = imagecolorallocate($OutputResource, $FontColor['red'], $FontColor['green'], $FontColor['blue']);
imagettftext($OutputResource, $FontSize, 0, $LeftWidth+1+$padding, $Baseline+1, $Shadow, $FontFile, $ButtonText);
imagettftext($OutputResource, $FontSize, 0, $LeftWidth+$padding, $Baseline, $Colour, $FontFile, $ButtonText);
if(!$destination)
{
header('Content-Type: image/png');
imagepng($OutputResource);
die;
}
imagepng($OutputResource, $destination) or die('I could not write that to file. (permissions...)');
imagedestroy($OutputResource);
return true;
}[/code]
Copy linkTweet thisAlerts:
@lightnbauthorJun 18.2007 — Thanks bokeh!

This really takes the pain out of making button sets. I may have to go and replace all the buttons on my vb site now... I've always put it off since it used to be so tedious to do by hand.

Here's what I did with it:

[code=php]
// Configuration Options
$output_folder = "output/set1";
$LeftFile = "sources/left.png";
$RightFile = "sources/right.png";
$font = "sources/fonts/Copperplate Light.ttf";
$color = array('red'=>255,'green'=>255, 'blue'=>255);
$f_size = '12';
$padding = '12';

// Build Array of button/filename pairs
$button_pair['button_cancel.gif'] = "Cancel";
$button_pair['button_change_address.gif'] = "Change Address";
$button_pair['button_checkout.gif'] = "Secure Checkout";
$button_pair['button_confirm_order.gif'] = "Confirm Order";
$button_pair['button_confirm_send.gif'] = "Confirm Send";
// and so on for all the button sets....

foreach($button_pair as $f => $l)
{
$bm_R = CreateButton($l, $LeftFile, $RightFile, $font , $color, $output_folder . "/" . $f, $f_size, $padding);

if($bm_R == true)
{
Echo "$l Created @ $f... <br />";
}
}
[/code]
×

Success!

Help @lightnb spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...