How to do a custom display with wordTube 1.60IntroductionThis will show how to do a custom display with wordTube 1.60. DescriptionThe code below will replace the standard wordTube display with a custom display. This will: - show the video with a custom width and adjust height in proportion of the original video.
- add a popup link at the top right of the video.
- show the video title below.
This way, you can adjust the plain display of your video to your template and show it larger in a popup window. CodeFirst, this is the code to add to the "functions.php" file of your theme. If it doesn't exist, you can create it. /******************************************************************
/* Replace media/playlist in a content with custom width and height (for media)
******************************************************************/
function Ravesearchvideo($content) {
return Ravesearchvideo_sub($content, 455, 0);
}
/******************************************************************
/* Replace media/playlist in a content with custom width and height (for media)
/* If width & height = 0, returns database video sizes
/* If only height = 0, adjust height to width in proportions of database sizes
/* width and height auto-adjust only applies to media (not to playlist)
******************************************************************/
function Ravesearchvideo_sub($content, $width=0, $height=0, $exc=false) {
global $wpdb, $WPwordTube;
if (!$WPwordTube->CheckForTags($content)) return $content;
$search = "@(?:<p>)*\s*\[MYPLAYLIST\s*=\s*(\w+|^\+)\]\s*(?:</p>)*@i";
if (preg_match_all($search, $content, $matches, PREG_SET_ORDER)) {
foreach ($matches as $match) {
$dbresult=false;
if (!in_array($match[1], $WPwordTube->PLTags))
$dbresult = $wpdb->get_row('SELECT * FROM '.$wpdb->wordtube_playlist.' WHERE pid = '.$match[1]);
if (($dbresult) || in_array($match[1], $this->PLTags)) {
$replace = $WPwordTube->ReturnPlaylist($match[1] , $exc, $width, $height);
$content = str_replace ($match[0], $replace, $content);
}
}
}
$search = "@(?:<p>)*\s*\[MEDIA\s*=\s*(\w+|^\+)\]\s*(?:</p>)*@i";
if (preg_match_all($search, $content, $matches, PREG_SET_ORDER)) {
$i=1;
$auto = (is_single() && $WPwordTube->wordtube_options['startsingle'] && count($matches) == 1);
foreach ($matches as $match) {
$dbresult = $wpdb->get_row('SELECT * FROM '.$wpdb->wordtube.' WHERE vid = '.$match[1]);
if ($dbresult) {
if ($width == 0) $pwidth = $dbresult->width; else $pwidth = $width;
if ($height == 0) {
if ($dbresult->width == 0)
$pheight = $dbresult->height;
else
$pheight = $pwidth / $dbresult->width * $dbresult->height;
} else $pheight = $height;
if ($auto && $i == 1) $autostart = true; else $autostart = $dbresult->autostart;
// Regular display first
$replace = '<div class="wdtube">'.$WPwordTube->ReturnMedia($dbresult->vid, $dbresult->file, $dbresult->image, $pwidth, $pheight, $autostart, $exc);
$ID = 'WT'.$WPwordTube->rand;
// Popup link
$path = pathinfo($dbresult->file);
$extension = strtolower($path['extension']);
if ($extension != 'mp3') {
$hwidth = 800;
$hheight = $hwidth * $pheight / $pwidth;
$replace .= SetWordTubeMedia ($dbresult->file, $dbresult->image, $hwidth, $hheight, $ID, $extension, get_wt_playertype(), get_wt_options_all(), false, $dbresult->vid);
$h = new pt_highslide('#', '', ' ');
$h->set_wrapClass('highslide-wrapper-wtb');
$h->set_borders(get_pt_options('hsframe'));
$h->set_size($hwidth, $hheight, get_pt_options('hsmargin'));
$h->set_href_text();
$h->set_title('Voir '.$dbresult->name);
$wtlink = '<div class="wtlink">'.$h->highslide_link('swfObject', 'so'.$ID).'</div>';
unset($h);
} else
$wtlink = '';
$replace .= '<div class="wtfoot">'.$wtlink.'<span>'.stripslashes($dbresult->creator).' » '.stripslashes($dbresult->name).'</span></div>';
$replace .= '<div style="clear: both"></div>';
$replace .= '</div>';
$content = str_replace ($match[0], $replace, $content);
$i++;
}
}
}
return $content;
}Then, the code to add to your theme file where you want the custom display to show. Most likely, this is a file where a loop is shown with the_content(). You need to paste it before the loop (before the "while" instruction and after the "get_header()" call). <?php remove_filter('the_content', array(&$WPwordTube, 'searchvideo')); ?>
<?php add_filter('the_content', 'Ravesearchvideo'); ?>Finally, the css to go with it: .single .entry-content p { font: 14px Arial, Helvetica, sans-serif; font-weight: 100; line-height: 20px; }
.single .entry-content .wdtube { background: black; padding: 5px; clear: both; position: relative; }
.single .entry-content .wtlink { display: block; margin-bottom: 20px; }
.single .entry-content .wtfoot { width: 455px; background: black; padding: 3px 0; text-align: center; }
.single .entry-content .wtfoot a { text-align: center; font-size: 12px; padding-top: 7px; display: block; }
.single .entry-content .wdtube span { text-align: center; color: #666; font-size: 12px; padding-top: 7px; display: block; }
.single .entry-content div.wtlink { font-size: 24px; width: 24px;
height: 24px; line-height: 24px; padding:0; margin:0;
float: left; background: url(images/zoomin.png);
display: block; margin-right: 3px;
position: absolute; right: 10px; top: 10px; }You need a "zoomin.png" image. Plain page result: 
With expansion: 
|
