sfTextReplacementPlugin - 0.1.0

unotrusive text replacement

You are currently browsing
the website for symfony 1

Visit the Symfony2 website

« Back to the Plugins Home

Signin


Forgot your password?
Create an account

Tools

Stats

advanced search
Information Readme Releases Changelog Contribute
Show source | Show as Markdown

sfTextReplacementPlugin

sfTextReplacement is a plugin based on the article "Dynamic Text Replacement" on [A List Apart]]([http://www.alistapart.com/articles/dynatext). It provides different methods to replace text with anti-aliased images which are generated on-the-fly and supports any TrueType fonts supported by GD Lib.

Installation

Install sfTextReplacement using symfony:

$ symfony install-plugin http://plugins.symfony-project.com/sfTextReplacementPlugin

Activate the module in your applications config/settings.yml:

all:  
  .settings:
    enabled_modules:        [sfTextReplacement]

Create a sfTextReplacementPlugin.yml in your project's (not application's) config directory and add the following:

all:
  caching:          true
  cachedir:         web/textReplacement/
  cacheinwebdir:    true
  fontdir:          plugins/sfTextReplacement/data/

  selectors:
    default:
      backgroundColor:         '#ffffff'
      fontColor:               '#17619f'
      fontFile:                'JOURNAL_.TTF' 
      transparentBackground:   true
      fontSize:                50

Set a config handler for the sfTextReplacementPlugin.yml:

  • Create a config_handlers.yml file in the project's config directory

  • paste the following code:

    config/sfTextReplacementPlugin.yml: class: sfDefineEnvironmentConfigHandler param: prefix: sfTextReplacementPlugin_

Create a directory in the web dir: textReplacement (the same as cachedir is set in sfTextReplacementPlugin.yml)

Clear the symfony cache:

$ symfony cc

Configuration

You can create different selectors with predefined font sizes, background colors, font families, etc. Just add a new selector in the sfTextReplacementPlugin.yml file, for example:

    h1:
      fontSize:   20
      fontColor:  '#ba52b7'
      fontFile:   'AVA.TTF'

Usage

There are currently three different methods to use this plugin:

grafical_text()

<?php use_helper('TextReplacement'); ?>


<?php echo grafical_text('Text', 'h1'); ?>

will output

<img src="/sfTextReplacement/h1/Text.png" alt="Text" />

seo_grafical_text()

<?php use_helper('TextReplacement'); ?>


<?php echo seo_grafical_text('Text', 'h1'); ?>

will output

<span class="sfTextReplacement" style="width: xxWidth px; height: xxHeight px; background-image: url(/sfTextReplacement/h1/Text.png);"><span>Text</span></span>

It will also add a stylesheet to your response, which includes the followign CSS rules:

span.sfTextReplacement span
{
  display: none;
}
span.sfTextReplacement
{
  display:block; 
  background-repeat: no-repeat;
}

So the result is an SEO friendly text replacement that's also acceptable for disabled people using a text-browser.

js_replace_text()

<?php echo js_replace_text('h1'); ?>

will outout an JavaScript code that will dynamically replace all "

<

h1>" tags with their image representation.