Image swap on hover and theme integration
-
Hi there,
I’m using a theme which is using shortcodes to add elements to different pages. I’m trying to include this plugin on the Portfolio shortcode. The end goal is that on the homepage, when a user hovers over a portfolio item, the secondary featured image will be displayed in its place. However i’m having difficulty adding the correct code into the shortcode.php file. The section of code i’m working with is as follows:
if (!function_exists('Ueneo_portfolio')) { function Ueneo_portfolio($atts){ global $post; global $UeneoTheme_Options; $output = ''; $atts = shortcode_atts( array( 'filter_align' => '', ), $atts); $default = array( 'type' => 'portfolios', 'limit' => '100' ); $r = shortcode_atts( $default, $atts ); extract( $r ); if( empty($post_type) ){ $post_type = $type; $post_type_ob = get_post_type_object( $post_type ); } if( !$post_type_ob ){ return '<div class="warning"><p>'.__('No such post type found.', 'ueneo-shortcodes').'</em> found.</p></div>'; } $args = array( 'post_type' => $post_type, 'numberposts' => $limit, 'suppress_filters' => false, 'orderby' => 'title', 'order' => 'ASC', ); $posts = get_posts( $args ); $category = get_the_category(); if (isset($UeneoTheme_Options)){ $items_per_row = $UeneoTheme_Options->get('ut_portfolio_items_per_row'); } if( count($posts) ){ $output .= '<div class="c12 end">'; $output .= '<ul class="portfolio-nav '.$atts['filter_align'].'">'; $output .= '<li class="filter checked" data-filter="all">All</li>'; $categories = get_categories(array('taxonomy' => 'portfolio_item_category')); foreach ($categories as $category) { $output .= $category->cat_name; $output .= '</li>'; } $output .= '</ul>'; $output .= '</div></div>'; $output .= '<ul id="portfolioinner" class="'. $items_per_row .' '. $hover_style .'">'; foreach( $posts as $post ): setup_postdata( $post ); $terms = get_the_terms( $post->ID, 'portfolio_item_category' ); if ( $terms && ! is_wp_error( $terms ) ) : $portfolio_links = array(); foreach ( $terms as $term ) { $portfolio_links[] = preg_replace('/\s+/', '', $term->name); } $portfolio_item_category = join( " ", $portfolio_links ); $portfolio_category_list = join( " / ", $portfolio_links ); endif; $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); $output .= '<li class="item all ' .$portfolio_item_category. '">'; $output .= '<figure>'; $output .= get_the_post_thumbnail($post->ID, 'large'); $output .= '<figcaption>'; $output .= '<a class="plink" href="'.get_permalink(get_the_ID()).'" ></a>' ; $output .= '<div class="caption-inner">'; $output .= '<h3>'.get_the_title().'</h3>'; $output .= '<em>'.$portfolio_category_list.'</em>'; $output .= '</div>'; $output .= '</figcaption>'; $output .= '</figure>' ; $output .= '</li>'; endforeach; wp_reset_postdata(); $output .= '</ul>'; $output .= '<div class="grid">'; } else{ $output .= '<p>'.__('No posts found.','ueneo-shortcodes').'</p>'; } return $output; } add_shortcode( 'portfolio', 'Ueneo_portfolio' ); }
So the two things I need to get working is:
1. Getting the second featured image to output in this particular area
2. Getting the hover effect to work with the two added images.Any help would be much appreciated.
The section of the website that is is affecting is here
Thanks in advance!
- The topic ‘Image swap on hover and theme integration’ is closed to new replies.