SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    WordPress: Display categories as image blocks

    Hi everyone,

    I am trying to display my WordPress categories as tiled images - the image coming from the most recent article's featured image. The image will then link to the category.

    The image is showing fine, but the link to the category page doesn't work...

    PHP Code:
    <?php $category get_the_category(); 
        if(
    $category[0]){
            echo 
    '<a href="'.get_category_link($category[0]->term_id ).'">'.the_post_thumbnail('thumbnail').'</a>';
        }
    ?>
    <?php $category 
    get_the_category(); echo $category[0]->cat_name?>
    This code outputs the following code:

    HTML Code:
    <img width="226" height="185" src="IMAGE URL" class="attachment-thumbnail wp-post-image" /><a href="CATEGORY URL"></a>
    Category Name
    What I wanted was the following output:

    HTML Code:
    <a href="CATEGORY URL">Category Name <img width="226" height="185" src="IMAGE URL" class="attachment-thumbnail wp-post-image" /></a>

    Any ideas?

    Thanks,
    Simon

  2. #2
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Try:
    Code:
    $category = get_the_category(); 
    
    if($category[0]){
        $link = get_category_link($category[0]->term_id );
        $cat_name = $category[0]->cat_name;
        $thumbnail = the_post_thumbnail('thumbnail');
    
        echo "<a href='$link'>$cat_name $thumbnail</a>";
    }

  3. #3
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Am I doing something wrong? I inserted the code (with PHP tags as:

    Code:
    <?php $category = get_the_category(); 
    		if($category[0]){
    	    $link = get_category_link($category[0]->term_id );
    	    $cat_name = $category[0]->cat_name;
    	    $thumbnail = the_post_thumbnail('thumbnail');
    
    	    echo "<a href='$link'>$cat_name $thumbnail</a>";
    	} ?>
    Thank you

  4. #4
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, that did work, it was other code breaking it, however, that insets the starting anchor tag after the image:

    This is the produced code:

    HTML Code:
    <img width="226" height="185" src="IMG URL" class="attachment-thumbnail wp-post-image" alt="" /><a href='LINK URL'>Category name</a>
    Is there a way to get the a tag wrapping the image?

  5. #5
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Wow...that is really bizarre!?

    Try breaking it up into separate echo statements, like this:
    Code:
    <?php $category = get_the_category(); 
    	if($category[0]){
        $link = get_category_link($category[0]->term_id );
        $cat_name = $category[0]->cat_name;
        $thumbnail = the_post_thumbnail('thumbnail');
    
        echo "<a href='$link'>";
        	echo $cat_name;
        	echo $thumbnail;
        echo '</a>';
    } ?>
    If that doesn't work, I don't know what to tell ya

  6. #6
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah this outputs the same code... link after the image.

    Thanks very much for looking for me though

  7. #7
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's working with the code below, but it is repeating the categories for each post, so, say there are 5 categories - instead of just listing the 5 categories, with the latest post's feature image, it is repeating each category depending on how many posts there are.

    Not sure if I am explaining this well. Say we have 3 categories: dogs, cats and rabbits.
    Then there are 6 posts, 3 in dogs, 1 in cats, 2 in rabbits.

    The current code is outputting all 6 posts as categories.

    Is there a way to just output the 3 categories, with the image from the most recent post? So in my above example, it would only output 3: dog cat, cat cat (lol) and rabbit cat.

    Code:
    <?php
    $category = get_the_category();
    if ( isset($category[0]) && !empty($category[0]) ) {
    	$link = get_category_link($category[0]->term_id );
    	$cat_name = $category[0]->cat_name;
    
    	echo '<a href='.$link.'>'.$cat_name;
    	the_post_thumbnail( 'thumbnail' );
    	echo '</a>';
    }
    ?>

  8. #8
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    OH RIGHT!

    For all the examples above you should have been using "get_the_post_thumbnail", and not "the_post_thumbnail". The "the_post_thumbnail" echos the string out, the "get_the_post_thumbnail" returns the string. That's why we were having that issue...

    As for your new problem...Wow that's really confusing haha. I'll need to see the loop it's in, I'm assuming its a foreach loop? In the meantimes:
    * get_the_category() will only get the category for the CURRENT page. Try get_the_category($id), where $id is that of the current post in your loop
    * same thing with the thumbnail, make sure to use [get_] the_post_thumbnail($id, 'thumbnail');

  9. #9
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haha sorry, hard one to explain!

    The loop it is in is:

    Code:
    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    <div class="thumb gThumb">
    	<a href="<?php the_permalink(); ?>">
    		<div class="captionContainer">
    			<div class="caption">
    				<h2><?php the_title(); ?></h2>
    				<?php
    					$customfields = get_post_custom();
    					$shortdescript = $customfields['short_description'][0];
    				?>
    				<p><?php echo $shortdescript ?></p>
    			</div><!--caption-->
    		</div><!--captionContainer-->
    		<?php 
    			// check if the post has a Post Thumbnail assigned to it.
    			if ( has_post_thumbnail() ) {
    				the_post_thumbnail('thumbnail');
    			}
    		?> 
    	</a>
    </div><!--thumb-->
    <?php endwhile; ?>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •