Podcast including video

[Kim Hannan]

Bill:

The demo of Epic includes an image at the very top of the posting section. I would like to duplicate this look but with the video from our Vimeo page in that location.

How may we go about doing this?

Thanks much…love your work and your support,

Kim Hannan

[Bill Robbins]

Kim,

Great question. The large image at the top is actually just the featured image of the most recent message. The podcast archive uses a page template to add it to the site.

Do you want to have a video that stays at the top while the podcast episodes below it change or would you rather swap out the video with each new message?

Just let me know and we’ll go from there,
Bill

[Kim Hannan]

The concept would be the most recent podcast would be featured at the top, with the video embedded into the top of the page where your feature image is. Then the rest of the podcasts populate below from most recent back…

Thanks

[Bill Robbins]

We can do that…it’ll just take a bit of editing. Here’s what to do:

1. We’ll need to install a plugin in order to edit one of the files. Go to the Plugins section and select Add New. Search for the “WP Editor” plugin and install/activate it.
2. Go to the Appearance section and select Theme Editor.
3. From the list of files on your right, choose archive-podcast.php and look for this spot (line 18):

   
   <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_post_thumbnail('primary', array('class' => 'shadow')); ?></a>
   

4. Replace that with this:

   and save your changes.

5. Next edit single-podcast.php and find this spot near the top:

   
   <?php the_post_thumbnail('podcast-single', array('class' => 'shadow')); ?>
   

6. Replace that with this:

   and save your changes.

7. Next open up the “includes” folder on your right, and also the “custom-meta-boxes” folder. Inside that folder, edit the epic-meta-boxes.php file and look for this section:

   
   	$meta_boxes[] = array(
   		'id'         => 'video_metabox',
   		'title'      => 'Video Code',
   		'pages'      => array( 'page','post', ), // Post type
   		'context'    => 'side',
   		'priority'   => 'high',
   		'show_names' => false, // Show field names on the left
   		'fields'     => array(
   			array(
   				'name' => __( 'Embed Code', 'organizedthemes' ),
   				'desc' => __( 'Paste your video embed code here.', 'organizedthemes' ),
   				'id'   => 'video_embed',
   				'type' => 'textarea_code',
   			),
   		),
   	);
   

   and replace it with this:

   
   	$meta_boxes[] = array(
   		'id'         => 'video_metabox',
   		'title'      => 'Video Code',
   		'pages'      => array( 'page','post', 'podcast', ), // Post type
   		'context'    => 'side',
   		'priority'   => 'high',
   		'show_names' => false, // Show field names on the left
   		'fields'     => array(
   			array(
   				'name' => __( 'Embed Code', 'organizedthemes' ),
   				'desc' => __( 'Paste your video embed code here.', 'organizedthemes' ),
   				'id'   => 'video_embed',
   				'type' => 'textarea_code',
   			),
   		),
   	);
   

   and save your changes.

That should add in a box on your right when you’re creating a podcast where you can place the embed code for your video. Just paste it there and it will be displayed at the top of your archive and also on the single view. You can still have a featured image which will be displayed beside the older podcasts in the archive.

Have fun.

[Kim Hannan]

Great….this gave me the standard WP video embed box needed….Thanks.

BUT…I no longer have the fields you already built into the page, including the audio file link (for those who want the mp3 version) and sermon notes.

Looks like I need a bit of tweaking done to the styling.

Thx, KH

[Bill Robbins]

Kim,

Hmmm. It shouldn’t have taken out the audio and notes box. Here’s the complete code for the epic-meta-boxes.php file. Try replacing all the code in the file and see if that helps.

[Kim Hannan]

That did it! Thanks much.

[Kim Hannan]

Bill:

Spent some time working on the various albums’ pages and have them ready and launched. We launched a new “podcast” page featuring these albums yesterday. The albums are working great, but I suddenly have a problem with the main page that I don’t recall having when we first set this up.

The featured video at the top of the main page is now full-sized and sitting in the place of the header rather than where it sat before (to the best of my recall) which was within the body of the page, and was about 600 px wide.

Can you take a look, please? http://www.vbcmilton.org/podcasts/

Thx, KH

[Bill Robbins]

Kim,

You can move it down if you’d like to. Use this snippet to change this page only:

.page-id-751 .video {
	margin-top: 40px;
}

Let me know if you have any trouble,
Bill

[Kim Hannan]

That worked flawlessly, thanks.

To optimize this page, I would like to reduce the size of the video so that there is room for a sidebar at the top.

Is that workable?

Thx, KH

[Bill Robbins]

Kim,

You could do that though there isn’t anything built into the theme to provide content for that area. If it’s only on that one page, what you could do is create a template for that page only. Just duplicate the page-full.php file and rename it page-751.php. You can then take out the template name from the top of the file.

That page on your site will now just use this file. It’s a good way to handle pages with a unique layout that won’t be duplicated across the site (unlike a template that might be used multiple times).

Once you’ve done that, you would probably want to place this:

<?php get_template_part( 'includes/post-formats' ); ?>

in it’s own

and then create another div next to it for your sidebar content.

After that, you would need a bit of styling to float the video to the left and your sidebar to the right.

If you have any trouble, let me know,
Bill

[Author]

Posts