1. YouTube in Drupal
Presented by
Aaron Winborn
http://aaronwinborn.com/
http://docs.google.com/Present?docid=dgdc84wd_71n583fn82&invite=fc2p23q

2. Step 1: Celebrate!

4. Step 3
Talk it up!
Register the name.
Configure nameservers.
Blog about it.
Research YouTube fonts for awhile.
Install file system and configure the database.
Talk it up some more!
Time on this step:
3.5 hours
Real work time:
1 hour

5. Initial Contributed Modules
CCK -- to create content types
Views -- to create custom listings
Flag -- for "QuickLinks" and Promoted/Featured
Panels -- to create pages
FileField -- for video uploads
Embedded Media Field -- for 'YouTube' videos
jQuery Media -- to make FileField work w/ videos
Pathauto -- friendly URL's
Token -- required by Pathauto
Zen -- the Theme
Time: 0.75
Total: 4.25

6. Create Content Type
Time:
0.5
Total:
4.75

7. Create node/%nid Panel

8. Node Panel Context

9. Initial Panel Content
Time to create initial panel: 0.25
Troubleshoot: 0.75
Total time so far: 5.75

11. Front Page Panels
Different pages for Anonymous & Authenticated Users
global $user;
if ($user->uid) {
drupal_goto('panel');
}
Time: 0.75
Total: 6.5

15. Configure
jQuery
Media

19. Time: 0.25
Total: 6.75

20. Create Filler Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
pellentesque. Nulla sed nulla sit amet dolor ultrices dapibus. Fusce
semper. Donec vulputate. Quisque porttitor elit eget nisl. Donec eu
pede et arcu hendrerit egestas. Mauris lacus neque, porttitor at,
vestibulum id, aliquam adipiscing, leo. Curabitur risus pede, euismod
sit amet, vehicula ac, blandit nec, lacus. Etiam bibendum dolor et
magna. Curabitur est risus, cursus sit amet, cursus nec, vestibulum
eget, eros. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Sed tortor. Vivamus a ipsum eu tortor
commodo elementum. Phasellus blandit, massa in egestas ornare, mi
tortor feugiat arcu, mollis semper tortor nunc in augue. Nulla nec
neque. Aenean porttitor mi nec nunc.
Time: 1
Total: 7.75

21. Create Flags
Time: 0.5
Total: 8.25

23. Create Video Views
Promoted Block & Page; Featured Block & Page

24. (Pause for Live Demo)
Views 2 Needs to be Seen!
Time: 0.5
Total: 8.75

25. Create Node Panel (Take 2)
Time: 0.5
Total: 9.25

26. Debug PHP Errors w/ Node Panel
Time: 2
Total: 10.75

27. Create New Logo!
(and fav.ico too!)
Time: 2
Total: 12.75

28. Initial CSS for Home Panel Pages
body, div#page {
color:#000000;
font-family:Arial,sans-serif;
font-size:12px;
}
a:link, a:visited, a:active {
color:#0033CC;
}
.page-front .view-display-id-block_1 .views-row-odd,
.page-front .view-display-id-block_1 .views-row-even {
float:left;
padding:0 3px;
text-align:center;
width:23%;
margin-bottom:0;
}
.page-front .view-display-id-block_2 .views-row-odd,
.page-front .view-display-id-block_2 .views-row-even {
border-bottom:1px dotted #BBBBBB;
padding-bottom:10px;
margin-top:0 !important;
}
Time: 3
Total: 15.75

29. Initial CSS for Video Node page
#video-panel h2.title {
display:none;
}
#video-panel .node-type-video {
background:#EEEEEE none repeat scroll 0 0;
border:1px solid #CCCCCC;
}
#video-panel .node-type-video .node-inner {
padding: 5px;
}
#video-panel .submitted {
height: 64px;
}
#video-panel .submitted .info a {
font-weight: bold;
text-decoration: none;
}
#video-panel .submitted .info a {
text-decoration: underline;
}
#video-panel .picture {
float:left;
margin-top:6px;
background-color:#FFFFFF;
border:3px double #999999;
display:block;
overflow:hidden;
width: 46px;
height: 46px;
}
Time: 1
Total: 16.75

30. Install Media Mover &
FFMPEG Wrapper
Time: 0.25
Total: 17

31. OK, I lied...
Install Media Mover &
FFMPEG Wrapper
Time: 6.25
Total: 23

32. Watch FiveStar Video Tutorial
http://www.lullabot.
com/videocast/building-views-fivestar-
and-votingapi Time: 0.25
Total: 23.25

33. Add FiveStar to Views
Time: 0.5
Total: 23.75

34. Roll back Five Star from v.Dev
(Bleeding edge and all that...)
Time: 0.25
Total: 24

35. Create Taxonomy View
Time: 0.25
Total: 24.25

36. Override Taxonomy View Theme
<?php
// $Id: views-view-fields.tpl.php,v 1.6 2008/09/24 22:48:21 merlinofchaos Exp $
/**
* @file views-view-fields--video-taxonomy.tpl.php
* Default simple view template to all the fields as a row.
*
* - $view: The view in use.
* - $fields: an array of $field objects. Each one contains:
* - $field->content: The output of the field.
* - $field->raw: The raw data for the field, if it exists. This is NOT output safe.
* - $field->class: The safe class id to use.
* - $field->handler: The Views field handler object controlling this field. Do not use
* var_export to dump this object, as it can't handle the recursion.
* - $field->inline: Whether or not the field should be inline.
* - $field->inline_html: either div or span based on the above flag.
* - $field->separator: an optional separator that may appear before a field.
* - $row: The raw result object from the query, with all data it fetched.
*
* @ingroup views_templates
*/
$extra = (arg(1) && !is_numeric(arg(1))) ? (arg(1) .'/') : '';
?>
<?php print l($fields['name']->content, arg(0) .'/'. $extra . $fields['tid']->content, array
('html' => TRUE)); ?>
Time: 0.5
Total: 24.75

37. Add Primary Menu & Play with CSS
Time: 2
Total: 26.75

38. Make Primary Menu Active
for Video Nodes
function phptemplate_links($links, $attributes = array('class' => 'links')) {
// ...
if (isset($link['href']) && ($link['href'] == $_GET['q'] || ($link['href'] == '<front>' &&
drupal_is_front_page()) || (($link['href'] == '<front>') && ($_GET['q'] == 'panel')))) {
$class .= ' active';
}
else if ($link['href'] == 'browse' && arg(0) == 'node' && arg(1) && is_numeric(arg(1)))
{
$node = node_load(arg(1));
if ($node->type == 'video') {
$class .= ' active';
}
}
else if ($link['href'] == 'browse' && arg(0) == 'taxonomy') {
$class .= ' active';
}
}
// ...
}
Time: 0.5
Total: 27.25

39. Make 'Playing Now' Cycler
Work time: 0.5
(And Blog about it!) Blog time: 1
Total so far: 28.75

40. QuickList Flag & Views
Time: 2
Total: 30.75

41. CSS for QuickList +/- on Thumbs
/* QuickList flag link */
.views-field-ops {
float: left;
height:0;
}
.flag-quicklist a {
text-indent: -5000px;
height: 25px;
width: 25px;
margin-top:-24px;
display: block;
float: left;
}
.flag-quicklist a.flag-action {
background:transparent url(master-vfl65847.gif) no-repeat scroll -537px 4px;
}
.flag-quicklist a.unflag-action {
background:transparent url(master-vfl65847.gif) no-repeat scroll -587px 4px;
}
Time: 2
Total: 32.75

42. User videos at my/videos
Time: 1
Total: 33.75

43. Make /user & /my
Active on Home Menu Tab
else if ($link['href'] == '<front>' && (in_array(arg(0), array('user', 'my')))) {
$class .= ' active';
}
else if ($link['href'] == 'community' && arg(0) == 'forum') {
$class .= ' active';
}
else if ($link['href'] == 'community' && arg(0) == 'node' && arg(1) && is_numeric(arg
(1))) {
$node = node_load(arg(1));
if ($node->type == 'forum') {
$class .= ' active';
}
Time: 0.25
Total: 34

44. Create Top & Footer Menus
Time: 0.25
Total: 34.25

45. CSS for Menus & Nav Bars
/* primary menu */
#primary {
float:right;
height:28px;
list-style-type:none;
margin:0;
padding:5px 0 0;
width:693px;
}
#primary li {
background:transparent url(master-vfl65847.gif) no-repeat scroll 0 -137px;
display:block;
float:left;
margin-right:5px;
padding: 0;
}
#primary li span.leftcap {
background:transparent url(master-vfl65847.gif) no-repeat scroll -152px 0;
display:block;
float:left;
height:28px;
width:5px;
}
Time: 0.5
Total: 34.75

46. Advanced Forum Configuration
Time: 1
Total: 35.75

47. Add View Block w/ Forum Listings
Time: 0.5
Total: 36.25

48. YouTube Redesign! Yay!
Time: 0.5
Total: 36.75

49. Troubleshoot Media Mover
Time: 4
Total: 40.25

50. Subscription Button Theming
function youdrup_form_alter(&$form, $form_state, $form_id) {
// Add spans around subscriptions button for styling.
if ($form_id == 'subscriptions_ui_node_form') {
$form['wrapper']['#title'] = '<span class="button-left"></span><span
class="button-text">'. $form['wrapper']['#title'] .'</span><span class="
button-right"></span>';
}
Time: 2.5
Total: 42.75

51. Node Block CSS (and More Link)
// $Id$
function toggle_slider($link) {
// $link = $('.more-slider').children('.
slider-link').children('a');
var more = $link.text() == 'more info'; if (Drupal.jsEnabled) {
if (more) { $(document).ready(function () {
$link.text('less info'); $('#content-teaser').show();
$('#content-full').slideDown(); $('#content-full').hide();
$('#content-teaser').slideUp(); $section = $('#slider-link');
} $section.html('(<a href="#" id="slider-link-a"
else { >more info</a>)');
$link.text('more info'); $('#slider-link-a').click(function () {
$('#content-teaser').slideDown(); toggle_slider($(this));
$('#content-full').slideUp(); return false;
} });
} });
console.log('embed start');
$('.views-field-field-video-youtube-embed a').
each(function (i) {
console.log('starting...');
if ($(this).children('img').size() == 0) {
console.log('embed pass');
$(this).parent().hide();
}
});
}
Time: 0.5
Total: 43.25

52. jQuery Media
Debug Session
Random bug-hunting...
Time: 0.5
Total: 43.75

53. Media Mover Woes
Finally, a live demo!
Time: 3.25
Total: 47

54. jQuery UI for Tabs (Fun!)
Time: 1.5
Total: 48.5

55. Grab Correct Thumbnails
Problem:
Blank thumbnail if no Emfield
Solution:
<?php
if ($row->node_data_field_video_youtube_field_thumbnail_fid) {
$results = db_query_range("SELECT * FROM {files} WHERE fid = %d", $row-
>node_data_field_video_youtube_field_thumbnail_fid, 0, 1);
$file = db_fetch_object($results);
print l(theme('imagecache', 'thumbnail', $file->filepath), 'node/'. $row->nid, array
('html' => TRUE));
}
else if ($row->{$field->field_alias}) {
print $output;
}
else {
print l(theme('image', path_to_theme() .'/video-not-available.png'), 'node/'. $row->nid,
array('html' => TRUE));
}
?>
Time: 1
Total: 49.5

56. Create Slide Show Presentation
Click to add content... ;)
Time: 4
Total: 53.5

58. Celebrate!
Total Time: 53.5 hours (plus this presentation)

59. Modules used for YouDrup
Administration Menu Devel & Devel Generate
Content (CCK): ImageAPI
Content Permissions ImageAPI GD2
Embedded Media Field ImageCache
Embedded Video Field Media Mover API
Field Group FFMPEG Media Mover
FileField Media Mover Auto Run
ImageField Media Mover CCK
Core modules: Media Mover Directory
Menu Media Player
Path Advanced Forum
Search FFMPEG Wrapper
Statistics Flag
Update Status Google Analytics

60. Modules used (Continued)
jQuery UI jQuery Update
MimeDetect jQ
Mollom jQuery Media
Pathauto Views
Service Links Views UI
Similar by Terms Voting API
Token FiveStar
YouTube API YouDrup (Custom Module)
Panels
Panel Pages
Panels Simple Cache
Views Panes
Subscriptions
Subscriptions Mail
Subscriptions UI

61. YouTube in Drupal
Presented by
Aaron Winborn
http://aaronwinborn.com/