TK Page Title

Type: Module

This Expression Engine Add-On allows you to automatically output your own image-based titles for weblog entries. It does so with gradient-filled backgrounds and 24-bit PNG transparency.

Requirements

• The CP JQuery extension is required in order to use the included JQuery colour picker [1.1.0]
• Tested on Expression Engine 1.6.4, 1.6.5 and 1.6.6 (may work with lower versions...)
• Tested only on PHP 5.2.6 (should work with lower versions...)
• Requires GD 2.0.1+
• Knowledge of Cascading Style Sheets (CSS)
• Knowledge of the Internet Explorer .htc PNG fix to allow for full cross browser support

Parameters

• antialias - [boolean] - Allows for text Anti-Aliasing to be turned off if set to false. [1.0.5]
• align - [string] - Overrides the default text alignment and allows text to be aligned within the specified width of the image. Accepted values are: left, center, right, left-adjust, center-adjust, right-adjust or adjust [1.0.4]
• case - [string] - Converts the case of any string. accepts 'upper' and 'title'. Use with caution on localised text.
• class - [string] - Defines an HTML class attribute for the containing HTML element. Will always contain an HTML class called pagetitle however.
• color - [text] - Sets the font colour in RGB, eg: FFCC00. This will be used if a gradient fill image is not defined. [1.0.7]
• cssonly - [boolean] - If set to true, this outputs only the style attribute containing all relevant css to display the image [1.0.9]
• debug - [boolean] - Prevents image caching, outputs some variables when generating the image.
• fsize - [int] - Sets the font size. Overrides the default defined in the page title type.
• gradient - [string] - A .png image location from URL root on the server, eg: /images/file.png. Overrides the default defined in the page title type.
• id - [string] - Defines an id attribute for the containing HTML element.
• leading - [int] - Defines leading for the image. [1.1.0]
• link - [string] - This will add an a tag within the wrapping tag and link to that place automatically
• name - [boolean] - Outputs name attribute on containing element or a tag, if present. [1.1.2]
• nocache - [boolean] - Prevents image caching. Use only for testing. [1.1.0]
• style - [string] - Defines additional style properties for the containing HTML element. Will always contain the default styles that define the background-image, width etc. [1.0.4]
• tag - [string] - This defines the wrapping HTML tag for that item (h1, h2, h3, p etc). Overrides the default defined in the page title type.
• target - [string] - Defines target value for links, eg: _blank, _self.
• type - [string] - The name of a page title type, a set of pre-defined properties saved in the TK Page Title Control Panel.
• width - [int] - Defines a specific. Overrides the default defined in the page title type.

Installation

As with installing all modules, you would be wise to backup your database before installing.

To install TK Page Title, you must:

1. First, copy the its files to your Expression Engine installation. The zip archive is organised so that you can copy the files directly to the root of a 'regular' EE installation.
2. Change the permissions on the directory where the images created will be stored using your FTP client, CHMOD 777 the directory /themes/tk_page_title/pagetitles (the module will not work without these permissions set).
3. Login to your Expression Engine control panel and navigate to modules page. From here, click 'Install' next to the TK Page Titles module.
4. With that complete, you are now ready to roll.

Example

The following example should give you an idea of how to use the TK Page Title module.

{exp:tk_page_title}My title or weblog title {title} {/exp:tk_page_title}

This will output the following HTML:

<h1 style="display:block; background-repeat: no-repeat; background-image: url(/themes/tk_page_title/pagetitles/sample.png); height: 32px; width: 600px" class="pagetitle" title="My title or weblog title"><span style="display: none">My title or weblog title</span></h1>

Control Panel

Here you can create different types of page title, each with their own fonts, sizes and colours...

Important notes

• Remember that if you upload unlicensed fonts to your server for use with TK Page Title, you may be breaking the law! You are advised to store your fonts outside of your sites public directory (public_html, www, httpdocs or similar); doing this will almost guarantee unauthorised access/distribution of your fonts.

Feedback and discussion

If you have any feedback, feel free to comment on this page. There is also an EE Forum post and the module is listed on devot-ee.

Credits

In addition to its core code, written by myself, this module uses other PHP scripts made freely available on the web. Much thanks to Andrew Collington for his imagemask class and to Matsuda Shota for his awesome font classes.

If you'd like to send me beer money in exchange for updates and more modules, please do!
It'll be a Leffe or Hoegarrden by the way ;)

Releases

Version 1.0.8
19th June 2009

• Fixed another part of the code which was causing the image to be output to the browsers URL bar. Please let me know if you still have this bug!.

Download

Version 1.0.6
13th January 2009

• Rewrote the code which calculates the number lines in in the text, again. This fixes a bug with gradient fills on some images.

Version 1.0.5
16th December 2008

• Added antialias parameter which will turn off AA if set to false.
• Fixed bug for the target parameter.
• Changed the way images are stored. Gradient and Mask files used in the generation of the image are now automatically removed.

Version 1.0.4
27th November 2008

• Rewrote the code which calculates the number lines in in the text, in order to more accurately generate the gradient fill. This fixes a bug with gradient fills on some images.
• Added align parameter to define the alignment of text within an image.
• Added style parameter to define additional style attributes on the containing tag.
• Changed the way the filename is generated. The hashed value is now generated from a wider range of given parameters, to prevent unwanted caching.

Version 1.0.3
23rd November 2008

• Added a link to delete all files that have been generated by TK Page Title (clear cache).
• Made minor changes to CP interface.

Version 1.0.2
22nd November 2008

• Changed the font file storage location to an absolute path from server root. Users are advised to store fonts outside of their public html directory to prevent unauthorised access or distribution of licensed fonts.
• Fixed a bug occurring when the gradient parameter was set.
• Added a tag preview to the TK Page Title module index page.
• Added a link to the documentation page.

Version 1.0.1
27th October 2008

• Added first level of error checking in control panel when creating or editing existing page title types.
• Added new field to page title types: save location, for determining where page titles are stored.

Version 1.0.0
21st October 2008

• First public release

Version 1.1.2
4th December 2009

• Fixed bug on Module CP index page where preview images wouldnt display on certain server setups.
• Removed redundant code from global variable replacer.
• Added name parameter to apply name attribute for anchors on outputted html code
• Added upgrade script to correctly update version number during upgrade.

Version 1.1.1
5th November 2009

• Added Latin-1 Supplement characters to the ones used in calculating character height accurately. This improves language support, displaying fonts more accurately (providing your font has the characters in its character set).

Version 1.1.0
2nd September 2009

• Much of the module has been rewritten, providing a number of improvements.
• Improvements have been made when adding or editing a TK Page Title type. Fonts and gradient files now appear in drop-down lists and a colour picker tool is available for TK Page Title images which do not use a gradient fill.
• The locations of outputted files, fonts and gradient image files are now defined in the Settings page.
• There is now a preview of each TK Page Title available within the Control Panel.
• The alignment of text can now be defined within each TK Page Title type.
• Leading (line spacing) is now an attribute of each TK Page Title type and can also be defined via the new leading parameter in the module's ee tag.
• Debug has been improved. It now outputs key attributes for each image being generated (and prevents images from being cached).
• nocache has been added as a parameter. It prevents images from being cached (but does not output any debug information).
• More default gradient variations have been added.

Version 1.0.9
25th July 2009

• Added cssonly parameter, allowing for output of just the css required to display the image.
• Added ability to define URL and server paths for location of images (this gives increased control for sites running their admin panel in a separate location to the site).
• Further improvements to code.

Version 1.0.7
10th June 2009

• Added color property/parameter: Page titles will use the colour when a gradient fill is not provided.
• Added support for global variables within page titles.
• Restructured some code to make it a bit tidier.
• Fixed a part of the code which was causing the image to be output to the browsers URL bar. This error may continue to occur in the event of a PHP error.