I've upgraded to Wordpress 3.0 and as we all know, timthumb is practically done with the thumbnail support in full swing with 3.0.
My problem is that I have a slider presentation on homepage of my site that I built using timthumb and pulling a custom field called "image", but I'm now trying to transfer over to using thumbnail feature image support to pull the image instead.
The slider isn't working on site ever since I uprgraded to 3.0 and I just need someone to help point me in the right direction.
The code for the slider is below:
/* Home Page Slide Show */
/* Home Page Slide Show */
function rt_getImageSlideShow() {
global $post;
$slideshow_html = '<div id="main_slide_show"> <div class="container">
<div class="slides">';
$query= new WP_Query('tag="Featured"&showposts=10&order=DESC');
$i = 0;
while ($query->have_posts()){
//var_dump( get_the_category(($post->ID)));
//echo $category[0]->cat_name;
$query->the_post();
//var_dump($query->the_post(),get_the_category($post->ID));
preg_match( '|<img.*src="([^"]*)"[^>]*>|iU', get_the_content(), $matches );
//preg_match('/\<img.*src\s*\=\s*\"([^\"]*)/isu',get_the_content(),$matches);
preg_match('/<a.*(<img.*>)/',get_the_content(),$link);
$stp_cont=strip_tags(get_the_content());
$cont_array = explode(' ',$stp_cont);
if(count($cont_array) > 35)
$my_post_small = implode(' ',array_slice($cont_array, 0, 20)).'...';
$categories = get_the_category();
// var_dump($categories);
$cats = '';
foreach ($categories as $category) {
$cats .= $category->name.', ';
}
$cats = substr($cats, 0, -2);
$meta_values = get_post_meta($post->ID, 'image', 1);
//echo $meta_values;
if($meta_values == ''){
if($matches[1] == ''){
$image = '<img src="'.get_bloginfo('template_url').'/images/530x331_logo.gif" alt="Thumbnail"/>';
$slideshow_html .= '<div><a href="' . get_permalink() .'" rel="bookmark">'. $image .'</a>'.
'<span><h2>'.$cats.'</h2><h3><a href="http://feeds.feedburner.com/theurbantwistcom">http://feeds.feedburner.com/theurbantwistcom</a></h3><span class="slider-text"><p>'.get_the_time('F jS, Y').'</p><h1><a href="' . get_permalink() .'" rel="bookmark">' . get_the_title() . '</a></h1> <p>' . $my_post_small . '</p><a class="redmoreslider" href="' . get_permalink() . '">read more</a></span></span></div>';
}
else{
$image = '<img src="'.get_bloginfo('template_url').'/timthumb.php?src='.$matches[1].'&h=331&w=530&zc=1" alt="Thumbnail"/>';
$slideshow_html .= '<div><a href="' . get_permalink() .'" rel="bookmark">'. $image .'</a>'.
'<span><h2>'.$cats.'</h2><h3><a href="http://feeds.feedburner.com/theurbantwistcom">http://feeds.feedburner.com/theurbantwistcom</a></h3><span class="slider-text"><p>'.get_the_time('F jS, Y').'</p><h1><a href="' . get_permalink() .'" rel="bookmark">' . get_the_title() . '</a></h1> <p>' . $my_post_small . '</p><a class="redmoreslider" href="' . get_permalink() . '">read more</a></span></span></div>';
}
}
else{
$image = '<img src="'.get_bloginfo('template_url').'/timthumb.php?src='.$meta_values.'&h=331&w=530&zc=1" alt="Thumbnail"/>';
//$image = '<img src="'.$meta_values.'" alt="Thumbnail"/>';
$slideshow_html .= '<div><a href="' . get_permalink() .'" rel="bookmark">'. $image .'</a>'.
'<span><h2>'.$cats.'</h2><h3><a href="http://feeds.feedburner.com/theurbantwistcom">http://feeds.feedburner.com/theurbantwistcom</a></h3><span class="slider-text"><p>'.get_the_time('F jS, Y').'</p><h1><a href="' . get_permalink() .'" rel="bookmark">' . get_the_title() . '</a></h1> <p>' . $my_post_small . '</p><a class="redmoreslider" href="' . get_permalink() . '">read more</a></span></span></div>';
}
$i++;
}wp_reset_query();
$slideshow_html .= '</div><a href="#" class="slider_previous">Previous</a><a href="#" class="slider_next">Next</a>';
$slideshow_html .= '<ul class="pagination aligncenter">';
$rt_i = 1;
while ($query->have_posts()) : $query->the_post();
$slideshow_html .= '<li><a href="#">'.$rt_i.'</a></li>';
$rt_i++;
endwhile;
$slideshow_html .= '</ul></div></div>';
return $slideshow_html;
}
The way the slider works currently is that it looks for custom field, if no custom field it pulls uploaded image in article, if no uploaded image, my logo appears.
What I need to have now is to pull image using featured image thumbnail support and then logo if not present.
Thanks in advance
P.S. I already know how to add featured thumbnail support to my theme because I already have...just don't know how to implement it in code above.
Thanks again
Nile Flores answers:
You could try the call for the post thumbnail code.
There is a tutorial for a slider that has coding that you might find helpful for your situation.
http://legendthemes.com/2010/06/14/building-a-jquery-posts-slider-wordpress/
Maor Barazany answers:
Hi,
Maybe the following code I wrote and implemented in a site will help you. It does just what you need.
If the post has thubnail image - it will load it, if not - it will call a function named <strong>imagesrc()</strong> and will load the first image in the post, if not that - it will load a default logo image. In all threee conditions - it also uses the timthumb script.
Here's the code for the images to disaply:
<?php if (has_post_thumbnail()) :
$thumbID = get_post_thumbnail_id($post->ID);?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permalink to <?php the_title(); ?>">
<img src="<?php bloginfo('template_directory'); ?>/customs/timthumb.php?src=<?php echo wp_get_attachment_url($thumbID); ?>&w=60&h=60&zc=1" alt="<?php the_title(); ?>" /> </a>
<?php
elseif (imagesrc()): ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permalink to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/thumbs.php?src=<?php echo imagesrc(); ?>&h=50&w=50&zc=1" alt="<?php the_title(); ?>" class="ths"/></a>
<?php else: ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permalink to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/thumbs.php?src=<?php bloginfo('url');?>/wp-content/files/logo/logo-triangle-idaho-icon.jpg&w=50&h=50&zc=1" alt="<?php the_title(); ?>" class="ths"/></a>
<?php endif; ?>
And this is the imagesrc() function, this one you should put in your template's functions.php file:
function imagesrc() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if (!($first_img))
{
$attachments = get_children(array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order'));
if (is_array($attachments))
{
$count = count($attachments);
$first_attachment = array_shift($attachments);
$imgsrc = wp_get_attachment_image_src($first_attachment->ID, 'large');
$first_img = $imgsrc[0];
}
}
return $first_img;
}
It's working great for me, hope it will help you... :)
Rashad Aliyev answers:
Ad this code to your functions.php for grabbing photo from your post.
function showphoto() {
global $post, $posts;
$photoone = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$photoone = $matches [1] [0];
if(empty($photoone)){ //if you don't have photo
$photoone = "/images/thumbnail.png";
}
return $photoone;
}
then you can use everywhere <?php showphoto() ?>
for example: <img src="<?php showphoto() ?>" border="0">
Rashad Aliyev comments:
For example you can use it with timthumb.php ;)
$image = '<img src="'.get_bloginfo('template_url').'/timthumb.php?src='. showphoto() .'&h=331&w=530&zc=1" alt="Thumbnail"/>';
If still you've a problem you can contact with me.
Brennen Jones comments:
Thanks, but that wasn't quite what I was looking for. It didn't work with the slider code above, but I can see it being helpful elsewhere. It's just not for the layout of my theme since I use featured thumbnail images.
I figured it out what was wrong on my end.
But quick and easier question since I'm not able to change the question here since I answered it myself.
Are you pretty efficient with loops? If so, can you drum me up a loop that looks like this page:
http://allhiphop.com/media/music.aspx?app=multimedia__music
Where the loop would be date as shown on the page then a 3 column layout showing the posts for that day.
With image then title right beneath of it and don't worry about the other stuff you see on the example page, I can tidy it up with css.
And in your mockup you don't have to put the image template tags in, I can do that. I just need a reference.
Would you be able to help out with this?