get taxonomy thumbnail and use it as a variable in code

Im having trouble trying to retrieve category thumbnails and use as a variable in some code i got from a JSFiddle. It puts a placeholder image as default and displays a category image on hover of category list.

I havent been able to get the placeholder or category image to show.

I have tried wp_get_attachment_url, get_term_thumbnail and get_term_meta to try and retrieve the thumbnail, however I am not even sure if these have or havent worked as I am not sure how to incorporate my resulting variable “$image” into the code.

$args = array(
‘taxonomy’ => ‘product_cat’,
‘title_li’ => ”,
‘hide_empty’ => 0,
‘echo’ => 0,
‘show_count’ => 0,
‘style’ => ”,
‘parent’ => 0
);

$get_cats = get_terms( $args );

foreach ( $get_cats as $cat ) {
$image = get_term_meta( $cat->term_id, ‘thumbnail_bid’, true );
?>
<div class=”design”>
<div class=”menu”>
<ul class=”hoverimage”>
<?php
echo ‘<ul class=”menu-item” data-image=”$image”><a href=”‘ . get_term_link( $cat ) . ‘”>’ . $cat->name . ‘</a></ul>’;
?>
</ul>
</div>
<div class=”zoom-preview”>
<div class=”img_container”>
</div>
</div>
<div class=”clear”></div>
</div>
<?php
}
?>

<script>

$(function(){
var imageContainer = ‘.img_container’,
imageList = ‘.hoverimage’,
maxWidth = ‘parent’, // parent or specific css width/
defImage = ‘/wp-content/uploads/2019/06/Logo-02-02.jpg’;
var $imageContainer = $(imageContainer).eq(0);
var $imageList = $(imageList).eq(0);
if (maxWidth === ‘parent’) { maxWidth = $imageContainer.width() + ‘px’; }
//Load images and set hover::
$imageList.find(‘li’).each(function(index){
if (typeof $(this).data(‘image’) === ‘string’) {
$imageContainer.append(
“<img id=’imageToggle”+index+
“‘ src='”+$(this).data(‘image’)+
“‘ style=’max-width: “+maxWidth+”; display:none;’ />”
);
$(this).data(“image”,”imageToggle”+index);
$(this).hover(
function(){ loadImage($(this).data(‘image’)); },
function(){ loadImage(‘imageToggleDef’); }
);
}
});
//Load default:
$imageContainer.append(
“<img id=’imageToggleDef”+
“‘ src='”+defImage+
“‘ style=’max-width: “+maxWidth+”‘ />”
);
//Toggle images:
function loadImage(imageId) {
$imageContainer.stop(true).fadeOut(‘fast’, function(){
$(this).find(‘img’).hide();
$(this).find(‘img#’+imageId).show();
$(this).fadeIn(‘fast’);
});
}

});
</script>

Read more here:: get taxonomy thumbnail and use it as a variable in code

Leave a Reply

Your email address will not be published. Required fields are marked *