Remove hyperlink on gallery shortcode

1 Views

I use a gallery shortcode in my index.php (theme directory) to display 3 boxes of images. The images are fetched from my Media. 

<div class="well well-clear" style="padding-bottom: 0; margin-bottom: 0;">
<?php echo do_shortcode(''); ?>
</div>

By default these images have a hyperlink that when I click on it, a page will open and show the bigger version of this image. I don’t want this to happen. Is there any option that I need to modify so that it will not hyperlink?

Read More

I’m new to WordPress, please don’t be rough on me.

Post Views: 1

Related posts

2 comments

  1. Update:

    It looks like there exists an attribute link="none" after all 😉

    For example: 

    [gallery link="none" ids="165,166,167"]

    So we don’t need to reinvent the wheel, like in my previous answers 😉

    Previous: Plugin to handle link="no" in the gallery shortcode:

    Here’s a demo plugin to add the option to remove the image links in the gallery.

    You can use the link="no" option to remove the links, for example:

    [gallery link="no" ids="165,166,167"]

    Create the folder /wp-content/plugins/gallery-without-links/ and add the file gallery-without-links.php to it, containing the following code:

    <?php
/**
 * Plugin Name: Gallery without links
 * Plugin URI: http://wordpress.stackexchange.com/a/130349/26350
 * Description: Gallery with the link='no' option to remove links.
 */

/**
 * Init the WPSE_No_Gallery_Links class
 */
if( ! class_exists( 'WPSE_No_Gallery_Links' ) ):

    add_action( 'init', array( 'WPSE_No_Gallery_Links', 'get_instance' ) );

    class WPSE_No_Gallery_Links
    {
        static private $instance    = NULL;
        protected $nrofimgs         = 0;
        protected $counter      = 0;

        public function __construct()
        {
            add_filter( 'shortcode_atts_gallery', array( $this, 'shortcode_atts_gallery' ) );
        }

        static public function get_instance() 
        {        
            if ( NULL === self :: $instance )
               self :: $instance = new self;

            return self :: $instance;
        }


        public function wp_get_attachment_link( $link ){
            $this->counter++;
            if( $this->counter >= $this->nrofimgs )
            {
                $this->counter = 0;
                remove_action( 'wp_get_attachment_link', array( $this, 'wp_get_attachment_link' ) );
            }
            return strip_tags( $link, '<img>' );
        }

        public function shortcode_atts_gallery( $atts ) {
            if( 'no' === $atts['link'] )
            {
                if( isset( $atts['include'] ) )
                {
                    $this->nrofimgs = count( explode( ',', $atts['include'] ) );    
                    add_action( 'wp_get_attachment_link', array( $this, 'wp_get_attachment_link' ) );
                }
            }
            return $atts;
        }
    } // end of class

endif;

    Previous answer:

    Here is one idea:

    The gallery shortcode callback is using the wp_get_attachment_link() function to generate the link to each image in the gallery. We can therefore use the wp_get_attachment_link filter to strip out the <a> tags.

    You could then modify your code snippet to:

    <div class="well well-clear" style="padding-bottom: 0; margin-bottom: 0;">
    <?php     
       add_action( 'wp_get_attachment_link', 'custom_wp_get_attachment_link' );
       echo do_shortcode('[gallery ids="165,166,167"]'); 
       remove_action( 'wp_get_attachment_link', 'custom_wp_get_attachment_link' );
    ?>
</div>

    where:

    /**
 * Strip all tags except the <img> tag
 */
function custom_wp_get_attachment_link( $link )
{
    return strip_tags( $link, '<img>' );
}

  2. I just had a similar problem, and I used CSS targeted at the ul applying pointer-events: none;.
    I’m using the gallery block and my current WordPress version allows to introduce custom CSS directly on each block, so I did just that. No need to do CSS hunting.

Comments are closed.