WP Post-Thumbnail

Question

I've already saw the question some times here, but sadly nothing helped me out yet.

Right now I've got following code:

<h2 class="title_bar">Videos</h2>
<ul class="vlist">
<?php $args = array( 'numberposts' => 60, 'orderby' => 'rand' );
            $rand_posts = get_posts( $args );
            foreach( $rand_posts as $post ) : ?>

  <li class="video" id="video_<?php the_ID(); ?>">
 <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">

            <?php $thumb = tube_getcustomfield('wtp_thumb_url',get_the_ID()); if(!empty($thumb)) { ?>
                        <img src="<?php echo $thumb; ?>" alt="<?php the_title_attribute(); ?>" title="<?php the_title_attribute(); ?>" width="240p" height="180" class="thumb" /> <?php } else { ?>
                        <img src="<?php bloginfo('template_url') ?>/images/pic_post1.jpg" alt="<?php the_title_attribute(); ?>" title="<?php the_title_attribute(); ?>" class="thumb"/><?php } ?> 

 <i></i>
  <span class="box">
 <span class="views"><?php if(function_exists('the_views')) { the_views(); } ?></span>
 <span class="time"><?php echo time_ago(); ?></span>
 </span>

  <strong><?php short_title('...', '34'); ?></strong> </a>


 </li>
<?php endforeach; ?>

 </ul>

<div class="clear"></div>

I'm not sure what exactly I'm doing wrong, since "featured image" is active and I've also setted up my single.php file. Instead of the thumbnail the title is there 2x instead of the title + thumbnail etc. - Title + Thumbnail for a post would be my goal for now :)!

I would appreatiate it, if someone could take a look and tell me what I've done wrong or how to fix it :/

PS: I'm using the latest official version of WordPress.

Answer 1

So a few things...

the_title() gets the title, but it includes mark-up, so when you use that in the title attribute it actually prints the code out with mark-up around it, like <h1>The Title</h1> which then breaks out of the title="".

So the correct method for that would be:

<a href="<?php the_permalink() ?>" title="<?php echo get_the_title(); ?>">

That's why you're getting duplicate titles displaying.

For the rest, this should do it:

<?php
    $thumb = tube_getcustomfield( 'wtp_thumb_url', get_the_ID() );
    if( !empty( $thumb ) ) { :
        echo '<img src="' . $thumb . '" alt="' . get_the_title() . '" title="' . get_the_title() . '" width="240" height="180" class="thumb" />';
    else :
        //If parent theme use this:
        echo '<img src="' . get_template_directory_uri() . '/images/pic_post1.jpg" alt="' . get_the_title() . '" title="' . get_the_title() . '" class="thumb"/>';
        //If child theme use this:
        //echo '<img src="' . get_stylesheet_directory_uri() . '/images/pic_post1.jpg" alt="' . get_the_title() . '" title="' . get_the_title() . '" class="thumb"/>';
    endif;
 ?>

I'm not sure if you're using a parent or child theme so I included options for either, just change which echo line is included/uncommented.

I don't know what the tube_getcustomfield( 'wtp_thumb_url', get_the_ID() ) returns, so maybe try a var_dump right after that line to make sure it's a full path to the attached image:

var_dump( $thumb );

If it's not a path like http://domain.com/wp-content/uploads/the-image-you-attached.png then you'll need to address that as well.

Answer 2

I made some changes to the code and just made a small screenshot with example how it's looking right now and how I would like it to look like (on the right side).

Let's get to the code first, that's how it looks like right now:

    <h2 class="title_bar">Just Watched Videos</h2>
<ul class="vlist">
<?php $args = array( 'numberposts' => 12, 'orderby' => 'rand' );
            $rand_posts = get_posts( $args );
            foreach( $rand_posts as $post ) : ?>

  <li class="video" id="video_<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" title="<?php echo get_the_title(); ?>">

            <?php $thumb = tube_getcustomfield('wtp_thumb_url',get_the_ID()); if ( $images = get_children(array(
        'post_type' => 'attachment',
        'numberposts' => 1,
        'post_status' => null,
        'post_parent' => $post->ID
    )));

    foreach( $images as $image ) {
         $attachment = wp_get_attachment_image_src( $image->ID );

    // Size
    $width = 240;
    $height = 160;
    $zoom_crop = 1;
?>

<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php esc_attr( printf( __( 'Click to read %s', 'truereps' ), get_the_title() ) ); ?>">
<img src="<?php bloginfo( 'template_directory' ); ?>/inc/scripts/timthumb.php?src=<?php echo $attachment[0]; ?>&amp;w=<?php echo $width; ?>&amp;h=<?php echo $height; ?>&amp;zc=<?php echo $zoom_crop; ?>" alt="<?php the_title(); ?>" />
</a>

<?php } ?>

 <i></i>
  <span class="box">
 <span class="views"><?php if(function_exists('the_views')) { the_views(); } ?></span>
 <span class="time"><?php echo time_ago(); ?></span>
 </span>
 
  <strong><?php short_title('...', '34'); ?></strong> </a>


 </li>
<?php endforeach; ?>

 </ul>

<div class="clear"></div>

That's how it looks right now:

I just took a random picture from my PC for the example, but I hope that it's easier to understand how I was imagine to it would be looking like :'D I'm also not working with links from other websites, but with the "Featured Imagine" option in WordPress with uploading a picture to WP.

Thanks in Advance and have a wonderful day :)!

Answer 3

I don't think you're far off but it looks like you may be overly complicating it unnecessarily....you mentioned that you're (also) using the "featured image" so I assume what you're trying to do is a) IF a youtube thumbnail exists in a custom field ('wtp_thumb_url') then use that one and if not then b) use the Post's Featured Image thumbnail.

If I've assume correctly, then all you need to do is something like this:

<?php $thumb = tube_getcustomfield('wtp_thumb_url',get_the_ID());  
   if(!empty($thumb)) { ?>
    <img src="<?php echo $thumb; ?>" alt="<?php the_title_attribute(); ?>" title="<?php the_title_attribute(); ?>" width="240p" height="180" class="thumb" />

   <?php } else { 
   the_post_thumbnail() } ?>

(more reading here: https://developer.wordpress.org/reference/functions/the_post_thumbnail/)

When you use "the_post_thumbnail" it defaults to the Thumbnail size set in your Media Settings. You can specify your desired size there (240x160) or you can add custom image sizes and then call that size within the brackets of "the_post_thumbnail" OR you can use "get_the_post_thumbnail" and echo the contents within an image tag so you can tweak any other attributes.

Of course that assumes you have a Featured Image assigned, so to have a 3rd option fallback (a default image) you could wrap that in another test for your featured image, so that if a) no YT thumbnail exists and b)no featured image exists, then display an image like you did in your first code example:

<img src="<?php bloginfo('template_url') ?>/images/default_thumb.jpg" alt="<?php get_the_title(); ?>" class="thumb"/><?php } ?>