Complex category display with thumbnail

  • Greetings, I have been working on a site that requires a very complex category display, it’s a product catalog and it is organized in categories and sub-categories.

    The category pages have to display all posts organized by sub-category, something like:

    Main Category
    Sub-Cat1
    Post1
    Post2
    Sub-Cat2
    Post3
    Post4

    So far, thanks to help from guys at this forum, we have managed to make that work by using the following code:

    <?php
//get terms (e.g. categories or post tags), then display all posts in each retrieved term
$taxonomy = 'category';//  e.g. post_tag, category
$current_cat = get_query_var('cat');
$param_type = 'category__in'; //  e.g. tag__in, category__in
$term_args=array(
  'orderby' => 'name',
  'order' => 'ASC',
  'child_of' => get_query_var('cat')
);
$terms = get_terms($taxonomy,$term_args);
if ($terms) {
  foreach( $terms as $term ) {
    $args=array(
      "$param_type" => array($term->term_id),
      'post_type' => 'post',
      'post_status' => 'publish',
      'showposts' => -1,
      'caller_get_posts'=> 1,
      'orderby'=> 'title',
      'order'=> 'ASC',
      );
    $my_query = null;
    $my_query = new WP_Query($args);
    if( $my_query->have_posts() ) {

      echo '<div class="gs12col" id="cat_title" >
<h4>' . $term->name. '</h4>
</div> '; 

      while ($my_query->have_posts()) : $my_query->the_post(); ?>
	<div class="gs480" id="postclass">
	<div class="gs2col" id="thumbnail">
	<a href="<?php the_permalink() ?>"><?php the_post_thumbnail( array(140,140) ); ?></a>
	</div>
	<div class="gs4col" id="postcontent">
	<a href="<?php the_permalink() ?>"><h5><?php the_title(); ?></h5></a>
	<?php the_excerpt(); ?>
	</div>
	</div>

       <?php
             endwhile;
    }
  }
}
wp_reset_query();  // Restore global post data stomped by the_post().
?>

    Now, I need to display an image thumbnail and I want to use this code:

    <?php
foreach((get_the_category()) as $category) {
    echo '<img src="https://example.com/images/' . $category->cat_ID . '.jpg" alt="' . $category->cat_name . '" />';
}
?>

    Found here at the CODEX

    However, this does not work properly, since it does not identify the correct cat_ID, it uses one of the sub-category’s ID instead of the main category.

    I think the solution is to combine both codes so that as it identifies the main category to get all sub-cats, it can also define the image’s cat_ID as the main category. I don’t know how to do this, I’ve been trying but no luck.

    Any ideas?

    Thanks in advance! I know it was a long post, thanks for taking the time to help!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter mikeboy3

    (@mikeboy3)

    Please? anyone?

    Thread Starter mikeboy3

    (@mikeboy3)

    yet again, pretty please with sugar on top?

    I don’t understand your doing
    ‘child_of’ => get_query_var(‘cat’)
    shouldn’t that have been ‘child_of’ => g$category->cat_ID[0] or some such array item?

    i’ll see if this helps.
    your category is “clubs”
    your sub category ID is “14”.

    echo ‘<img src=”https://example.com/images/&#8217; . $category->cat_ID . ‘.jpg” alt=”‘
    so you want your image to be called “/images/14.jpg” or
    “/images/clubs/14.jpg”

    You already got $current_cat which returned what, an array? of 1 or more?

    if 1 you need to add $current_cat[0] to image path.
    if more than one, you’ll have to work through logic to go through the array .

    But it’s not clear exactly what name, or directory your image resides in.

    Thread Starter mikeboy3

    (@mikeboy3)

    Thank you for your help vincej. I read what you posted and I understood about 10% of what you tried to tell me, I’m not any good with php and I know very little about it, I learn by doing and trying to figure out how it works… so…

    I got the code above from a previus support question here at the forum, found here: WP Forum Thread

    I hope this helps with the first question.
    The images are “/images/14.jpg”

    I don’t really understand the third question, but I think you ask how many images are to be displayed? Just one, the main category’s image, so would be like “/images/clubs.jpg”, no need for images of sub-categories, only the main one.

    I’m not sure what you actually want to do here.
    Let me explain my setup.

    I have one category “4sale”.. it contains subcategories of “accents” furniture, etc, about 6 sub categories.

    I created a page with a custom query for each page. so.
    page: accents pulls in all items in the accents category and displays them.
    see here.
    https://greenspotantiques.com/wp/4-sale/accents-decorator-items-for-your-home-with-character

    I gave this page two custom fields.
    vj_page_sub_title and vj_page_info_list (at least ONE required here)
    I then assigned a thumbnail image to the page.

    The result of the script below is seen here:
    https://greenspotantiques.com/wp/4-sale

    This is a page which contains the query shown below, and uses the information from the custom fields to populate the text, while using the post_thumbnail to show the image. The image links to the sub-category page showing the items for sale Is this something like what you’re after ?

    If so, i’ll pop in the code below.. .. and then you would simply rework it into whatever template or post you need. It should work within any section of site you wish.

    You’ll notice I used the custom field “vj_page_info_list” to isolate the “categories” to show in my query. You could just as easily use an EMPTY page,(or even post) with the one requred custom field and it would work the same. If it has the field, it’s a category to show, if it has a thumbnail, show that.

    <?php
    $args=array(
      'meta_key' => 'vj_page_info_list',
      'post_type' => 'page',
      'post_status' => 'publish',
      'posts_per_page' => -1,
      'caller_get_posts'=> 1
      );
    $my_query = null;
    $my_query = new WP_Query($args);
    if( $my_query->have_posts() ) {
      while ($my_query->have_posts()) : $my_query->the_post(); ?>
<table ><tr>
<h2><a href="<?php the_permalink() ?>" > <?php the_title(); ?></a></h2>
</tr><tr><td>
<a href="<?php the_permalink(); ?>" >
<?php if(has_post_thumbnail()) {
echo get_the_post_thumbnail( $Post->ID, 'single-post-thumbnail-270' );} ?>
</a>
</td><td>

<strong><?php echo get_post_meta(get_the_ID(), 'vj_page_sub_title', true); ?></strong>
<br>
<?php  echo get_post_meta(get_the_ID(), 'vj_page_info_list', true); ?>
</td></tr></table>
<hr>
       <?php
      endwhile;
    }
wp_reset_query();  // Restore global post data stomped by the_post().
?>

    Hope that helps.
    Vince.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Complex category display with thumbnail’ is closed to new replies.