Feature Ribbons with PHP and GD

September 21, 2010

Written by Gavin Blair | No Comments

Adding a diagonal ribbon to a thumbnail is easy with PHP and GD. You may be able to accomplish this task with CSS3, but the result can be a little buggy (strange wiggles on mousover), and it currently is not consistent across browsers. You can create dynamic images in PHP using GD functionality.

The Ribbon Base Image

The ribbon base image that I use is not a transparent PNG – rather, behind the red banner I have a pink background. In PHP we will tell GD to interpret pink as transparent so that our edges are smooth. Feel free to use this image for your own purposes.

Using GD to Add Text

This file will take the base image and place white text over it. Now we can treat this file as an image, and include it in our CSS or image tags. Note that this file refers to arial.ttf – this font file (or whatever TTF font file you decide to use) must be in the same directory as ribbon.php. You can find arial.ttf in your computer’s fonts directory.

Usage

The important part here is the background-image. Notice how the text we want is in the query string of ribbon.php.

Styling and Position

This will place the ribbon in the lower right corner, above the image.

Questions, comments or optimizations? Let us know in the comments.

Isometric 3D Effect with CSS3 Transformations

May 12, 2010

Written by Gavin Blair | 5 Comments

I recently had the opportunity to make use of CSS3 transformations to achieve a 3D effect in a practical application.

If you’re a web developer reading this, you know that something like this doesn’t happen every day, and is therefore very exciting!

The main requirement for the project was to display a 3D isometric floorplan of the Convergence Centre at Western University in London Ontario, with tweeps showing up in the room they are tweeting from.

Each room is a <div class=”users”> that can contain <div class=”avatar”> as many times as needed. Transparent GIF’s are used as background images for the character’s body, head, torso and legs.

<div id="bar" class="users">
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
</div>
<div id="maple" class="users">
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
</div>

For development purposes, we put a thick red border around the rooms.
As we add more avatars to a room, we’ll adjust their margins so that characters squeeze closer together and the room will not overflow.
Avatars are floated right so they stack nicely – closer ones will overlap farther avatars.

.users {
	border: 4px dashed red;
	position: absolute;
}
.users .avatar {
	height: 44px;
	width: 33px;
	float: right;
	margin: 17px;
	position: relative;
}
.head, .torso, .legs {
	position: absolute;
	top: 0;
	left: 0;
	height: 44px;
	width: 33px;
}

Adding CSS3 transformations, we can skew the room divs to match the shape of the rooms in the background image.
The side-effect of this is that the avatars inside will also be skewed.
The CSS below will affect Mozilla and Webkit-based browsers only.

.users {
	border: 4px dashed red;
	position: absolute;
	-moz-transform: skewX(45deg) skewY(-12deg);
	-webkit-transform: skewX(45deg) skewY(-12deg);
}

Now we have to put an opposite skew on the avatars to cancel out the room skew.

.users .avatar {
	-moz-transform: skewX(-50deg) skewY(12deg) scaleX(1.2);
	-webkit-transform: skewX(-50deg) skewY(12deg) scaleX(1.2);
}

All that’s left is to remove the red border around the rooms!

If you have any questions or comments about using CSS3 to achieve a 3D effect, or if you want to show off your own 3D CSS3 project, we’d love to hear from you!

Extending the Controller Class in CodeIgniter

March 11, 2010

Written by Gavin Blair | 10 Comments

CodeIgniter is a great little PHP framework that allows you to rapidly build MVC web applications. Without getting too far into Model View Controller ideology, this post will explain how to extend CodeIgniter’s Controller class to achieve site-wide authentication checks.

Not long after starting your fancy new webapp, you will start to realize that putting

if (!isset($_SESSION['isloggedin'])) {
  redirect('/login');
}

in every single controller function is very tedious.

You can create an extension of the Controller class and put the common code in there. Here’s how.

Create a file in /system/application/libraries called MY_Controller.php. The name of this file is important. If the prefix “MY_” doesn’t do it for you, go into /system/application/config/config.php and change

$config['subclass_prefix'] = 'MY_';

to whatever you want. Don’t change the “Controller” part though! You can also extend Models and Helpers.

Start with the following code in MY_Controller.php:

class Authenticated_Controller extends Controller {
  function Authenticated_Controller() {
    parent::Controller();
    session_start();
    if (!isset($_SESSION['isloggedin'])) {
      redirect('/login');
    }
  }
}

Go ahead and add any common controller functions to this class. Feel free to change “Authenticated_Controller” to whatever you want. You can also have multiple Controller extensions in this file.

Note: If you only have one controller extension, it is standard to name your class MY_Controller (rather than Authenticated_Controller).

Important Note: If you find yourself creating a bunch of controller extensions, take a step back and consider what you are doing. Is your extension being used by only one controller? If so, just put your code in that controller’s constructor.

Now it’s time to start using your new controller extension!

In every controller that requires authentication (don’t do this for your login controller!) rather than the traditional

class Manage extends Controller { ...

use this instead:

class Manage extends Authenticated_Controller { ...

Do you have CodeIgniter controller extensions that could be useful to others? Let us know in the comments.