How to make advanced slideshow with embedded video from 3rd party sites.

Important notes:

  • This tutorial page assumes that you already have enough knowledge and information on how to create Advanced dynamic display block slideshow for Drupal 6.
  • This page assumes you want to make a slideshow like the Embedded content slideshow example working in our themes site.
  • Make sure that you have already installed the required modules for the Advanced dynamic display block slideshow and have a ddblock advanced slideshow working.
  • For more detailed instructions on how to install and enable the required modules, see
  • Links refer to the existing tutorial on this site.

Installation additional emfield module

  1. Download the Embedded Media Field module at http://drupal.org/project/emfield
  2. Extract and copy these modules into the /sites/all/modules/ folder.

Enable Embedded Media Field

Path to enable Embedded Media Field:

  1. Go to Admin > Site building > Modules.
  2. Enable Embedded Media field and Embedded video field.
  3. Click Save configuration button.


Create content type
There are two ways you can create the content type for the slideshow with embedded videos.

  • Import the predefined content type.
  • Create the content type manually.

Import Ddblock embedded video content type

  1. From the Download page, Download ddblock_embedded_video.zip, and extract the contents.
  2. Open dblock_embedded_video_content_type_export.txt and copy the content.
  3. Go to Administer > Content Management > Content Types > Import.
  4. Paste the copied file content into the "Import data" field.
  5. Leave the Content type field to: <create>.
  6. Click Import, and this will create the ddblock_embedded_video content type.

Important: You need to have CCK, imageapi, filefield and imagefield installed and enabled on your Drupal installation, otherwise the import will not be successful.

Alternatively, you can use the manual content type creation instructions that follow.

Detailed instruction on how to add a Ddblock embedded video content type manually

Path to create content:

  1. Go to Admin > Content management > Content types.

Create content type Ddblock embedded video

  1. Click Add content type button.
  2. Fill in the following text field.
    • Name - Ddblock embedded video
    • Type - ddblock_embedded_video
    • Description - Ddblock embedded video for the advanced dynamic display block slideshow.
  3. Click Save content type button at the buttom of the page.

Manage fields

Path to manage fields:

  1. Go to Admin > Content management > Content types.

Configure Manage fields

  1. Find Ddblock embedded video in your list of content types.
  2. Click manage field link.

Add field Custom pager text field

  1. Add Custom pager text field.
  2. Fill in the following:
    • Label - Custom pager text field
    • Field name - custom_pager_text
    • Type of data to store - Select Text
    • Form element to edit the data - Select Textfield
  3. Click Save button

Configure Custom pager text field

  1. Fill in the following:
    • Size of textfield - e.g (set to 30)
    • Help text - (optional) Used for the text of a custom pager.
    • Check Required checkbox
    • Leave the other default settings
  2. Click Save fields settings

Add Slider text field

  1. Fill in the following:
    • Label - Slider text field
    • Field name - slider_text
    • Type of data to store - Select Text
    • Form element to edit the data - Select Text area(multiple rows)
  2. Click Save button

Configure Slider text field

  1. Fill in the following:
    • Rows - e.g (set to 5)
    • Help text - (optional) Used for the text on a slider.
    • Check Required checkbox
    • Leave the other default settings
  2. Click Save fields settings

Note: Before adding a field for the embedded video, you need to configure embedded media field first.

Path to Embedded Media Field:

  1. Go to Admin > Content management > Embedded Media Field Configuration

Configure Embedded Media Field

  1. Find Embedded Video Field at the buttom of the page.
  2. Click Embedded Video Field.
  3. Click Providers fieldset.
  4. Select the type of providers you want to embed video and configure the provider settings.
  5. Click Save configuration button.

Add Embedded video url field

  1. Go to Admin > Content types > Ddblock embedded video.
  2. Click manage field link.
  3. Fill in the following:
    • Label - Embedded video url
    • Field name - embedded_video_url
    • Type of data to store - Select Embedded Video
    • Form element to edit the data - Select 3rd Party Video
  4. Click Save button

Configure Embedded video url field

  1. Under Providers Supported fieldset, check e.g (Youtube) checkbox.
  2. Leave other default settings.
  3. Click Save fields settings.

Arrange fields

  1. Drag and drop the fields into their orders:
    • Title
    • Custom pager text
    • Slider text
    • Embedded video url
    • Body
  2. Click Save button

Display fields

  1. Click Display fields button at the right of Manage fields button.
  2. Set the following:
    1. Custom pager text
      • Label -- Hidden
      • Teaser -- Default
      • Exclude -- Uncheck
      • Full node -- Hidden
    2. Slider text
      • Label -- Hidden
      • Teaser -- Default
      • Exclude -- Uncheck
      • Full node -- Hidden
    3. Embedded video url
      • Label -- Hidden
      • Teaser -- Image thumbnail
      • Exclude -- Uncheck
      • Full node -- Full Size Video
  3. Click Save button.

Create a node to provide content for the slideshow

Note: You have to create more than one node to make the slideshow work (e. g 6 nodes).

Path to create a node Ddblock embedded video:

  1. Go to Admin > Create content > Ddblock Embedded video

Create a node for ddblock embedded video

  1. Fill in the following fields:
    • Title - Used for the title of a slide and the title of the full node view.
    • Custom pager text - Used for the text of a custom pager item.
    • Slider text - Used for the text on a slider/slide.
    • Embedded video url: - the embedded video code from the provider like youtube.
    • Note: You need to change the embed code weight and height the same width and height for the slider image. This depends the height and the width of the image from the css of the upright free themes.

    • Body - Used for the text of the full node view.
  2. Click Save button.


Create a view
There are two ways you can create the view for the slideshow with embedded videos.

  • Import the predefined view.
  • Create the view manually.

Import ddblock_embedded_video view

  1. From the Download page , Download ddblock_embedded_video_export.zip, and extract the contents.
  2. Open dblock_embedded_video_views_export.txt and copy the content.
  3. Go to Administer > Site Building > Views > Import.
  4. Paste the copied file content into the "Past View Code here" field.
  5. Leave the View Name blank.
  6. Click Import, and this will create the ddblock_embedded_video view.
  7. Click Save to save the view.

Alternatively, you can use the manual view creation instructions that follow.

Detailed instruction on how to Create ddblock_embedded_video views block manually

Path to add Ddblock embedded video view page:

  1. Navigate to Administer > Site building > Views.
  2. Click the Add tab button at the top of the page.

Create Ddblock embedded video views block:

  1. Fill in the form fields.
    • View name - ddblock_embedded_video
    • View description - Embedded video used for a Dynamic display block slideshow.
    • View tag - embedded video
    • View type - choose Node
  2. Click Next button.

Have a look at this overview of the Views setting page to give you idea of how the screenshots looks like.

Configure ddblock_embedded_video

Add block views

  1. Select Block as display type in the select box at the left side of the page.
  2. Click Add display button.

Views Basic setting

  1. Click Name: Block link in the Basic settings fieldset.
  2. Fill in ddblock embedded video .
  3. Click Item to display - e.g (6) here you can set the number of slide from the node ddblock embedded video to cycle.
  4. Click Update button.

Views Block settings

  1. Click Admin:Block link in the Block settings fieldset.
  2. Fill in ddblock embedded video .
  3. Click Update button.

Views Fields

  1. Click the + sign button next to Fields setting.
  2. Select Node in the Groups select box.
  3. Select the following:
    • Node: Title
    • Node: Body (optional, only if you add text for your body when you create a node for the ddblock embedded video).
  4. Click Update button.
  5. Leave the default settings for configuring the Node: Title and Node: Body.
  6. Click Update default display button.
  7. Click the + sign button.
  8. Select Content in the Groups select box.
  9. Select the following:
    • Content: Custom pager text (field_custom_pager_text)
    • Content: Slider text (field_slider_text)
    • Content: Embedded video url (field_embedded_video_url)
  10. Click Add button.
  11. Fill in the Defaults: Configure field content: Custom pager text (field_custom_pager_text)settings.
    • Label: -- in the checkboxes choose Widget label (Pager item text)
    • Format: -- select Plain text
    • Leave the other default settings
  12. Click Update button.
  13. Fill in the Defaults: Configure field Content: Slider text (field_slider_text) settings.
    • Label: -- in the checkboxes choose Widget label (Slide text)
    • Format : -- select Plain text
    • Leave the other default settings
  14. Click Update button.
  15. Fill in the Defaults: Configure field Content: Embedded video url (field_embedded_video_url) setting.
    • Label: -- in the checkboxes choose Widget label (Embedded video url)
    • Format: -- select Full Size Video
    • Leave the other default settings
  16. Click Update button.

Note: Click Save button for now to save the settings you have made.

Arrange fields

  1. Click the arrow sign button in the Fields setting next to + sign button.
  2. Drag and drop the fields into their orders:
    • Node: Title
    • Content: Custom pager text (field_custom_pager_text)
    • Content: Slider text (field_slider_text)
    • Content: Embedded video url (field_embedded_video_url)
    • Node: Body Body
  3. Click Update button.

Views Sort criteria

  1. Click plus sign button next to Sort Criteria fieldset.
  2. Select Node under Group select box option.
  3. Choose Node: Post date.
  4. Click Add button.
  5. Leave the Default: Configure sort criterion Node: Post date settings.
  6. Click Update button.

Views Filter

  1. Click + sign button next to Filters.
  2. Select Node under Group.
  3. Choose the following:
    • Node: Published
    • Node: Type
  4. Click Add button.
  5. Under Default: Configure filter Node: Published check Published/check Published checkbox to Yes.
  6. Click Update button.
  7. Set the following under Default: Configure filter Node: Type.
    • Operator - Is one of
    • Node type - check Ddblock embedded video
  8. Click Update button.

Note: Click Save button to be ready for the block instance of the ddblock_embedded_video for advanced Dynamic display block slideshow.

Create and configure instance

Before you create a dynamic display block instance you have to enable the Ddblock embedded video content type and the ddblock_embedded_video view for the Dynamic display block module. You do this on the settings page of the Dynamic display block module.

Path to dynamic display block settings page:

  1. Navigate to Administer > Site configuration > Dynamic display block.
  2. Click Settings tab.
  3. Enable Ddblock embedded video content type and Ddblock embedded video view

    1. Select the checkbox next to: Ddblock embedded video under Content types.
    2. Select the checkbox next to: views - ddblock embedded video.
    3. Click Save configuration button


    Create Dynamic display block instance of the Ddblock embedded video view

    Path to dynamic display block instance page:

    1. Navigate to Administer > Site configuration > Dynamic display block.
    2. Click Instance tab.

    Create instance

    1. Type a unique instance title e.g (Embedded content slideshow example) in the Instance title textfield.
    2. Select views - ddblock embedded video in the Block type select box field.
    3. Click Add Instance button.

    Configure the block - Embedded content slideshow example

    Path to Dynamic display block configuration page:

    1. Navigate to Administer > Site configuration > Dynamic display block in the admin menu.
    2. Find Embedded content slideshow example in the list of your block instance.
    3. Click Configure block link.

    Follow the detailed instruction on how to Create and configure instance page, only starts from Note: There are two options to configure a block instance.


    Install Dynamic display block themes
    Follow the detailed instruction of the
    Dynamic display block theme page.


    Add Preprocess functions

    Follow the detailed instruction of the Preprocess functions page.

    Note:

    1. Download the preprocess function and export file for the ddblock embedded video slideshow at the Download page.
    2. The preprocess function at template.php.txt file is already in the package of the ddblock_embedded_video_export.zip file.

    Important: If you already have an advanced slideshow working add an if statement in the preprocess function for the ddblock_embedded_video view in your template.php file.


    Display advanced Dynamic display block slideshow

    Follow the detailed instruction on how to display advanced Ddblock embedded video in the block region/page at the Dynamic display block slideshow page.

    Note: In the how to display Dynamic display block slideshow tutorial page, you need to read Embedded content slideshow example instead of ddblock-News item slideshow.

Comments

RE:

We can be shown that thing more without trouble and there are some different things which we will discuss in it and through those, we can adjust the genuine measure of structure and there are some primary components do my assignment for me which will be mystery in it and they have demonstrated a ton of new aptitudes and strategies which are leaving to help us in the prospect and I may recommend them to make various more recordings like this which can be more useful for us.

Instructions omission

I ran into trouble following the instructions:


Create a view

Import ddblock_embedded_video views block

Download ddblock_embedded_video views export file from the package ddblock_embedded_video_export.zip at the Download page :

It would have been helpful to have had something more like this:

Create a View

From the Download(link) page, Download ddblock_embedded_video_export.zip, and extract the contents. Open dblock_embedded_video.txt and copy the contents. Now go to Administer > Site Building > Views, and click the Import tab. Leave the View Name blank, and paste the copied file content into the "Past View Code here" field. Click Import, and this will create the ddblock_embedded_video view.

Alternatively, you can use the manual view creation instructions that follow.

Also, a bit of attention to formatting this instruction page so that the manual instructions are clearly a subset of the main instruction flow would be helpful.

I appreciate all the work that's gone into this and if there's any way I could make these changes myself I'd be pleased to do so.

Re: Instructions omission

Thanks for the suggestions for the documentation!!!

I made the improvements in the documentation.
Also for the content type import.

Didn't display vimeo video in the block

I added youtube videos and the vimeo videos to my block youtube thumbnail work fine but vimeo video thumbnail is not showing in the page and the contain. please help I'm using following code in template.php

if (isset($data['thumbnail']['url'])) {
            $slider_items[$key1]['slide_image'] = '<img src="' .$data['thumbnail']['url'] . 
                '" alt="' . $result->node_data_field_custom_pager_text_field_custom_pager_text_va . 
                '"/>';
          }

Thanks in advance

Re: Didn't display vimeo video in the block

To add vimeo thumbnail to the slideshow I use the following code:

            // add vimeo video thumbnail
            if ($result->node_data_field_custom_pager_text_field_embedded_video_url_provider == 'vimeo') {
              if (isset($result->node_data_field_custom_pager_text_field_embedded_video_url_data)) {
                $data=unserialize($result->node_data_field_custom_pager_text_field_embedded_video_url_data);
                if (isset($data['emthumb']['filepath'])) {
                  $slider_items[$key1]['slide_image'] = '<img src="' .$data['emthumb']['filepath'] .
                      '" alt="' . check_plain($result->node_data_field_custom_pager_text_field_custom_pager_text_value) .
                      '"/>';
                }
              }
            }

You would need to change the actual fields to the fieldnames used in your content type.

Hope this helps you further, please let me know

Embedded Video Playback

Thanks for the great module!

I have followed the tutorials and got the module working!, I just have a couple of questions. I have the embedded video content displaying in the ddblock. I would like it to be able start to playing the video when clicked as in your example. Instead the play video link takes you to the node page.

The advanced slideshow example shows a video with dolphins content. The slide has a play button that when played it starts to play the video without jumping to the node. How can I configure my setup to do the same?

My next question is regarding multiple advanced slide shows for different nodes. Since the pre-process function is tied to the the view name, does this mean that I have to create new functions for each view I create for each ddblock?

I appreciate your feedback.

Thanks.

I cannot make this work with

I cannot make this work with video embedded

This is the code I'm using:

my video field is: field_slideshow_video

if (isset($result->node_data_field_pager_item_text_field_slideshow_video_embed)) {
  $slider_items[$key1]['slide_image'] = $result->node_data_field_pager_item_text_field_slideshow_video_embed;
}

I also tried:

          if (isset($result->node_data_field_pager_item_text_field_slideshow_video_embed)) {
            $data=unserialize($result->node_data_field_pager_item_text_field_slideshow_video_embed);
            //print '<pre>';
            //print_r($data);
            //print '</pre>';
            $slider_items[$key1]['slide_image'] = $result->node_data_field_pager_item_text_field_slideshow_video_embed;
          }

and this one too:

          if (isset($result->node_data_field_slideshow_imagen_field_slideshow_video_embed )) {
            $data=unserialize($result->node_data_field_slideshow_imagen_field_slideshow_video_embed );
            //print '<pre>';
            //print_r($data);
            //print '</pre>';
            $slider_items[$key1]['slide_image'] = $result->node_data_field_slideshow_imagen_field_slideshow_video_embed ;
          }

with the first two I got nothing at all. Blank. with the last one I've got the link to youtube...

Yes, I'm flushing the cache and all of this goes in:

function thinkclear_preprocess_ddblock_cycle_block_content {
 
}

thinkclear is my theme name.

Thanks in advance

Play embedded video in ddblock slideshow

The code

if (isset($result->node_data_field_pager_item_text_field_youtube_video_embed)) {
              $slider_items[$key1]['slide_image'] = $result->node_data_field_pager_item_text_field_youtube_video_embed;
            }
assumes your ddblock_embedded_video content type definition has a field "youtube_video_embed" which mine does not even though I imported it from the download file provided. I had to modify the preprocess function to get it to work.

To embed the video and have it play in the ddblock slideshow:
1. Create/edit the ddblock embedded video content and for the "Embedded video url" specify the embedded object code instead of a link.
2. In your template.php file THEMENAME__preprocess_ddblock_cycle_block_content() function.. I added

$slider_items[$key1]['slide_image'] = ....
// check to see if the embedded video url contains embedded object code instead of a hyperlink
if (strtolower(substr($result->node_data_field_custom_pager_text_field_embedded_video_url_embed,0,8))=='<object ') {
  $obj_code = $result->node_data_field_custom_pager_text_field_embedded_video_url_embed;
  $obj_code = preg_replace('/ width\="\d+"/i', ' width="'.$vars['settings']['image_width'].'"', $obj_code);
  $obj_code = preg_replace('/ height\="\d+"/i', ' height="'.$vars['settings']['image_height'].'"', $obj_code);
  $slider_items[$key1]['slide_image'] = $obj_code;
}

Re: Play embedded video in ddblock slideshow

The reply order in this thread gets a little mixed up but in my answer I do assume you use the field: youtube_video_embed, which we use in our Embedded content example where the code is copied from.

The code we use is the same as you use, except that you add a check if the object code is used to give to the $slider_items[$key1]['slide_image'] variable.
Additionaly you change the width and height of the object code with the width and height setting in the configuration page of the ddblock module.

Both very useful additions to the code.

Thanks for posting

Do you have a link to the result?

Re: I cannot make this work

Please make an issue in the issue queue on drupal.org and attach the template.php file and the result of the drupal_set_message debug lines if you uncomment them in both preprocess functions, so I can help you better.

Thanks, I'll do that.

Thanks, I'll do that.

Re: Embedded Video Playback

Thank you for your interest in the dynamic display block module.

We did not make a tutorial howto do embed the video directly in the slideshow. Will make this tutorial in the future. The difference is in the preprocess functions.

Instead of showing the thumbnail of the youtube video like explained in the existing embedded video tutorial you would use the actual video embedded field itself like:

// add youtube video
if (isset($result->node_data_field_pager_item_text_field_youtube_video_embed)) {
$slider_items[$key1]['slide_image'] = $result->node_data_field_pager_item_text_field_youtube_video_embed;
}

You can add this after the:
// add slide_image variable
if statement

This way if a video is supplied that will be shown otherwise the image supplied. So you can also combine images and videos like we did in the example, combining embedded flickr images and embedded youtube videos.

Your other question:

There are several options to create multiple slideshows for different content.

1)

  • Create a content type for each type of content.
  • Create a view for each content type.
  • Create a ddblock instance for each view.
  • Create an if statement for each view.

Easy solution for a limited amount of content types (max 3, I would say)

Other solutions depends on what you want to accomplish.
Do your content types have different fields?
Do your content types share fields?
How flexible you need to be?

You can choose to use one view and create more block displays with this view to create the separate blocks to use with the dynamic display block module. e.g one for each content type (overriding filters).

Also a solution can be to use taxonomy terms and views arguments to select different content in the same dynamic display block. (needs a patch to the ddblock module to add views arguments functionality to the dynamic display block module).

I can not give a good answer without knowing the requirements. But there are several options besides option 1. It would be a customized solution for your site.

Hope this answers your questions even if I can not give a direct solution.

Great feedback

Thank you for the prompt feedback. Your comments were right on target and very helpful.

In regards to multiple ddblocks, option one would suffice as long as there are only a couple of blocks. It is a good starting point at this time. For the future, a patch to pass the view arguments would be nice. I will take a look at our application to see if we need to go in that direction.

Great module. I will let you know when we go live in about a month from now.

Thanks,
Sandro.

This doesnt work for me . i

This doesnt work for me . i followed the tutorial and did exactly . it just shows the thumbnail for the videos in the slideshow and i cant play these videos

how to make the video play in

how to make the video play in the slideshow without making it open in a different node. ?

Re: how to make the video play in

see:
http://ddblock.myalbums.biz/node/860#comment-290
http://ddblock.myalbums.biz/node/1786

Hope this helps you further, otherwise please make a support request in the issue queue of the module.

how to change theme

how to create thumbnail images below the main slide or a way to use a theme other than upright20?

Re: how to change theme

Please make an issue in the issue queue of the module.

even i dont get the

even i dont get the youtube_video field when i mport the file and i cannot use the above code cos emfield parses the embedded for the value when you submit the embedded code

I am having the same problem,

I am having the same problem, did anyone get this working? I am trying to get the embedded video to play directly in the display block. I tried putting the code snippet in template.php where the admin specified in their comment and changing the variable to node_data_field_custom_pager_text_field_embedded_video_url_embed with no luck. Any other ideas of why this isn't working for many users? Btw thanks for the module and this tutorial was also excellent.