adding hover image in custom field to featured images in WordPress loop via functions file

484 views Asked by At

I have wp site with pages displaying products in a grid format like a portfolio. My theme uses standard index.php page for the loop and a functions file to output the actual content depending on the type of post and settings. I would like to hover over the featured image in my portfolio grid layout to show another image that I have put in a custom field called "hover-thumb". I searched all over the net and below is what I have concluded is the best way but I cannot figure out why the hover image source is empty when I look at the outputted source code. The hover effect seems as though it would work if only the image would populate. I am not a programmer so this is very complicated for me. I hope someone out there could make this clear. I modified the code (in functions file) below by adding the php inside the et_overlay span tag below... (if you check site you will see the in the source code that the src="" is empty http://eyemajic.staging.wpengine.com/matte-finish/ thank you for any suggestions better yet, I would love to have this in my own functions file in my child theme but have no idea how I could just add my modifications or how much of the original code I would need to include in my function file.

<?php
        $thumb = '';

        $width = 'on' === $fullwidth ?  1080 : 400;
        $width = (int) apply_filters( 'et_pb_portfolio_image_width', $width );

        $height = 'on' === $fullwidth ?  9999 : 284;
        $height = (int) apply_filters( 'et_pb_portfolio_image_height', $height );
        $classtext = 'on' === $fullwidth ? 'et_pb_post_main_image' : '';
        $titletext = get_the_title();
        $thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Blogimage' );
        $thumb = $thumbnail["thumb"];

        if ( '' !== $thumb ) : ?>
            <a href="<?php the_permalink(); ?>">
            <?php if ( 'on' !== $fullwidth ) : ?>
                <span class="et_portfolio_image">
            <?php endif; ?>
                    <?php print_thumbnail( $thumb, $thumbnail["use_timthumb"], $titletext, $width, $height ); ?>
            <?php if ( 'on' !== $fullwidth ) : ?>
                    <span class="et_overlay"><?php $hover_image = get_post_meta($post->ID, 'hover-thumb', true); ?>
                    <img class="hover-img" src="<?php echo $hover_image; ?>" /> </span>
                </span>
            <?php endif; ?>
            </a>
0

There are 0 answers