1

I have a working Lightbox (colorbox) solution for my wordpress images. However I would like to add a custom title based on the image caption and photographer name to the lightbox image.

This works perfectly when adding a title attribute to the image link.

However, how do I add the image caption to the image link.

So that :

<a href="link-to-attachment.jpg" rel="img-lightbox"><img..></a>

becomes

<a href="link-to-attachment.jpg" title="caption of the image" rel="img-lightbox"><img..></a>

For adding the correct rel and class attributes and values I used the the_content filter.

This way I can add default values which are the same for all images. However for the lightbox caption I also need to know which attachment image link I am changing to create the correct caption. Therefor the_content doesn;t seem usable it just changes all a hrefs without knowing which link is related to which attachment id exactly.

I found a lot of solutions using the wp_get_attachment_link filter. But I cannot seem to get this working.

I am hoping I am making a simple mistake. When starting basic: I just added the filter which does nothing more than logging something and return the original value.

Problem is that the filter does not seemed to be called on the page which contains images.

The following code doesn's seem to do anything. I added it to my functions.php

function add_rel_to_gallery($link, $id) {
  error_log("SIMPLE TEST");
  return $link;
}
add_filter( 'wp_get_attachment_link', 'add_rel_to_gallery', 10, 2 );

What am I doing wrong? Or any suggestions how to solve this issue?

1

I found a solution. Since the wp_get_attachment_link does not seem to work I solved this within an already used other filter:img_caption_shortcode

Within this filter function the content variable contains the image link tag. Here a just added the title using a simple search and replace:

$content = str_replace("<a","<a title='".$attr['caption'] . $credit."'", $content);

This way it works perfectly.

1

I modified the gallery shortcode to include the lightbox data-title and data-lightbox attributes as below.

Pop this into your functions.php file and then use [lightboxgallery] instead of the usual [gallery] - all the other shortcode options are the same.

Also removed the default caption display from the thumbnailed gallery.

If you want to display the title instead of the caption field, replace $attachment->post_excerpt with $attachment->post_title Enjoy!

add_shortcode('lightboxgallery', 'lightbox_gallery_shortcode');

/**
 * Builds the Modified Gallery shortcode output with lightbox attributes.
 *
 * @staticvar int $instance
 *
 * @param array $attr {
 *     Attributes of the gallery shortcode.
 *
 *     @type string       $order      Order of the images in the gallery. Default 'ASC'. Accepts 'ASC', 'DESC'.
 *     @type string       $orderby    The field to use when ordering the images. Default 'menu_order ID'.
 *                                    Accepts any valid SQL ORDERBY statement.
 *     @type int          $id         Post ID.
 *     @type string       $itemtag    HTML tag to use for each image in the gallery.
 *                                    Default 'dl', or 'figure' when the theme registers HTML5 gallery support.
 *     @type string       $icontag    HTML tag to use for each image's icon.
 *                                    Default 'dt', or 'div' when the theme registers HTML5 gallery support.
 *     @type string       $captiontag HTML tag to use for each image's caption.
 *                                    Default 'dd', or 'figcaption' when the theme registers HTML5 gallery support.
 *     @type int          $columns    Number of columns of images to display. Default 3.
 *     @type string|array $size       Size of the images to display. Accepts any valid image size, or an array of width
 *                                    and height values in pixels (in that order). Default 'thumbnail'.
 *     @type string       $ids        A comma-separated list of IDs of attachments to display. Default empty.
 *     @type string       $include    A comma-separated list of IDs of attachments to include. Default empty.
 *     @type string       $exclude    A comma-separated list of IDs of attachments to exclude. Default empty.
 *     @type string       $link       What to link each image to. Default empty (links to the attachment page).
 *                                    Accepts 'file', 'none'.
 * }
 * @return string HTML content to display gallery.
 */
function lightbox_gallery_shortcode( $attr ) {
        $post = get_post();

        static $instance = 0;
        $instance++;

        if ( ! empty( $attr['ids'] ) ) {
                // 'ids' is explicitly ordered, unless you specify otherwise.
                if ( empty( $attr['orderby'] ) ) {
                        $attr['orderby'] = 'post__in';
                }
                $attr['include'] = $attr['ids'];
        }

        /**
         * Filter the default gallery shortcode output.
         *
         * If the filtered output isn't empty, it will be used instead of generating
         * the default gallery template.
         *
         * @since 2.5.0
         * @since 4.2.0 The `$instance` parameter was added.
         *
         * @see gallery_shortcode()
         *
         * @param string $output   The gallery output. Default empty.
         * @param array  $attr     Attributes of the gallery shortcode.
         * @param int    $instance Unique numeric ID of this gallery shortcode instance.
         */
        $output = apply_filters( 'post_gallery', '', $attr, $instance );
        if ( $output != '' ) {
                return $output;
        }

        $html5 = current_theme_supports( 'html5', 'gallery' );
        $atts = shortcode_atts( array(
                'order'      => 'ASC',
                'orderby'    => 'menu_order ID',
                'id'         => $post ? $post->ID : 0,
                'itemtag'    => $html5 ? 'figure'     : 'dl',
                'icontag'    => $html5 ? 'div'        : 'dt',
                'captiontag' => $html5 ? 'figcaption' : 'dd',
                'columns'    => 3,
                'size'       => 'thumbnail',
                'include'    => '',
                'exclude'    => '',
                'link'       => ''
        ), $attr, 'gallery' );

        $id = intval( $atts['id'] );

        if ( ! empty( $atts['include'] ) ) {
                $_attachments = get_posts( array( 'include' => $atts['include'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );

                $attachments = array();
                foreach ( $_attachments as $key => $val ) {
                        $attachments[$val->ID] = $_attachments[$key];
                }
        } elseif ( ! empty( $atts['exclude'] ) ) {
                $attachments = get_children( array( 'post_parent' => $id, 'exclude' => $atts['exclude'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );
        } else {
                $attachments = get_children( array( 'post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );
        }

        if ( empty( $attachments ) ) {
                return '';
        }

        if ( is_feed() ) {
                $output = "\n";
                foreach ( $attachments as $att_id => $attachment ) {
                        $output .= wp_get_attachment_link( $att_id, $atts['size'], true ) . "\n";
                }
                return $output;
        }

        $itemtag = tag_escape( $atts['itemtag'] );
        $captiontag = tag_escape( $atts['captiontag'] );
        $icontag = tag_escape( $atts['icontag'] );
        $valid_tags = wp_kses_allowed_html( 'post' );
        if ( ! isset( $valid_tags[ $itemtag ] ) ) {
                $itemtag = 'dl';
        }
        if ( ! isset( $valid_tags[ $captiontag ] ) ) {
                $captiontag = 'dd';
        }
        if ( ! isset( $valid_tags[ $icontag ] ) ) {
                $icontag = 'dt';
        }

        $columns = intval( $atts['columns'] );
        $itemwidth = $columns > 0 ? floor(100/$columns) : 100;
        $float = is_rtl() ? 'right' : 'left';

        $selector = "gallery-{$instance}";

        $gallery_style = '';

        /**
         * Filter whether to print default gallery styles.
         *
         * @since 3.1.0
         *
         * @param bool $print Whether to print default gallery styles.
         *                    Defaults to false if the theme supports HTML5 galleries.
         *                    Otherwise, defaults to true.
         */
        if ( apply_filters( 'use_default_gallery_style', ! $html5 ) ) {
                $gallery_style = "
                <style type='text/css'>
                        #{$selector} {
                                margin: auto;
                        }
                        #{$selector} .gallery-item {
                                float: {$float};
                                margin-top: 10px;
                                text-align: center;
                                width: {$itemwidth}%;
                        }
                        #{$selector} img {
                                border: 2px solid #cfcfcf;
                        }
                        #{$selector} .gallery-caption {
                                margin-left: 0;
                        }
                        /* see gallery_shortcode() in wp-includes/media.php */
                </style>\n\t\t";
        }

        $size_class = sanitize_html_class( $atts['size'] );
        $gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'>";

        /**
         * Filter the default gallery shortcode CSS styles.
         *
         * @since 2.5.0
         *
         * @param string $gallery_style Default CSS styles and opening HTML div container
         *                              for the gallery shortcode output.
         */
        $output = apply_filters( 'gallery_style', $gallery_style . $gallery_div );

        $i = 0;
        foreach ( $attachments as $id => $attachment ) {

                $attr = ( trim( $attachment->post_excerpt ) ) ? array( 'aria-describedby' => "$selector-$id" ) : '';
                if ( ! empty( $atts['link'] ) && 'file' === $atts['link'] ) {
                        $image_output = wp_get_attachment_link( $id, $atts['size'], false, false, false, $attr );
                        $image_output = str_replace('<a href', '<a data-lightbox="gallery-'. $post->ID .'" data-title="'. wptexturize($attachment->post_excerpt) .'" href', $image_output);
                } elseif ( ! empty( $atts['link'] ) && 'none' === $atts['link'] ) {
                        $image_output = wp_get_attachment_image( $id, $atts['size'], false, $attr );
                } else {
                        $image_output = wp_get_attachment_link( $id, $atts['size'], true, false, false, $attr );
                }
                $image_meta  = wp_get_attachment_metadata( $id );

                $orientation = '';
                if ( isset( $image_meta['height'], $image_meta['width'] ) ) {
                        $orientation = ( $image_meta['height'] > $image_meta['width'] ) ? 'portrait' : 'landscape';
                }
                $output .= "<{$itemtag} class='gallery-item'>";
                $output .= "
                        <{$icontag} class='gallery-icon {$orientation}'>
                                $image_output
                        </{$icontag}>";
                $output .= "</{$itemtag}>";
                if ( ! $html5 && $columns > 0 && ++$i % $columns == 0 ) {
                        $output .= '<br style="clear: both" />';
                }
        }

        if ( ! $html5 && $columns > 0 && $i % $columns !== 0 ) {
                $output .= "
                        <br style='clear: both' />";
        }

        $output .= "
                </div>\n";

        return $output;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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