WordPress.org

Ready to get started?Download WordPress

Forums

Show a number of category thumbnails? (10 posts)

  1. angelostudios
    Member
    Posted 1 year ago #

    I'd like to show 4 thumbnails for a specific category. Below is the code I'm using but it is only showing 1 thumbnail. I'm not sure how to limit/force it to show 4.

    <ul class="thumbnail">
    <?php $wordpress = new WP_Query(); ?>
    <?php $wordpress->query('cat=3'); ?>
    <?php while($wordpress->have_posts()) : $wordpress->the_post(); ?>
    
    		<li>
    			<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
    			<?php the_post_thumbnail( array(320,240) ); ?>
    			</a>
    		</li>
    
    	<?php endwhile; ?>
    
    	</ul>
  2. angelostudios
    Member
    Posted 1 year ago #

    I have also tried this code, but I'm still only seeing 1 thumbnail (I have at least 4 in this category)

    <?php $postCount = 0; ?>
            <?php query_posts('cat=5&showposts=4'); ?>
        <?php while (have_posts()) : the_post(); ?>
        <a href="#register" title="<?php the_title(); ?>"><?php the_post_thumbnail( array(124,86) ); ?></a>
           <?php $postCount++; ?>
    <?php endwhile; ?>
  3. deepbevel
    Member
    Posted 1 year ago #

    This is how I did it, but change the cat # of course.`

    <ul>
    <?php query_posts('cat=56&showposts=4'); ?>
    <?php while ( have_posts() ) : the_post(); ?>
    
    		<li>
    			<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
    			<?php the_post_thumbnail( array(320,240) ); ?>
    			</a>
    		</li>
    
    	<?php endwhile; ?>
    <?php wp_reset_query();?>
    
    	</ul>
  4. angelostudios
    Member
    Posted 1 year ago #

    That makes sense that it should work that way, but for some reason it still only shows 1 thumbnail. Is there something in my theme that is conflicting? I've checked my plugins by disabling/re-enabling so that's not it.

    Here is my entire template using your code instead of mine:

    <?php
    	$args = (array)get_option('dp_home_featured');
    	$args = dp_parse_query_args($args);
    	$autoplay = !empty($args['autoplay']) ? true : false;
    	$query = new WP_Query($args);
    ?>
    
    <?php if($query->have_posts()): ?>
    	<?php
    		/* Load scripts only when needed */
    		wp_enqueue_script('jquery-carousel');
    		wp_enqueue_script('jplayer');
    	?>
    
    	<div class="home-featured-full wall">
    
    	<?php
    		$items = ''; $i = 0;
    		while ($query->have_posts()) : $query->the_post(); global $post; $i++;
    
    			/* Output first post
    			 *============================================*/
    			if($i == 1) { ?>
    				<div id="video" class="wrap cf">
    					<div id="headline" class="cf">
    						<h1 id="title">Featured Video</a></h1>
    
    						<div id="actions">
    							<?php dp_like_post(); ?>
    
    							<div class="dropdown dp-share">
    								<span class="dropdown-handle"><?php _e('Share', 'dp'); ?></span>
    
    								<div class="dropdown-content">
    									<?php dp_addthis(array('post_id'=>$post->ID)); ?>
    								</div>
    							</div>
    						</div>
    					</div><!-- end #headline -->
    
    					<div id="screen"><div id="screen-inner">
    						<?php
    							if(is_video($post->ID)) {
    								dp_video($post->ID, $autoplay);
    							} else {
    								$thumb_size = 'custom-full';
    								dp_thumb_html($thumb_size);
    							}
    						?>
    					</div></div><!-- end #screen -->
    				</div><!-- end #video -->
    			<?php } 
    
    			/* Get carousel items
    			 *============================================*/
    
    			// Get Thumbnail html
    			$thumb_html = dp_thumb_html('custom-small', '', '', false);
    
    			// Build classname
    			$classes = array('item');
    			$classes[] = ($i == 1) ? 'current' : ''; // Add 'current' class to first post
    			$classes[] = is_video() ? 'item-video' : 'item-post'; // Add item form class
    			$class = implode(' ', $classes);
    
    			$items .= '<li class="'.$class.'">'.$thumb_html.'</li>';
    
    		endwhile;
    	?>
    
    		<?php // Output carousel ?>
    
    <div class="carousel fcarousel fcarousel-5 wrap cf">
    		<div class="carousel-container">
    			<div class="carousel-clip">
    				<ul class="carousel-list">		
    
    <?php query_posts('cat=5&showposts=4'); ?>
    <?php while ( have_posts() ) : the_post(); ?>
    
    		<li>
    			<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
    			<?php the_post_thumbnail( array(124,86) ); ?>
    			</a>
    		</li>
    
    	<?php endwhile; ?>
    <?php wp_reset_query();?>
    
    	</ul></div>
    	</div><!-- end .carousel-container -->
    		</div><!-- end .carousel -->
    
    	</div><!-- end #wall -->
    <?php endif; wp_reset_query(); ?>

    I'm trying to replace the themes rotating category thumbnails with my own. Maybe I've missed something here?

  5. deepbevel
    Member
    Posted 1 year ago #

    I think there may be more to it, but you might try replacing the original query

    <?php
    		$items = ''; $i = 0;
    		while ($query->have_posts()) : $query->the_post(); global $post; $i++;

    with

    <?php query_posts('cat=5&showposts=4'); ?>
    <?php while ( have_posts() ) : the_post(); ?>

    although this part may be interfering with the numberof posts, not sure though,

    <?php
    		$items = ''; $i = 0;
    		while ($query->have_posts()) : $query->the_post(); global $post; $i++;
    
    			/* Output first post
    			 *============================================*/
    			if($i == 1) { ?>

    maybe try changing the 0 to 4?

    if you dont want to use the themes jQuery effect you might try just removing it and replace with the basic query I posted.

    However if this is your home-blog page, why not just make a static page intsead, and add the query to the page template with a conditional?

    <?php if(is_front_page);?>
    <ul>
    <?php query_posts('cat=5&showposts=4'); ?>
    <?php while ( have_posts() ) : the_post(); ?>
    
    		<li>
    			<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
    			<?php the_post_thumbnail( array(320,240) ); ?>
    			</a>
    		</li>
    
    	<?php endwhile; ?>
    <?php wp_reset_query();?>
    
    	</ul>
    <?php}?>
  6. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    for some reason it still only shows 1 thumbnail.

    does each post in that category have a 'featured image'?
    does the loop show 4 posts? (you could check this by outputting for instance the title in the loop - or check the html in the browser for those link tags)

  7. angelostudios
    Member
    Posted 1 year ago #

    Here is what I'm trying to do... I created a page that users see when logged in and when not logged in. See here: http://nameonline.tv/preview/#

    What I want is what you see there... the latest video from our "featured" category to play in jplayer.

    Underneath (currently hard coded)... the latest 4 thumbnails from our "featured" category.

    The category thumbnails work fine in my category archive pages. I think that deepbevel is right, there is something going on in the way I'm calling the main featured video that also tells the thumbnails to use just 1 thumb. Is is because they are in the same category?

    This is the code for the thumbnails on the "logged in" page. The reason I'm changing it is that I want the thumbnails to link to an anchor, not to the video like it does here:

    /* Get carousel items
    			 *============================================*/
    
    			// Get Thumbnail html
    			$thumb_html = dp_thumb_html('custom-small', '', '', false);
    
    			// Build classname
    			$classes = array('item');
    			$classes[] = ($i == 1) ? 'current' : ''; // Add 'current' class to first post
    			$classes[] = is_video() ? 'item-video' : 'item-post'; // Add item form class
    			$class = implode(' ', $classes);
    
    			$items .= '<li class="'.$class.'">'.$thumb_html.'</li>';
    
    		endwhile;
    	?>
    
    		<?php // Output carousel ?>
    		<div class="carousel fcarousel fcarousel-5 wrap cf">
    		<div class="carousel-container">
    			<div class="carousel-clip">
    				<ul class="carousel-list"><?php echo $items; ?></ul>
    			</div><!-- end .carousel-clip -->
    
    			<div class="carousel-prev"></div>
    			<div class="carousel-next"></div>
    		</div><!-- end .carousel-container -->
    		</div><!-- end .carousel -->
    
    	</div><!-- end #wall -->
  8. deepbevel
    Member
    Posted 1 year ago #

    I'm not clear on what the videos have to do with the thumbnails, also I see there are 4 thumnails.. did you just solve? otherwise I'm confused.

  9. angelostudios
    Member
    Posted 1 year ago #

    Those thumbnails are just hard-coded in there for appearance since the site is live and receiving a lot of hits.

    I haven't solved it yet. Do you think it would work better if I put the featured into two categories? So cat 5 = "featured" and cat 6 = "featured-thumbs".

    Would that solve the conflict?

  10. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    building on your first posted code, this would be a way to query posts of a category which have a thumbnail image (aka 'featured image'):

    <ul class="thumbnail">
    <?php $args = array( 'posts_per_page' => 4, 'cat' => 3, 'meta_key' => '_thumbnail_id' ); ?>
    <?php $wordpress = new WP_Query( $args ); ?>
    <?php while($wordpress->have_posts()) : $wordpress->the_post(); ?>
    
    		<li>
    			<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
    			<?php the_post_thumbnail( array(320,240) ); ?>
    			</a>
    		</li>
    
    	<?php endwhile; ?>
    
    	</ul>

    make sure to enter the right category ID.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.