Hi there
(I'm posting this here because I can't find a better place to put it.)
I'm building the designs for a new site (10,000+ pages) and I had an idea to minimize the number of design customizations.
I'm using the "asset_lineage" design area along with a couple of keyword modifiers to make the asset's lineage form CSS classes which allow me to control colours, backgound images etc. in various parts of the site. It's also a technique I've used for newsletters with standard stories with some success. Unfortunately the 'replace' keyword modifier is very broken so I can't use it to clean up the %asset_name%s adequately. What I'd like is a keyword modifier that makes a matrix keyword safe to use as an ID or class name.
Below are two versions of a PHP function that would do the required sanitizing of the keyword making it safe to use as a class or ID name. The first allows you to specify whether the separator character is a hyphen or an underscore and what the prefix will be for strings that start with a number.
/**
* @function css_safe() takes a string and makes it safe to use as an
* HTML class or ID.
*
* css_safe() is intended to be used as a matrix keyword modifyer to
* allow use of matrix keywors (e.g. %asset_name%) as an HTML class
* or ID, which in turn can be used as a CSS selector.
*
* EXAMPLE: %asset_name^csssafe%
* EFFECT: '9 good uses for Regular Expressions' > 'A_9_good_uses_for_Regular_Expressions'
* EXAMPLE: %asset_name^csssafe:ID%
* EFFECT: '9 good uses for Regular Expressions' > 'ID_9_good_uses_for_Regular_Expressions'
* EXAMPLE: %asset_name^csssafe:ClasS%
* EFFECT: '9 good uses for Regular Expressions' > 'ClasS_9_good_uses_for_Regular_Expressions'
*
* EXAMPLE: %asset_name^csssafe%
* EFFECT: 'John Smith speeks: "Life is good!"' > 'What_can_go_wrong_saying_too_much'
* EXAMPLE: %asset_name^csssafe::-%
* EFFECT: 'John Smith speeks: "Life is good!"' > 'What-can-go-wrong-saying-too-much'
*
* EXAMPLE: %asset_name^csssafe%
* EFFECT: 'John Smith speeks: "Life is good!"' > 'John_Smith_speeks_Life_is_good'
*
* EXAMPLE: %asset_name^csssafe%
* EFFECT: 'Bighting the hand that feeds you - don't let'm get too hungry' > 'Bighting_the_hand_that_feeds_you_don_t_let_m_get_too_hungry'
*
* @param string $input text (from matrix keyword) to be made safe
* for use as an HTML class or ID
* @param string $prefix an alphabetical character (or characters) to
* prefix strings that start with numbers so they are
* valid HTML class or ID names
* @param string $separator underscore or hyphen use to replace
* single (and multiple consecutive) non alpha-numeric
* characters within the input text
*
* @return string text suitable for use as an HTML class or ID name
*/
function css_safe( $input , $prefix = 'A' , $separator = '_' )
{
// ensure separator character is valid
if( $separator != '-' ) $separator = '_';
// ensure prefix character is valid
if( !preg_match( '/^[a-z]+$/i' , $prefix ) ) $prefix = 'A';
// Find all the bad characters
$find = array(
'/(?:^[^a-zA-Z0-9]+|[^_a-zA-Z0-9-]+$)/' // find bad characters from begining and end of string
// (Note: in this version, strings cannot start with a
// hyphen or underscores ('-', '_') as these are generally
// reserved for browser specific selectors)
,'/^(?=[0-9])/' // find numbers at the start of the string
,'/[^_a-zA-Z0-9-]+/' // find all bad characters within string
,'/[_-]{3}/' // cleaning up
);
// Replace all the bad characters
$replace = array(
'' // strip bad characters from begining and end of string
,$prefix.$separator.'\1' // add underscore to strings starting with a number
,$separator // replace multiple bad chars with a single underscore (or separator char)
,$separator // cleaned up
);
return preg_replace( $find , $replace , $input );
}
/**
* @function css_safe_simple() takes a string and makes it safe to
* use as an HTML class or ID.
*
* css_safe_simple() works in an identical way to css_safe() but
* without the ability to control the prefix character(s) or
* separator character.
*
* EXAMPLE: %asset_name^csssafe%
* EFFECT: '5 ways to skin a cat' > 'A_5_ways_to_skin_a_cat'
*
* EXAMPLE: %asset_name^csssafe%
* EFFECT: 'John Smith speeks: "Life is good!"' > 'John_Smith_speeks_Life_is_good'
*
* EXAMPLE: %asset_name^csssafe%
* EFFECT: 'Bighting the hand that feeds you - don't let'm get too hungry' > 'Bighting_the_hand_that_feeds_you_don_t_let_m_get_too_hungry'
*
* @param string $input text (from matrix keyword) to be made safe
* for use as an HTML class or ID
*
* @return string text suitable for use as an HTML class or ID name
*/
function css_safe_simple( $input )
{
// Find all the bad characters
$find = array(
'/(?:^[^a-zA-Z0-9]+|[^_a-zA-Z0-9-]+$)/' // find bad characters from begining and end of string
// (Note: in this version, strings cannot start with a
// hyphen or underscores ('-', '_') as these are generally
// reserved for browser specific selectors)
,'/^(?=[0-9])/' // find numbers at the start of the string
,'/[^_a-zA-Z0-9-]+/' // find all bad characters within string
,'/[_-]{3}/' // cleaning up
);
// Replace all the bad characters
$replace = array(
'' // strip bad characters from begining and end of string
,'A_' // add underscore to strings starting with a number
,'_' // replace multiple bad chars with a single underscore (or separator char)
,'_' // cleaned up
);
return preg_replace( $find , $replace , $input );
}
