-1

How can I make all gallery images to open the high resolution image in a new window?

2
  • Do you mean a Thickbox? Please improve your question.
    – fuxia
    May 3, 2012 at 10:26
  • not a thickbox, I want when a user clicks on a photo in a gallery image from a post to open a new window to display the full size photo.
    – Mario
    May 3, 2012 at 19:06

2 Answers 2

8

(Update 04.05.2012: Include captions)

Let's start with a solution …

There is no filter especially for gallery image links. There is also no filter for the gallery shortcode output. So we have to fake one:

add_action( 'after_setup_theme', 'wpse_50911_replace_img_shortcodes' );

/**
 * Replace the default shortcode handlers.
 *
 * @return void
 */
function wpse_50911_replace_img_shortcodes()
{
    remove_shortcode( 'gallery', 'gallery_shortcode' );
    add_shortcode( 'gallery', 'wpse_50911_gallery_shortcode' );

    remove_shortcode( 'caption', 'img_caption_shortcode' );
    remove_shortcode( 'wp_caption', 'img_caption_shortcode' );
    add_shortcode( 'caption', 'wpse_50911_caption_shortcode' );
    add_shortcode( 'wp_caption', 'wpse_50911_caption_shortcode' );
}

What it does: It replaces the default shortcode handlers for [gallery], [caption] and [wp_caption]. Now we have to write the replacement functions. That's actually pretty easy because we let WordPress do (almost) all the work:

/**
 * Add the new attribute to the gallery.
 *
 * @param  array $attr Shortcode attributes
 * @return string
 */
function wpse_50911_gallery_shortcode( $attr )
{
    // Let WordPress create the regular gallery …
    $gallery = gallery_shortcode( $attr );
    // … and add the target attribute to all links.
    $gallery = str_replace( '<a ', '<a target="_blank" ', $gallery );

    return $gallery;
}

/**
 * Add the new attribute to the caption.
 *
 * @param  array  $attr    Shortcode attributes
 * @param  string $content Caption text
 * @return string
 */
function wpse_50911_caption_shortcode( $attr, $content = NULL )
{
    $caption = img_caption_shortcode( $attr, $content );
    $caption = str_replace( '<a ', '<a target="_blank" ', $caption );
    return $caption;
}

What it does: It's delegating the shortcode work to the native WordPress functions. Then it takes the output and inserts the attribute target="_blank". And then it returns the output to the page.

Done. When you insert a gallery or a caption make sure the links point to the file URI, not to an attachment page.

Caveats

  • The new window will break the back button. That's very annoying for users of screen readers or some mobile devices.
  • Safari mobile once could not open more than seven windows (not sure if this still true) and just refused to open a new one when the limit was reached. A click on such a link may do nothing.
  • Some users just hate forced new tabs/windows. I'm one of those. :)
  • If you use another plugin to change the gallery output it will probably not work anymore.

Do not use this code … unless you are forced with a lot of money to do it.

16
  • Yes, safari still not opening more tabs. Might be that every tab is running his own instance of the mobile browser and memory would be gone after that.
    – kaiser
    May 4, 2012 at 0:02
  • thanks man ! I will try it. I need this because I have high resolution images and they can't be displayed in a lightbox. And many users come to download the images so this way they can download more images easily without losing the current page.
    – Mario
    May 4, 2012 at 1:34
  • which php file I have to modify?
    – Mario
    May 4, 2012 at 1:41
  • Your theme's functions.php. You can put it into a plugin too.
    – fuxia
    May 4, 2012 at 1:53
  • I have added both code snippets to theme functions.php but the images open in the same window.
    – Mario
    May 4, 2012 at 1:59
2

Late answer

Here's a slightly "improved/shortened" version of @toscho code

Plugin

Not that I'm a big fan of that idea, I just like the links_add_target() function.

<?php
/* Plugin Name: (#50911) Open gallery img in new window/tab */

add_action( 'after_setup_theme', 'wpse50911_replace_img_shortcodes' );
function wpse50911_replace_img_shortcodes()
{
    remove_shortcode( 'gallery', 'gallery_shortcode' );
    add_shortcode( 'gallery', 'wpse50911_gallery_shortcode' );

    remove_shortcode( 'caption', 'img_caption_shortcode' );
    add_shortcode( 'caption', 'wpse50911_caption_shortcode' );

    remove_shortcode( 'wp_caption', 'img_caption_shortcode' );
    add_shortcode( 'wp_caption', 'wpse50911_caption_shortcode' );
}
function wpse50911_gallery_shortcode( $attr )
{
    return links_add_target( gallery_shortcode( $attr ) );
}
function wpse50911_caption_shortcode( $attr, $content = null)
{
    return img_caption_shortcode( $attr, links_add_target( $content ) );
}
1
  • 1
    +1 for finding a usage for the links_add_target() core function ;-)
    – birgire
    Feb 8, 2015 at 14:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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