How to Use Genesis Featured Widget Amplified to Link to the Image and Add a Lightbox or WordPress's Thickbox (Using Lightbox Evolution) in Genesis Featured Widget Amplified

So recently, someone contacted me to figure out how to make the Genesis Featured Widget Amplified link to the Image, instead of the post. For example, take a Genesis Child Theme like Crystal, Delicious, Manhattan, Minimum, and/or Scribble. Each of these themes have an area of a portfolio or a row of images which link to their respective posts. However, what if you wanted these images to appear in a lightbox/thickbox? What if you wanted these to link to just the image and not the post?

A lot of plugins are built without hooks and filters, which can be rather frustrating for developers because developers love to change things to "improve" them, which really is just making the plugin/widget do what they want instead of what the purpose of the widget/plugin was designed to do. However, the Genesis Featured Widget Amplified plugin has everything, well almost everything, a person would want in a widget of its kind. Furthermore, it has the appropriate hooks and filters to make things happen without having to hack core, hence the beauty of action hooks.

1. Widget Settings

So the first thing we must do is to have the link, link to the image, not the post. So using the Genesis Featured Widget Amplified, you want to ensure that you have selected Show Featured Image and selected Link to Post (being able to change this would be hacking the core of the plugin). We also want to set the instance identification, here, portfolio.

2. Replacing the Linked Image

Now, we want to remove the current function that creates the link and the image, and create one of our own. However, first we want to make sure we are on the home page and that we have the correct instance.

[php]
add_action ( 'gfwa_before_loop' , 'we_check_portfolio' , 10 , 1 );
function we_check_portfolio( $instance ) {
if ( ! is_home() )
return;
elseif ( ( is_home() ) && ( $instance['custom_field'] == 'portfolio' ) ) {

// Remove all GFWA image functions
remove_action( 'gfwa_before_post_content', 'gfwa_do_post_image' , 5 );
remove_action( 'gfwa_before_post_content', 'gfwa_do_post_image' , 5 );
remove_action( 'gfwa_after_post_content', 'gfwa_do_post_image' , 10 );

// Add our custom function
add_action ( 'gfwa_before_post_content', 'gfwa_do_we_post_image', 8, 1 );

// Add functions back
add_action ( 'gfwa_after_loop' , 'we_add_image' , 10 , 1 );
}
}

function gfwa_do_we_post_image ( $instance ) {
if ( $instance['custom_field'] == 'portfolio' ) {
$image = genesis_get_image( array( 'format' => 'html' , 'size' => $instance['image_size'] ) );
$image_id = get_post_thumbnail_id();
$image = sprintf( '<a href="%s" title="%s" class="%s">%s</a>', wp_get_attachment_url( $image_id ), the_title_attribute( 'echo=0' ), esc_attr( $instance['image_alignment'] ), $image );
echo $image;
}
}

function we_add_image ( $instance ) {
add_action( 'gfwa_before_post_content', 'gfwa_do_post_image' , 5 );
add_action( 'gfwa_post_content', 'gfwa_do_post_image' , 5 );
add_action( 'gfwa_after_post_content', 'gfwa_do_post_image' , 10 );
}

function wps_lightbox_js() {
?>
<script>
jQuery(document).ready(function() {
jQuery("img").parent("a").addClass("lightbox");
});
</script>
<?php
}
add_action( 'wp_footer' , 'wps_lightbox_js' );
[/php]

3. Add WordPress's Thickbox

For the plugin, Lightbox Evolution (which is a good lightbox plugin), this person was using the class lightbox was required. However, you can use WordPress's built-in Thickbox, which is used for the Media Library. To use the WordPress Media Library (and not a plugin), replace function wps_lightbox_js() code with the function below:

[php]
function wps_add_thickbox() {
if(!is_admin()){
wp_enqueue_script( 'thickbox' , null , array( ' jquery ' ) );
wp_enqueue_style( 'thickbox.css' , '/' . WPINC . '/js/thickbox/thickbox.css' , null , '1.0' );
}
}
add_action ( 'init' , 'wps_add_thickbox' );

function wps_thickbox_js(){
?>
<script>
jQuery(document).ready(function() {
jQuery("img").parent("a").addClass("thickbox");
});
</script>
<?php
}
add_action( 'wp_footer' , 'wps_thickbox_js' );
[/php]

Word of Caution

You need to make sure that if you use this code, you are inserting images that Link to the File URL, not the Post URL (which I believe is the default).

Here is an example: