0

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>
2

You have 'taxonomy' => 'product_cat' in your code, so most likely you have Woocommerce, and we need to get a category picture from there. Try this code

<?php           $args = array(
                'taxonomy'   => 'product_cat',
                'title_li'   => '',
                'hide_empty' => 0,
                'echo'       => 0,
                'show_count' => 0,
                'style'      => '',
                'parent'    => 0
                );

                $get_cats = get_terms( $args );
?>
<div class="design">
   <div class="menu">
    3 menu options will be in this div and when we hover at each link an image must appear to the right with fast zoom in effect like shooting.
       <ul class="hoverimage">
<?php

                foreach ( $get_cats as $cat ) {

                $thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true ); 
                $image = wp_get_attachment_url( $thumbnail_id ); 
    if($image == "") {
    $image = get_bloginfo('url') . '/wp-content/uploads/2019/06/Logo-02-02.jpg';
    }
            ?>

        <li class="menu-item" data-image="<?php echo $image; ?>"><a href="<?php echo get_term_link( $cat ); ?>"><?php echo $cat->name; ?></a></li>

            <?php
                }
            ?>
       </ul>
   </div>
    <div class="zoom-preview">
image will appear here when we hover at each link at the left. each link it's own image.
        Also there must be a default image here when we do not hover at any link at the left.
        <div class='img_conatainer'>
        </div>
    </div>
   <div class="clear"></div>
</div>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"
              integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
              crossorigin="anonymous"></script>         
            <script>


$(function(){
    var imageContainer = '.img_conatainer',
        imageList      = '.hoverimage',
        maxWidth       = 'parent', // parent or specific css width/  
        defImage       = 'http://cdn.instructables.com/FEB/Q2RO/H9G190RM/FEBQ2ROH9G190RM.LARGE.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>
  • Thanks, I tried this but still nothing showing up. Yes I have Woocommerce. Where would I put the $image variable in the second section of the code? I think this is what is missing in bringing the 2 separate sections of code together. – Whee Nov 9 '19 at 12:59
  • Ok, try edited code. We no need put image in second part. If dont work - open html page source and try to find this output. Then copy it here. – user28956 Nov 9 '19 at 13:13
  • This is the output for one of the product categories <div class="design"> <div class="menu"> <ul class="hoverimage"> <li class="menu-item" data-image=""><a href="aaa.com/product-category/da-vinci/">Da Vinci</a></li> </ul> </div> <div class="zoom-preview"> <div class="img_container"> </div> </div> <div class="clear"></div> </div> – Whee Nov 9 '19 at 13:26
  • oh and the code didnt work, it just added bullet points to the list – Whee Nov 9 '19 at 13:36
  • Ok, try edited code. Its 100% that you have any images at categories ? – user28956 Nov 9 '19 at 14:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.