Embedding Youtube Videos with a Template Plugin

Pligg’s template uses Template Lite (a template system based on Smarty), and one of the built-in features for this system is that it comes with plugin functionality. This allows you to make use of a number of pre-installed plugins (located in the /plugins directory), or you can even add your own plugins. In this post I’ll be demonstrating how you can add a new template plugin to return an embedded Youtube video. This is a very quick example that should provide enough direction for you to craft your own template plugin for custom functions.

The plugin that we will be creating in this guide will scan the contents of a template variable and convert any Youtube URL into an embedded Youtube video. Now let’s begin by creating a new file located at /plugins/modifier.youtube.php. Inside of this file we are going to write a regular expression to find the Youtube URL within the string (the template variable content). We then define that we want to replace the Youtube URL with an embedded video.

<?php
/**
 * template_lite youtube modifier plugin
 *
 * Type:     modifier
 * Name:     youtube
 * Purpose:  Converts an element into an embedded Youtube video(s)
 */
function tpl_modifier_youtube($string)
{
	// http://stackoverflow.com/questions/5830387/how-to-find-all-youtube-video-ids-in-a-string-using-a-regex?answertab=active
	// Linkify youtube URLs which are not already links.
	$string = preg_replace('~
		# Match non-linked youtube URL in the wild. (Rev:20111012)
		https?://         # Required scheme. Either http or https.
		(?:[0-9A-Z-]+\.)? # Optional subdomain.
		(?:               # Group host alternatives.
		  youtu\.be/      # Either youtu.be,
		| youtube\.com    # or youtube.com followed by
		  \S*             # Allow anything up to VIDEO_ID,
		  [^\w\-\s]       # but char before ID is non-ID char.
		)                 # End host alternatives.
		([\w\-]{11})      # $1: VIDEO_ID is exactly 11 chars.
		(?=[^\w\-]|$)     # Assert next char is non-ID or EOS.
		(?!               # Assert URL is not pre-linked.
		  [?=&+%\w]*      # Allow URL (query) remainder.
		  (?:             # Group pre-linked alternatives.
			[\'"][^<>]*>  # Either inside a start tag,
		  | </a>          # or inside <a> element text contents.
		  )               # End recognized pre-linked alts.
		)                 # End negative lookahead assertion.
		[?=&+%\w-]*        # Consume any URL (query) remainder.
		~ix', 
		'<div class="modifier_youtube"><iframe width="560" height="315" src="//www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe></div>',
		$string);
	return $string;
}
?>

Next we need to make use of our new modifier by using it in the link_summary.tpl file. This is the template file where Pligg stores the data for an individual story (ex. Title, URL, Description, Author, Voting, etc.). Open up the file and find where you would like to embed a Youtube video. One popular location is either directly before or after the “$story_content” template variable, where the story description is called. Paste in the code below when you’ve found a good location:

{if $url_short eq "youtube.com" && $url_short eq "youtu.be"}
    {$url|youtube}
{/if}

The first and last lines of the code above check to see if the URL for this article is from either Youtube.com or Youtu.be (Youtube’s URL shortening domain). If the {$url} value were to be from another domain, then it would only return a URL in text form and we don’t want that. The middle line is where we make use of the Youtube modifier. Save the file and clear your template cache. Any stories that used a Youtube.com or Youtu.be video URL should now return an embedded video wherever you placed the code block above.

If you want to get a little creative, you can use the same modifier on the story description area by using {$story_content|youtube}. Any Youtube URLs in the story description will be converted into embedded videos. You can also stack modifiers to apply more than one to a template variable. Here’s an example: {$story_content|nl2br|youtube}

For more information about template plugins and modifiers, check out the Smarty Plugins documentation page.

4 thoughts on “Embedding Youtube Videos with a Template Plugin

Add Comment Register



Leave a Reply