Icon for portfolio mouseover

[a33]

ok thanks

[Kyle – SUPPORT]

If you’re using a child theme, you can add this to the functions.php file of your child theme:

/* PORTFOLIO LINK CONFIG
    ================================================== */
    if ( ! function_exists( 'sf_portfolio_item_link' ) ) {
        function sf_portfolio_item_link() {

            $link_config = $item_icon = $thumb_img_url = "";

            global $post, $sf_options;

            $thumb_image              = rwmb_meta( 'sf_thumbnail_image', 'type=image&size=full' );
            $thumb_link_type          = sf_get_post_meta( $post->ID, 'sf_thumbnail_link_type', true );
            $thumb_link_url           = sf_get_post_meta( $post->ID, 'sf_thumbnail_link_url', true );
            $thumb_lightbox_thumb     = rwmb_meta( 'sf_thumbnail_image', 'type=image&size=large' );
            $thumb_lightbox_image     = rwmb_meta( 'sf_thumbnail_link_image', 'type=image&size=large' );
            $thumb_lightbox_video_url = sf_get_post_meta( $post->ID, 'sf_thumbnail_link_video_url', true );
            $thumb_lightbox_video_url = sf_get_embed_src( $thumb_lightbox_video_url );
            $permalink                = get_permalink();

            foreach ( $thumb_image as $detail_image ) {
                $thumb_img_url = $detail_image['url'];
                break;
            }

            if ( ! $thumb_image ) {
                $thumb_image   = get_post_thumbnail_id();
                $thumb_img_url = wp_get_attachment_url( $thumb_image, 'full' );
            }

            if ( $thumb_link_type == "link_to_url" ) {
                $link_config = 'href="' . $thumb_link_url . '" class="link-to-url"';
                $item_icon   = apply_filters( 'sf_port_url_icon', "ss-navigateright" );
            } else if ( $thumb_link_type == "link_to_url_nw" ) {
                $link_config = 'href="' . $thumb_link_url . '" class="link-to-url" target="_blank"';
                $item_icon   = apply_filters( 'sf_port_url_icon', "ss-navigateright" );
            } else if ( $thumb_link_type == "lightbox_thumb" ) {
                $link_config = 'href="' . $thumb_img_url . '" class="lightbox" data-rel="ilightbox[portfolio]"';
                $item_icon   = apply_filters( 'sf_port_lightbox_icon', "ss-view" );
            } else if ( $thumb_link_type == "lightbox_image" ) {
                $lightbox_image_url = '';
                foreach ( $thumb_lightbox_image as $image ) {
                    $lightbox_image_url = $image['full_url'];
                }
                $link_config = 'href="' . $lightbox_image_url . '" class="lightbox" data-rel="ilightbox[portfolio]"';
                $item_icon   = apply_filters( 'sf_port_lightbox_icon', "ss-view" );
            } else if ( $thumb_link_type == "lightbox_video" ) {
                $link_config = 'data-video="' . $thumb_lightbox_video_url . '" href="#" class="fw-video-link"';
                $item_icon   = apply_filters( 'sf_port_video_icon', "ss-video" );
            } else {
                $link_config = 'href="' . $permalink . '" class="link-to-post"';
                $item_icon   = apply_filters( 'sf_port_post_icon', "ss-navigateright" );
            }

            $item_link = array(
                "icon"   => $item_icon,
                "config" => $link_config
            );

            return $item_link;
        }
    }

– Kyle

[a33]

Great thanks Kyle !!
Worked !

[Kyle – SUPPORT]

No problem

[Mohammad – SUPPORT]

Hi,
Thanks to Kyle.
Mohammad

[a33]

Hi Kyle
The 1st two items in the portfolio still have a few pixels of white under them whilst the one on the right is the correct height with no white space under it .

If i change it to a gallery There is no white space under the 1st two items but i then loose the ability to have the icon when hovered over

[Kyle – SUPPORT]

Can you please change back to portfolio so I can check

– Kyle

[a33]

Thanks,
I have changed it back to masonry (home page)
I also noticed in firefox it doesn’t quite reach the the right hand end of the screen. Chrome reaches the side

[a33]

Hi Kyle
I just noticed one of the images was 2px out so that is probably the issue

[a33]

Hi Kyle

I sorted the White line at the bottom of the portfolio ( it was one of the supplied images was a pixel off)
In firefox the portfolio does not make it to the right edge it is always 2px off. In chrome this is not an issue
I have uploaded an image

Attachments:

You must be logged in to view attached files.

[a33]

Hi Kyle

Looking at dev tools in firefox it looks like the portfolio images are overlapping 1 pixel and the 3rd picture (on the right) needs to be 33.4%

I’m not sure how to edit this to fix it

[Kyle – SUPPORT]

Try adding this to your custom css:

.browser-ff .portfolio-item.col-sm-4 {
  width: 33.4%;
}

– Kyle

[a33]

Hi Kyle
The right hand image drops under the other 2 .. It worked in dev tools though ;( lol

It looks like If the second image and third image where 1px to the right they would be correct?

[Kyle – SUPPORT]

Try different values from 33.3% to 33.4%, for e.g. 33.33%

– Kyle

[a33]

Yes that fixed it !

thanks