Continue after the break to read more about the edits needed to make this cool login form made from the base Twitter Bootstrap css. For both version 1.4 and 2.0.
Continue reading →

There are two versions of an application I made to resize images with a fixed width (can also be edited for fixed height) by using php and the image library gd. The first version uses content-type to change the header to display the image on the page. The second version encodes the image data into base64 and puts into json format, which would be better in some cases for api calls. Both use ‘get’ variables to access the url of the image and the width. This can also be edited to deal with your particular needs. More information about different functions that gd has can be found on the php website.

GD Functions used for this application:

• imagecreatefromjpeg() – creates a new image from a url or a file
• imagesx() – returns the width of an image
• imagesy() – returns the height of an image
• imagecreatetruecolor() – create an empty image container for the resized image, therefore, the dimensions should be for the resized image
• imagecopyresized() – copies the original image and places into into a new destination image resized to the specified size
• imagejpeg() – displays image

Version 1: Content-Type: image/jpeg 

1) First setup the content-type (this should be the first line in the file, after php)

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

2) Get variables from url

$url = $_GET['url'];
$width = $_GET['width'];

3) Create image data from the url, and generate the dimensions of the original image

$image = imagecreatefromjpeg($url);
$orig_width = imagesx($image);
$orig_height = imagesy($image);

4) Calculate the new height of the image

$height = (($orig_height * $width) / $orig_width);

5) Generate the new image container with the new dimensions, and create the new image

$new_image = imagecreatetruecolor($width, $height);
imagecopyresized($new_image, $image,
	0, 0, 0, 0,
	$width, $height,
	$orig_width, $orig_height);

6) Finally print the image to the screen

imagejpeg($new_image);

7) Here is the complete code for version 1

<?php
header('Content-Type: image/jpeg');

$url = $_GET['url'];
$width = $_GET['width'];

// Loading the image and getting the original dimensions
$image = imagecreatefromjpeg($url);
$orig_width = imagesx($image);
$orig_height = imagesy($image);

// Calc the new height
$height = (($orig_height * $width) / $orig_width);

// Create new image to display
$new_image = imagecreatetruecolor($width, $height);

// Create new image with changed dimensions
imagecopyresized($new_image, $image,
	0, 0, 0, 0,
	$width, $height,
	$orig_width, $orig_height);

// Print image
imagejpeg($new_image);
?>

Version 2: JSON Base64 Encode

The only difference with this one is that the header() line needs to be removed and the display image part is a bit different.

The idea of this one is that you want to store in data of the image into a buffer and save it into a variable. Then encode that data into base64 and wrap it in json.

ob_start();
imagejpeg($new_image);
$data = ob_get_contents();
ob_end_clean();
echo json_encode(array('image' => base64_encode($data)));

Complete code for version 2

<?php
$url = $_GET['url'];
$width = $_GET['width'];

// Loading the image and getting the original dimensions
$image = imagecreatefromjpeg($url);
$orig_width = imagesx($image);
$orig_height = imagesy($image);

// Calc the new height
$height = (($orig_height * $width) / $orig_width);

// Create new image to display
$new_image = imagecreatetruecolor($width, $height);

// Create new image with change dimensions
imagecopyresized($new_image, $image,
	0, 0, 0, 0,
	$width, $height,
	$orig_width, $orig_height);

// Print image
ob_start();
imagejpeg($new_image);
$data = ob_get_contents();
ob_end_clean();
echo json_encode(array('image' => base64_encode($data)));
?>

LightOpneID is a php openid class that can be used to login with openid services like Google and Twitter.

In this example, I wanted to show how to use LightOpenID to login to remote sites with Google, and also returning the Google email address associated with the account.

Once LightOpenID is download, take a look at the example-google.php file. If you just run this file along with the openid.php file on your webserver it will work just fine. However, if you want it to return the email address associated with the account you will need to change the code a bit.

Lines 1-12 are what handles the auth redirect and step-up of the authentication with google. Make sure you place your domain where it states localhost. Then after line 9 which states the identity:

$openid->identity = 'https://www.google.com/accounts/o8/id';

Add the line:

$openid->required = array('namePerson/friendly', 'contact/email');

Therefore, the result should look something like this:

<?php
require 'openid.php';
try {
    $openid = new LightOpenID('example.com');
    if(!$openid->mode) {
        if(isset($_GET['login'])) {
            $openid->identity = 'https://www.google.com/accounts/o8/id';
            $openid->required = array('namePerson/friendly', 'contact/email');
            header('Location: ' . $openid->authUrl());
        }
?>

This code tells Google that you want the email address also returned in the authentication process. Now the next step to get to the email address from the class when a valid authentication has occurred.

Therefore, I’m going to change up the return code (aka elseif statement) to get and display the returned email variable. To do this I’m going to change the echo string into an if else statement since I need to add a few lines of code.
String to be changed:

echo 'User ' . ($openid->validate() ? $openid->identity . ' has ' : 'has not ') . 'logged in.';

The return variables from google are stored in a associative array, this array can be accessed from calling this function:

$openid->getAttributes();

The index needed to access the variable is called ‘contact/email’ which will allow you to access the email address information.

Therefore, the resulting code looks like this:

        if($openid->validate()) {
            $returnVariables = $openid->getAttributes();
            echo 'User ' . $openid->identity . ' has logged in with this email address ' . $returnVariables['contact/email'];
        } else {
            echo 'User has not logged in.';
        }

You can download the complete source for the google example here.

It took me quite a bit of time finding how to add CSS to CakePHP layouts. Therefore, I’m going to write a bit about it to hopefully help people out. The hardest part was finding where everything went. So here we go:

The HTML layout is placed in:

/app/view/layout/default.ctp

You can find out more about layouts here.
The layout has to include:

<?php echo $scripts_for_layout; ?>

somewhere in the head to allow the addition of the sytlesheet or any other scripts you might have.

Now you have to place the stylesheet in this location:

/app/webroot/css/style.css

Then in your view you need to add the code:

<?php echo $html->css('style', null, array('inline' => false)); ?>

Where ‘style’ is the name of the stylesheet without the extension. That’s it. It should work.