StudioPress Community Forums - Video and Image Thumbnails On Same Page

StudioPress Community Forums (http://www.studiopress.com/support/index.php)

- General Discussion (http://www.studiopress.com/support/forumdisplay.php?f=7)

- - Video and Image Thumbnails On Same Page (http://www.studiopress.com/support/showthread.php?t=24290)

Video and Image Thumbnails On Same Page

Hello,

after searching and reading the forum still didn't find a solution.
I have two kinds of posts - illustrated by images and by embedded videos.
There is no problem with having image thumbnail appear on the home page.
There is an option in Tubular theme to display video thumbnails as well.
Can we have both images and videos thumbs on same page? Is it and how it is possible? (Creating a screenshot of a video as thumbnail is not an option I'm looking for)

Maybe not Agent, but other theme?

Thank you.
http://s13.radikal.ru/i186/1003/86/755de5772862.jpg

You should have something like this on your home.php file:

PHP Code:


		
			
<?php if( get_post_meta($post->ID, "thumb", true) ): ?>
                <a href="<?php the_permalink() ?>" rel="bookmark"><img class="thumb" src="<?php bloginfo('template_directory'); ?>/tools/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&amp;h=<?php echo get_theme_mod('featured_top_left_thumb_height'); ?>&amp;w=<?php echo get_theme_mod('featured_top_left_thumb_width'); ?>&amp;zc=1" alt="<?php the_title(); ?>" /></a>    
                <?php else: ?>                <?php endif; ?>

Swap that with this, then use video instead of thumb (use the entire video embed code for the thumbnail)

PHP Code:


		
			
<?php if( get_post_meta($post->ID, "thumb", true) ): ?>
                <a href="<?php the_permalink() ?>" rel="bookmark"><img class="thumb" src="<?php bloginfo('template_directory'); ?>/tools/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&amp;h=<?php echo get_theme_mod('featured_top_left_thumb_height'); ?>&amp;w=<?php echo get_theme_mod('featured_top_left_thumb_width'); ?>&amp;zc=1" alt="<?php the_title(); ?>" /></a>    
                <?php else: ?>                <?php endif; ?>                <?php if( get_post_meta($post->ID, "video", true) ): ?>
                <a href="<?php the_permalink() ?>"  rel="bookmark"><?php  echo get_post_meta($post->ID, "video", $single = true);  ?></a>    
                <?php else: ?>                <?php endif;  ?>

Remember, insert the entire <embed> code for the video

Thank you. It's a half of road.
The code works, but you need manually resize <embed> code in "video" custom field (otherwise it shows full size of video). Also you need to add styling like float and margins inside the <embed> code.
I tried to add this into *.css file, but didn't work.

.video {
float:left;
margin: 0px 10px 5px 0px !important;
padding: 2px !important;
border: 1px solid #DDDDDD !important;
}

Here is like it looks now:

http://s42.radikal.ru/i096/1003/8a/1f85dbe12f85.jpg

can you PM me a link to your site?

Try adding this to your CSS:

Code:

#homepagebottom embed,  #homepagebottom object {

height:110px;

margin:0;

padding:0;

width:200px;





}

I've slightly changed proposed CSS code and it does work like magic:

Code:

#homepagebottom embed,  #homepagebottom object {

height:110px;

float: left;

margin: 0px 10px 0px 0px;

padding:0;

width:200px;

Jon, thank you very much. It deserves to be put into tutorial.