ITT #7: Dynamically Change Width and Height in HTML Markup

A Guest Post from Brenley Dueck

A Quick Note from the Guest Author

Hello everyone, I'm Brenley Dueck or better known as Brenelz. I currently run my own business called Brenelz Web Solutions which focuses primary on web design in winnipeg. The web technologies I most specialize in are CSS, jQuery, AJAX, PHP, and the MySQL database. Please make sure to visit my web design blog and follow me on twitter.

Defining the Problem

In a recent project I was working on we had to allow the client to embed videos within the site. This had to be done using an easy-to-use customized CMS. The thought is that they can take the embed code right off the YouTube site and save it to the DB for use throughout the site.

YouTube's default dimensions for a video are 480 x 295, but what if you need a different size of video? Obviously we don't want to have the client fiddling around with the embed code changing the width and height attributes; so this is where I turned to using regular expressions in PHP. Take a look!

Let's pretend the following source is what we would like to modify and it is stored in a $youtube variable:

    $youtube = <<<EOF
<object width="480" height="295">
	<param name="movie" value="http://www.youtube.com/v/Xq-HRHMEmfg&hl=en&fs=1"></param>
	<param name="allowFullScreen" value="true"></param>
	<param name="allowscriptaccess" value="always"></param>
	<embed src="http://www.youtube.com/v/Xq-HRHMEmfg&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295"></embed>
</object>
EOF;

Fixing the Problem

How can we change the width and height attributes throughout this code? There are probably numerous ways, but none quite as easy as using regular expressions. If you are unfamiliar with the basics of regular expressions I suggest checking out Regular-Expressions.info.

A PHP function that makes use of regular expressions is "preg_replace". It allows you to use regular expressions to replace whatever matches. More details on the function can be found at PHP.NET

Creating The Function

We will be creating a function that allows you to resize any mark-up and not just YouTube videos. It will allow you to modify an elements width and height attributes as well as changes any inline styling. Below is what we get:

function resizeMarkup($markup, $dimensions)
{
    $w = $dimensions['width'];
    $h = $dimensions['height'];
    
    $patterns = array();
    $replacements = array();
    if( !empty($w) )
    {
        $patterns[] = '/width="([0-9]+)"/';
        $patterns[] = '/width:([0-9]+)/';
        
        $replacements[] = 'width="'.$w.'"';
        $replacements[] = 'width:'.$w;
    }
    
    if( !empty($h) )
    {
        $patterns[] = '/height="([0-9]+)"/';
        $patterns[] = '/height:([0-9]+)/';
        
        $replacements[] = 'height="'.$h.'"';
        $replacements[] = 'height:'.$h;
    }
    
    return preg_replace($patterns, $replacements, $markup); 
}

The most difficult part of the above to understand is probably the ([0-9]+) part. Let me break it down:

1. () - wrap the value that we want to replace
2. [0-9] - any number between and including 0 and 9
3. + - one or more occurrences

Using the function:

We can then dynamically change the size based on the query string (?width=228&height=178)

$width = intval($_GET['width']);
$height = intval($_GET['height']);

$youtube = resizeMarkup($youtube, array(
		'width'=>$width,
		'height'=>$height
));
echo $youtube;

Below is the result:

Another little feature I should quickly point out is that you don't have to pass both height and width. For example if you want a div to dynamically change its width but stay a fixed height (YouTube caption), you can do the following:

$width = intval($_GET['width']);

$caption = <<<EOF
<div style="background:#F8EBD7;border:1px solid #444;text-align:center;width:500px;height:50px;">
	commandN Episode #170
</div>
EOF;

$caption = resizeMarkup($caption, array(
		'width'=>$width
));
echo $caption;

In this case, the div will remain 50px high but its width will be changed by the query string (?width=228)

Conclusion

We now have a re-usable function that allows us to use many different sizes of the same YouTube clip without making the client tinker with any code!

A Note from Jason

Do you have an idea for an article? I'm accepting guest submissions, so give me your best shot!

Posted Mar 17, 2009 by Brenley Dueck.
This entry is filed under instant tip tuesday, php, programming, and brenley dueck.