Support » Plugin: CMB2 » Custom Taxonomy Image on front-end

  • Resolved EliWbbr

    (@eliwbbr)


    i created a custom-post-type called “products” which has a custom-taxonomy called “department”.

    in that taxonomy is an ‘add image’ metabox set up for users to add an image to represent the department on the front-end.

    can you help me get it to display the front-end? i can’t seem to make it happen.

    they should show on this page: http://staging10.thestudio-patrick.com/products/

    here is my page-products.php code:

    <div class="row">					
    <?php
    	$terms = get_terms('department'); 
    		foreach ( $terms as $term ) {
    			echo '<div class="col-sm-12 col-md-3">';
    
    				echo '<a href="/department/' . $term->slug . '">' . $term->name . '</a>';
    
    				echo '<div style="border:1px solid blue;">';
    					//$file = wp_get_attachment_image( get_post_meta( get_the_ID(), '_cmb2_term_dept_img_id', 1 ), '' );
    					$file = get_post_meta( $post->ID, '_cmb2_term_dept_img', true );
    					echo $file;
    				echo '</div>';
    
    				echo '<div style="border:1px solid yellow;">';
    					$file = get_post_meta( get_the_ID(), '_cmb2_term_dept_img', true );
    					//$file = wp_get_attachment_image( get_post_meta( get_the_ID(), '_cmb2_term_dept_img_id', 1 ), '' );
    					foreach ( (array) $file as $attachment_id => $attachment_url ) {
    						echo '<div id="gallery" class="gallery gallery-size-thumbnail">';
    							echo '<figure class="gallery-item">';
    								echo '<div class="gallery-icon landscape">';
    									echo '<a rel="prettyPhoto[pp_gal]" href=" ';
    										echo $attachment_url;
    										echo '">';
    										echo wp_get_attachment_image( $attachment_id );
    									echo '</a>';
    								echo '</div>';
    							echo '</figure>';
    						echo '</div>';
    					}	
    				echo '</div>'; // closes yellow border div
    
    			echo "</div>";// closes .col-sm-12 and .col-md-3 div
    	}	
    ?>
    </div><!-- eof: .row -->

    and here is my code from my metabox-functions file:

    
    <?php
    /**
     * Get the bootstrap!
     */
    
    if ( file_exists( dirname( __FILE__ ) . '/cmb2/init.php' ) ) {
    	require_once dirname( __FILE__ ) . '/cmb2/init.php';
    } elseif ( file_exists( dirname( __FILE__ ) . '/CMB2/init.php' ) ) {
    	require_once dirname( __FILE__ ) . '/CMB2/init.php';
    }
    
    add_action( 'cmb2_init', 'cmb2_metaboxes' );
    
    /**
     * Define the metabox and field configurations.
     */
    function cmb2_metaboxes() {
    
    // Start with an underscore to hide fields from custom fields list
    $prefix = '_cmb2_';
    
    /**
     * Initiate PRODUCTS metabox
     */
    $cmb = new_cmb2_box( array(
    	'id'            => 'products_metabox',
    	'title'         => __( 'Products', 'cmb2' ),
    	'object_types'  => array( 'post', 'product' ), // Post type
    	'context'       => 'normal',
    	'priority'      => 'high',
    	'show_names'    => true, // Show field names on the left
    	'cmb_styles' 	=> true, // false to disable the CMB stylesheet
    	// 'closed'     => true, // Keep the metabox closed by default
    ) );
    		$cmb->add_field ( array(
    				'name'         => __( 'Product Number', 'cmb2' ),
    				'desc'         => __( 'Enter a product number for this product', 'cmb2' ),
    				'id'           => $prefix . 'product_number',
    				'type'         => 'text',
    				'column' => array( 'position' => 4 ),
    		) );
    		$cmb->add_field( array(
    				'name'         => __( 'Product Image(s)', 'cmb2' ),
    				'desc'         => __( 'Upload an image or images of this product.', 'cmb2' ),
    				'id'           => $prefix . 'productimages_file_list',
    				'type'         => 'file_list',
    				'preview_size' => array( 100, 100 ), // Default: array( 50, 50 )
    		) );				
    		$cmb->add_field( array(
    				'name'         => __( 'Spec Sheet', 'cmb2' ),
    				'desc'         => __( 'Upload the product spec sheet or attachment', 'cmb2' ),
    				'id'           => $prefix . 'specsheet_file_list',
    				'type'         => 'file_list',
    				'preview_size' => array( 100, 100 ), // Default: array( 50, 50 )
    		) );						
    		$cmb->add_field( array(
    				'name' 		   => esc_html__( 'Price', 'cmb2' ),
    				'desc' 		   => esc_html__( 'field description (optional)', 'cmb2' ),
    				'id'   		   => $prefix . 'textmoney',
    				'type' 		   => 'text_money',
    				'before_field' => '$', // override '$' symbol if needed
    				// 'repeatable' => true,
    		) );
    
        // Add other metaboxes as needed
    
    }
    
    add_action( 'cmb2_init', 'cmb2_register_taxonomy_metabox' );
    /**
     * Hook in and add a metabox to add fields to taxonomy terms
     */
    function cmb2_register_taxonomy_metabox() {
    	$prefix = '_cmb2_term_';
    
    /**
     * Metabox to add fields to categories and tags
     */
    $cmb_term = new_cmb2_box( array(
    	'id'               => $prefix . 'edit',
    	'title'            => esc_html__( 'Department Image', 'cmb2' ), // Doesn't output for term boxes
    	'object_types'     => array( 'term' ), // Tells CMB2 to use term_meta vs post_meta
    	'taxonomies'       => array( 'department', 'post_tag' ), // Tells CMB2 which taxonomies should have these fields
    	'new_term_section' => true, // Will display in the "Add New Category" section
    ) );
    		$cmb_term->add_field( array(
    			'name' 			=> esc_html__( 'Department Image', 'cmb2' ),
    			'desc' 			=> esc_html__( 'Add an image to represent this department', 'cmb2' ),
    			'id'   			=> $prefix . 'dept_img',
    			'type' 			=> 'file',
    			'column' 		=> array( 'position' => 8 ),
    		) );
    	// Add other metaboxes as needed
    }
    

    really hoping someone can point me in the right direction

Viewing 15 replies - 1 through 15 (of 17 total)
  • Plugin Author Michael Beckwith

    (@tw2113)

    The BenchPresser

    Biggest thing I can see is that you’re using get_post_meta() and the post ID, when it the image is being set on terms. You’d need get_term_meta() and the term ID to fetch.

    Try out those changes and let us know the results.

    Thread Starter EliWbbr

    (@eliwbbr)

    Still nothing. Maybe i’m using the terms incorrectly? I don’t work with them often, so its possible. Is there another tutorial you could point me to?

    Plugin Author Michael Beckwith

    (@tw2113)

    The BenchPresser

    Let’s start smaller and check out what you’re using to try and fetch the term information and address this. May be a minor detail here that is a quick fix.

    Thread Starter EliWbbr

    (@eliwbbr)

    Okay, here is how i’m outputting it to the front-end:

    <?php	
    	$terms = get_terms('department'); 
    	$file = get_term_meta( get_the_ID(), '_cmb2_term_dept_img', true );
    	foreach ( $terms as $term ) {
    		echo '<div class="col-sm-12 col-md-3">';
    			echo '<a href="/department/' . $term->slug . '">' . $term->name . '</a>';
    			echo '<div style="border:1px solid blue;">';
    				echo '<img src="';
    					echo esc_html($file);
    				echo '" class="dept-img">';
    			echo '</div>';
    		echo "</div>";// closes .col-sm-12 and .col-md-3 div
    	}	
    ?>

    Please pardon my ignorance here…i’m not a programmer, just know enough to break stuff… ;0)

    Plugin Author Michael Beckwith

    (@tw2113)

    The BenchPresser

    Give this version a go:

    Notes:

    * I changed get_terms() to get_the_terms() and passed in the post ID. The first one fetches terms for the taxonomy. The second one fetches terms for that taxonomy that are assigned to the post. Important difference.
    * I moved the $file assignment to inside the foreach loop, and passed it the term_id. get_the_ID() is going to fetch the post ID, which isn’t what we want.
    * I changed esc_html() to esc_attr() since it’s being output in a src attribute.

    <?php	
    	$terms = get_the_terms( get_the_ID(), 'department' ); 
    	foreach ( $terms as $term ) {
    		$file = get_term_meta( $term->term_id, '_cmb2_term_dept_img', true );
    		echo '<div class="col-sm-12 col-md-3">';
    			echo '<a href="/department/' . $term->slug . '">' . $term->name . '</a>';
    			echo '<div style="border:1px solid blue;">';
    				echo '<img src="';
    					echo esc_attr($file);
    				echo '" class="dept-img">';
    			echo '</div>';
    		echo "</div>";// closes .col-sm-12 and .col-md-3 div
    	}	
    ?>
    
    Thread Starter EliWbbr

    (@eliwbbr)

    Okay i pasted your code in place of mine. it generated this error though:

    Invalid argument supplied for foreach()

    Plugin Author Michael Beckwith

    (@tw2113)

    The BenchPresser

    Couple things:
    1. Does the post you’re testing this with have any terms associated with it at the moment?
    2. We’ll need to check if there are any terms.

    <?php	
    	$terms = get_the_terms( get_the_ID(), 'department' );
    	if ( $terms && ! is_wp_error( $terms ) ) {
    		foreach ( $terms as $term ) {
    			$file = get_term_meta( $term->term_id, '_cmb2_term_dept_img', true );
    			echo '<div class="col-sm-12 col-md-3">';
    				echo '<a href="/department/' . $term->slug . '">' . $term->name . '</a>';
    				echo '<div style="border:1px solid blue;">';
    					echo '<img src="';
    						echo esc_attr($file);
    					echo '" class="dept-img">';
    				echo '</div>';
    			echo "</div>";// closes .col-sm-12 and .col-md-3 div
    		}
    	}
    ?>
    
    Thread Starter EliWbbr

    (@eliwbbr)

    Yes, there are three “departments” set up right now (just for testing) called Category X (category-x, link: http://staging10.thestudio-patrick.com/department/category-x/), Category Y (category-y), and Category Z (category-z)

    Upon landing on the main products page, these are the items the user should see first.

    I pasted your newly supplied snippet into page-products.php though but the “departments” all disappeared

    Plugin Author Michael Beckwith

    (@tw2113)

    The BenchPresser

    The updated snippet is only going to show content if the get_the_terms() call has anything to iterate over.

    What template are you editing? This url, http://staging10.thestudio-patrick.com/products/, looks like it’s a page, based on body classes. Do you have a page named “products” on top of a post type with the same name? That would definitely be conflicting a bit. If you’re editing archive.php then it’s not going to show at that url because it’s using page.php instead.

    If you’re looking at http://staging10.thestudio-patrick.com/product/product-7/ then you’d want to be going with single.php or single-product.php

    Thread Starter EliWbbr

    (@eliwbbr)

    Hi Michael,
    My custom post type is called “product” – no ‘s’. And yes, i do have a page in the admin called “Products“. On page-products.php i have a basic loop to call in the page content entered from within the admin, and below that is where my code exists to pull in the individual custom taxonomies (“department”). All on the page-products.php file.

    Clicking on one of the “departments” takes the user to “url/department/category-x/”.
    Thats because of this line and the /department/ added to the a tag:
    echo '<a href="/department/' . $term->slug . '">' . $term->name . '</a>';
    i did that because instead of going to something like this:/department/category-x/ i was getting a “page not found” page.

    Yes, i did use single-product.php. In fact, it seems to be the only file i’ve gotten right coded and placed correctly: /product/product-7/

    Does that answer your question? :/

    • This reply was modified 4 years, 5 months ago by EliWbbr.
    • This reply was modified 4 years, 5 months ago by EliWbbr.
    Plugin Author Michael Beckwith

    (@tw2113)

    The BenchPresser

    Not sure where it went, but I received the following reply in my email, so quoting for posterity.

    Hi Michael,
    My custom post type is called "product" - no 's'. And yes, i do have a page in the admin called "Products". On page-products.php i have a basic loop to call in the page content entered from within the admin, and below that is where my code exists to pull in the individual custom taxonomies ("department"). All on the page-products.php file.
    
    Clicking on one of the "departments" takes the user to "url/department/category-x/". 
    Thats because of this line and the /department/ added to the a tag: 
    echo '<a href="<strong>/department/</strong>"' . $term->slug . '">' . $term->name . '</a>';
    i did that because instead of going to something like this:/department/category-x/ 
    i was getting a "page not found" page.
    
    Yes, i did use single-product.php. In fact, it seems to be the only file i've gotten right coded and placed correctly: /product/product-7/
    
    Does that answer your question? :/
    

    The first part is going to be a primary issue. You’re editing things on a page template, which isn’t going to have the terms on that queried object. The single version at /product/product-7/ would work because that’s one of the products that will have terms associated.

    I’m assuming the post content for the “products” page, is all just standard, typed-in, text, and you’re not using a shortcode or anything similar to do a query for the product post type there.

    Thread Starter EliWbbr

    (@eliwbbr)

    Correct. Just a standard page entry in the admin. Here is the full page-products.php

    <?php get_header(); ?>
           
    <div id="content" class="site-content"> <!-- closes in footer -->    
    
    <div id="primary" class="content-area">
    	<main id="main" class="site-main" role="main">
    
    		<?php while ( have_posts() ) : the_post(); ?>
    			<?php get_template_part( 'template-parts/content', 'page' ); ?>
    		<?php endwhile; // End of the loop. ?>
    
    		<div class="row">	
    
    			<?php	
    			$terms = get_terms('department'); 
    			$file = get_term_meta( get_the_ID(), '_cmb2_term_dept_img', true );
    			foreach ( $terms as $term ) {
    				echo '<div class="col-sm-12 col-md-3">';
    					//echo '<a href="/department/' . $term->slug . '">' . $term->name . '</a>';
    					echo '<a href="' . $term->slug . '">' . $term->name . '</a>';
    					echo '<div style="border:1px solid blue;">';
    						echo '<img src="';
    							echo esc_html($file);
    						echo '" class="dept-img">';
    					echo '</div>';
    				echo "</div>";// closes .col-sm-12 and .col-md-3 div
    			}	
    			?>
    
    		</div><!-- eof: .row -->
    
    	</main><!-- #main -->
    </div><!-- #primary -->
    
    <?php get_footer(); ?>
    Plugin Author Michael Beckwith

    (@tw2113)

    The BenchPresser

    What I’m saying is that that’s the wrong file to be editing. Putting our code here in that template, would make it try to fetch terms associated with the current page, which is not the post type post(s) in question.

    This snippet in https://wordpress.org/support/topic/custom-taxonomy-image-on-front-end/#post-9192063 is going to be best for single-product.php and archive-product.php files, inside the WordPress loops in each. This is because both of those are going to be working with the product post type posts.

    Thread Starter EliWbbr

    (@eliwbbr)

    okay, i think i’m cookin’ now. i’ve got the code you provided on archive-product.php (here is the link) but it appears to be listing each department 3 times for a total of 9 products. i just need to to list any active departments once, like it did initially.

    Plugin Author Michael Beckwith

    (@tw2113)

    The BenchPresser

    Hunch says we are doing this in its own loop

    Very crude idea of what’s going on:
    foreach { // has 3 things to show
    foreach { // we’re showing terms here. It gets done 3 times
    }
    }

    If you could pastebin the archive-product.php file, I can give it a quick looky.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Custom Taxonomy Image on front-end’ is closed to new replies.