Where can I find some instructions on 'how to embed video in Views slideshow ddblock'?

Thanks,
Minna

Files: 
CommentFileSizeAuthor
#5 debugging lines.JPG119.96 KBMinna
#5 views settings.JPG59.56 KBMinna

Comments

ppblaauw’s picture

Status: Active » Postponed (maintainer needs more info)

Did not try the views_slideshow_ddblock version 2.x yet with the embedded media field.
What did you try and what doesn't work?

Minna’s picture

I am using views_slideshow_ddblock version 2.x.dev. Then I installed emfield 6.x-1.24, enabled the embedded media field and embedded video field in Modules, set permissions. But now I don't know what to do.

The url is http://cch.diosav.org . Am trying to add three videos similar to the slideshow at http://themes.myalbums.biz/content/embedded-content-example.

Thanks again.

Minna’s picture

I've added a field to the content type called field_ddblock_if_video_url. I also added Content: field_ddblock_if_video_url to the Views Fields. When I create the node, I am able to enter the Embedded Video URL and the video displays in the node. How do I get the video to display in the slideshow. I'm guessing I need to add a preprocess function to the template.php? But this is where my skills stop. If you could assist that would be great.

Minna

Minna’s picture

Status: Postponed (maintainer needs more info) » Active
Minna’s picture

FileSize
59.56 KB
119.96 KB

Attached are images of my Views settings, debugging lines and below is the Views Query:

SELECT node.nid AS nid,
node.title AS node_title,
node_data_field_ddblock_if_image.field_ddblock_if_image_fid AS node_data_field_ddblock_if_image_field_ddblock_if_image_fid,
node_data_field_ddblock_if_image.field_ddblock_if_image_list AS node_data_field_ddblock_if_image_field_ddblock_if_image_list,
node_data_field_ddblock_if_image.field_ddblock_if_image_data AS node_data_field_ddblock_if_image_field_ddblock_if_image_data,
node.type AS node_type,
node.vid AS node_vid,
node_data_field_ddblock_if_image.field_ddblock_if_slide_text_value AS node_data_field_ddblock_if_image_field_ddblock_if_slide_text_value,
node_data_field_ddblock_if_image.field_ddblock_if_slide_text_format AS node_data_field_ddblock_if_image_field_ddblock_if_slide_text_format,
node_data_field_ddblock_if_image.field_ddblock_if_video_url_embed AS node_data_field_ddblock_if_image_field_ddblock_if_video_url_embed,
node_data_field_ddblock_if_image.field_ddblock_if_video_url_value AS node_data_field_ddblock_if_image_field_ddblock_if_video_url_value,
node_data_field_ddblock_if_image.field_ddblock_if_video_url_provider AS node_data_field_ddblock_if_image_field_ddblock_if_video_url_provider,
node_data_field_ddblock_if_image.field_ddblock_if_video_url_data AS node_data_field_ddblock_if_image_field_ddblock_if_video_url_data,
node_data_field_ddblock_if_image.field_ddblock_if_video_url_version AS node_data_field_ddblock_if_image_field_ddblock_if_video_url_version,
node_data_field_ddblock_if_image.field_ddblock_if_video_url_duration AS node_data_field_ddblock_if_image_field_ddblock_if_video_url_duration,
node_data_field_ddblock_if_image.field_ddblock_if_pager_item_text_value AS node_data_field_ddblock_if_image_field_ddblock_if_pager_item_text_value
FROM node node
LEFT JOIN content_type_ddblock_image_field_example_item node_data_field_ddblock_if_image ON node.vid = node_data_field_ddblock_if_image.vid
WHERE (node.status <> 0) AND (node.type in ('ddblock_image_field_example_item'))

ppblaauw’s picture

Status: Active » Postponed (maintainer needs more info)

Have been away for three days.

You would need to map the embedded media field (source field from the view) to the slide_image (target in slideshow theme)

Instead of an image from the image_field module the embedded media field should be shown.

Will try this also on my install later and let you know

Hope this help you further, please let me know

Minna’s picture

Status: Postponed (maintainer needs more info) » Active

No problem.

I tried your suggestion.
I mapped the embedded media field (Embedded video url - video_video) to the slide_image (target).
No embedded media field display in the slide. It only removed the images in other slides.

Thanks for your help.

ppblaauw’s picture

Status: Active » Postponed (maintainer needs more info)

Tried the functionality on my test server and it works, although have chosen a little bit different approach, so both images and videos can be used in the slideshow.

Steps:

  1. Added the embedded media field to the content type
  2. Added the embedded media field to the view
  3. Edit a node of the slideshow (delete the image, add a video)
  4. Added a new target slide_video and mapped this to the embedded media field
  5. Edit the content theme file: views-slideshow-ddblock-cycle-block-content-vsd-upright-50p.tpl.php
    changed
    print $slider_item['slide_image'];
    to
    print $slider_item['slide_image'];print $slider_item['slide_video'];

This way an image will show up in the slideshow when an image is defined in the node and a video will show up when a video is defined in the node.

Hope this helps you further, please let me know.

Minna’s picture

Status: Postponed (maintainer needs more info) » Active

Thanks for quick response. I tried the following but no display of video in the slideshow block.

1. Added to content type (ddblock image field example item):
field (field_ddblock_if_embedded_video),
type (Embedded video),
provider (YouTube)

2.Added to View ddblock_if_example_slideshows:
field (Content: Video),
format (Full Size Video)

3. Added a video embed code to a node. deleted the image.

4. In ddblock_if_example_slideshows View:
selected style: settings
added a target (slide_video) with the source (Content:Video (field_ddblock_if_embedded_video)
saved the view changes

Debugging lines are:

    * Pager Settings => array (
        'delta' => 'ddblock_if_example_slideshows_default',
        'debug_info' => 'drupal',
        'output_type' => 'view_fields',
        'pager' => 'custom-pager',
        'pager_container' => '.custom-pager-item',
        'pager_event' => 'click',
        'pager_position' => 'left',
        'pager2' => 1,
        'pager2_position' => 
        array (
          'slide' => 'slide',
          'pager' => 0,
        ),
        'pager2_pager_prev' => 'prev',
        'pager2_pager_next' => 'next',
        'pager2_slide_prev' => '',
        'pager2_slide_next' => '',
        'template' => 'default',
        'view_name' => 'ddblock_if_example_slideshows',
        'view_display_id' => 'default',
        'nr_of_items' => 4,
      )

    *     Number of pager items  => 4

    *     View - name => 'ddblock_if_example_slideshows'

    *     View - display_Id => 'default'

    *     Number of slides => 4

    *   Content first slide => array (
        'node_id' => '15',
        'slide_title' => '&quot;Epic&quot; Commercial',
        'slide_image' => '',
        'pager_image' => '',
        'slide_video' => '<div class="emvideo emvideo-video emvideo-youtube"><div class="emfield-emvideo emfield-emvideo-youtube">        <div id="emvideo-youtube-flash-wrapper-1"><object type="application/x-shockwave-flash" height="350" width="425" data="http://www.youtube.com/v/Vs6qZd_xP1w&amp;rel=0&amp;hd=1&amp;showinfo=0&amp;enablejsapi=1&amp;playerapiid=ytplayer&amp;fs=1" id="emvideo-youtube-flash-1">
                <param name="movie" value="http://www.youtube.com/v/Vs6qZd_xP1w&amp;rel=0&amp;hd=1&amp;showinfo=0&amp;enablejsapi=1&amp;playerapiid=ytplayer&amp;fs=1" />
                <param name="allowScriptAccess" value="sameDomain"/>
                <param name="quality" value="best"/>
                <param name="allowFullScreen" value="true"/>
                <param name="bgcolor" value="#FFFFFF"/>
                <param name="scale" value="noScale"/>
                <param name="salign" value="TL"/>
                <param name="FlashVars" value="playerMode=embedded" />
                <param name="wmode" value="transparent" />
              </object></div></div></div>',
        'slide_text' => '<p><br /></p>',
        'pager_text' => '',
        'slide_read_more' => '<a href="/node/15">Read more...</a>',
      )

5. In views-slideshow-ddblock-cycle-block-content-vsd-highlight-50l-B.tpl.php
edited <?php print $slider_item['slide_image']; ?> to
<?php print $slider_item['slide_image'];print $slider_item['slide_video']; ?>

This is the source code for the node with a video:

<div class="field field-type-emvideo field-field-ddblock-if-embedded-video">
    <div class="field-items">
            <div class="field-item odd">
                    <div class="emvideo emvideo-video emvideo-youtube"><div class="emfield-emvideo emfield-emvideo-youtube">        <div id="emvideo-youtube-flash-wrapper-1"><object type="application/x-shockwave-flash" height="350" width="425" data="http://www.youtube.com/v/Vs6qZd_xP1w&amp;rel=0&amp;hd=1&amp;showinfo=0&amp;enablejsapi=1&amp;playerapiid=ytplayer&amp;fs=1" id="emvideo-youtube-flash-1">
          <param name="movie" value="http://www.youtube.com/v/Vs6qZd_xP1w&amp;rel=0&amp;hd=1&amp;showinfo=0&amp;enablejsapi=1&amp;playerapiid=ytplayer&amp;fs=1" />
          <param name="allowScriptAccess" value="sameDomain"/>
          <param name="quality" value="best"/>

          <param name="allowFullScreen" value="true"/>
          <param name="bgcolor" value="#FFFFFF"/>
          <param name="scale" value="noScale"/>
          <param name="salign" value="TL"/>
          <param name="FlashVars" value="playerMode=embedded" />
          <param name="wmode" value="transparent" />
        </object></div></div></div>        </div>
        </div>

This is the source code for the slides (note - nothing in the first slide):

<!-- dynamic display block slideshow -->

<div id="views-slideshow-ddblock-ddblock_if_example_slideshows_block_5" class="views-slideshow-ddblock-cycle-vsd-highlight-50l-B clear-block">
 <div class="container clear-block border">
  <div class="container-inner clear-block border">
       <!-- custom pager images --> 
    <!-- prev/next pager on slide -->

<div id="views-slideshow-ddblock-custom-pager-ddblock_if_example_slideshows_block_5" class="custom-pager custom-pager-right clear-block border">
 <div class="custom-pager-inner clear-block border">
            <div class="custom-pager-item custom-pager-item-0 active-pager-item">
     <div class="custom-pager-item-inner"> 
      <a href="#" title="navigate to topic" class="pager-link activeSlide"><span class="custom-pager-item-text"></span></a>

     </div>
    </div> <!-- /custom-pager-item -->
                <div class="spacer-horizontal"><b></b></div>
       
       <div class="custom-pager-item custom-pager-item-1">
     <div class="custom-pager-item-inner"> 
      <a href="#" title="navigate to topic" class="pager-link"><img class="imagefield imagefield-field_ddblock_if_image" alt="" src="http://cch.diosav.org/sites/default/files/slide1_1.png?1280375852" width="320" height="240"><span class="custom-pager-item-text"></span></a>
     </div>
    </div> <!-- /custom-pager-item -->

                <div class="spacer-horizontal"><b></b></div>
       
       <div class="custom-pager-item custom-pager-item-2">
     <div class="custom-pager-item-inner"> 
      <a href="#" title="navigate to topic" class="pager-link"><img class="imagefield imagefield-field_ddblock_if_image" alt="" src="http://cch.diosav.org/sites/default/files/slide1_2.png?1280375852" width="320" height="240"><span class="custom-pager-item-text"></span></a>
     </div>
    </div> 

Something is not set properly in the View. but I cant figure out the problem.

Thanks again

Minna’s picture

I got it working. I am using a custom template upright 50l and I had overridden some settings for upright50 view. so I reset to default setting and reapplied my settings in upright50. The video displays now.

How do I make the video custom thumbnail display in the pager_image?

Thanks again.

ppblaauw’s picture

You can use the same approach as with the video itself, so both images and video-thumbnails can be used in the slideshow.

Steps:

  1. Add the embedded media field (again) to the view (but now format image thumbnail)
  2. Add a new target pager_video_thumbnail and map this to the embedded media field thumbnail
  3. Edit the pager-content theme file: views-slideshow-ddblock-cycle-pager-content-vsd-upright-50p.tpl.php
    and change
    print $slider_item['pager_image'];
    to
    print $pager_item['pager_image'];print $pager_item['pager_video_thumbnail'];

This way an image will show up in the slideshow when an image is defined in the node and a video_thumbnail will show up when a video_thumbnail is defined in the node.

Hope this helps you further, please let me know.

Minna’s picture

Everything is working great in Firefox but not in IE8. For some reason the template_size css is not being applied in IE8. I have a workaround for now, I added the template_size css code to views-slideshow-ddblock-cycle-vsd-highlight-50l-B.css.

I have another slideshow with just the images (no the embedded video) same exact setup that displays perfectly in Firefox and IE8.

Minna

ppblaauw’s picture

Status: Active » Postponed (maintainer needs more info)

Maybe your IE issue is that IE does only support 32 CSS stylesheets. The ddblock stylesheet is one of the last stylesheets added and could be ignored by IE when you have more then 32 CSS Stylesheets.

Enabling CSS optimalization at Administer > Site configuration > Performance will give you a solution for this issue. This is what you would do when your Drupal site is in production anyway.

The Internet site is offline, so could not check if this is the case.

Hope this helps you further, please let me know.

Minna’s picture

Status: Postponed (maintainer needs more info) » Active

CSS optimization solved the IE issue. I sincerely thank you for your help. Once my sites are complete, I will add them the sites using ddblock page.

Minna

ppblaauw’s picture

Title: How to embed video in Views slideshow ddblock » How to embed video in Views slideshow ddblock (fixed)
Status: Active » Fixed

Thanks
set status to fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.