YouDrup_in_Drupal
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
691
On Slideshare
689
From Embeds
2
Number of Embeds
1

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 2

http://www.slideshare.net 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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!
  • 3. 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
  • 4. 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
  • 5. Create Content Type Time: 0.5 Total: 4.75
  • 6. Create node/%nid Panel
  • 7. Node Panel Context
  • 8. Initial Panel Content Time to create initial panel: 0.25 Troubleshoot: 0.75 Total time so far: 5.75
  • 9. Front Page Panels Different pages for Anonymous & Authenticated Users global $user; if ($user->uid) { drupal_goto('panel'); } Time: 0.75 Total: 6.5
  • 10. Configure  jQuery  Media
  • 11. Time: 0.25 Total: 6.75
  • 12. 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
  • 13. Create Flags Time: 0.5 Total: 8.25
  • 14. Create Video Views Promoted Block & Page; Featured Block & Page
  • 15. (Pause for Live Demo) Views 2 Needs to be Seen! Time: 0.5 Total: 8.75
  • 16. Create Node Panel (Take 2) Time: 0.5 Total: 9.25
  • 17. Debug PHP Errors w/ Node Panel Time: 2 Total: 10.75
  • 18. Create New Logo! (and fav.ico too!) Time: 2 Total: 12.75
  • 19. 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
  • 20. 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
  • 21. Install Media Mover &  FFMPEG Wrapper Time: 0.25 Total: 17
  • 22. OK, I lied... Install Media Mover &  FFMPEG Wrapper Time: 6.25 Total: 23
  • 23. Watch FiveStar Video Tutorial http://www.lullabot. com/videocast/building-views-fivestar- and-votingapi Time: 0.25 Total: 23.25
  • 24. Add FiveStar to Views Time: 0.5 Total: 23.75
  • 25. Roll back Five Star from v.Dev (Bleeding edge and all that...) Time: 0.25 Total: 24
  • 26. Create Taxonomy View Time: 0.25 Total: 24.25
  • 27. 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
  • 28. Add Primary Menu & Play with CSS Time: 2 Total: 26.75
  • 29. 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
  • 30. Make 'Playing Now' Cycler Work time: 0.5 (And Blog about it!) Blog time: 1 Total so far: 28.75
  • 31. QuickList Flag & Views Time: 2 Total: 30.75
  • 32. 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
  • 33. User videos at my/videos Time: 1 Total: 33.75
  • 34. 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
  • 35. Create Top & Footer Menus Time: 0.25 Total: 34.25
  • 36. 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
  • 37. Advanced Forum Configuration Time: 1 Total: 35.75
  • 38. Add View Block w/ Forum Listings Time: 0.5 Total: 36.25
  • 39. YouTube Redesign! Yay! Time: 0.5 Total: 36.75
  • 40. Troubleshoot Media Mover Time: 4 Total: 40.25
  • 41. 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
  • 42. 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
  • 43. jQuery Media Debug Session Random bug-hunting... Time: 0.5 Total: 43.75
  • 44. Media Mover Woes Finally, a live demo! Time: 3.25 Total: 47
  • 45. jQuery UI for Tabs (Fun!) Time: 1.5 Total: 48.5
  • 46. 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
  • 47. Create Slide Show Presentation Click to add content... ;) Time: 4 Total: 53.5
  • 48. Celebrate! Total Time: 53.5 hours (plus this presentation)
  • 49. 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  
  • 50. 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
  • 51. YouTube in Drupal Presented by Aaron Winborn http://aaronwinborn.com/