How do you modify the HTML output of a Gallery item (using the gallery shortcode)?

4 Views

Im a bit lost on this simple problem so i thought id come and ask the pros. Ive just been told by my client that on their sites gallery, the name and description are on the same line.

so for example if the picture is called ABC, and the description is “123”.

Read More

the output is “ABC-123” all on one line.so itd look like: 

 --------
| Picture |
 --------
ABC-123

She wants the name on one line, and the description on another, like so: 

 --------
| Picture |
 --------
ABC

123

problem is that, i dont even know what im looking for as far as how to edit the code to make this simple change.

On the output code id just enter a quick ‘br’ tag or something like that but again, i dont know where to make this change. As a work around, i went ahead on my local server and in the galleries picture caption area, i put “ABC
123 ” and it worked. it put the name and description on 2 lines but there are A LOT of images on that gallery and im sure theres something more cleaner and elegant than this workaround lol.

any ideas on where i can edit the code?? im using the latest build of WP and all although my theme is custom but its basically default and nothing crazy about it.

im just wondering when you add the gallery code, for example , what page or code block is this referencing?

Thanks in advanced

Post Views: 4

Related posts

Leave a Reply

2 comments

  1. Let’s assume that your theme is NOT rolling its own gallery shortcode, and let’s assume that you’re using the [gallery] shortcode rather than the ‘gallery’ post format here. What you’re looking for is the ‘gallery_shortcode’ function within wp-includes/media.php around line 750 (as of 3.3.1). That’s where the HTML output of your gallery items is hard-coded.

    Of course, we can’t (well, we really shouldn’t) edit or alter any of the WordPress core files, so we have to look at other ways to hook into, filter or otherwise enhance the built-in features with our own to add the ‘title’ and ‘description’ information you want for each attachment. Unfortunately the way the gallery shortcode was coded, there’s no convenient filter that allows you to add to the content of each gallery item (which makes me think that it might be not a bad idea to submit an enhancement request and a patch… hmm…). So what we have to do instead is replace the entire shortcode function wholesale.

    That’s not as hard as it sounds, because we can just copy and paste the built-in code into our own plugin, and then add/modify/mutilate whatever we want.

    Here’s how you would do that. In order to make use of this code, simply create a file called ‘WPSE45326_Gallery_Replacement.php” inside your plugins folder. Then you have to go into your Admin back-end and activate the new plugin. Then, just make sure the images have a Description and a Title.

    Note: try this on a Vanilla WordPress install, first. If it works there, but not on your client’s site, then it’s because the theme you’re using is rolling its own code. That would make things more complicated.

    <?php
/*
Plugin Name: WPSE-45326 Gallery Replacement example
Plugin URI: http://wordpress.stackexchange.com/questions/45326
Description: A plugin to demonstrate how to replace the default 'gallery' shortcode and add additional HTML tags for more customization.
Version: 1.0
Author: Tom Auger
Author URI: http://www.tomauger.com
License: GPL2
*/

class wpse_45326_Gallery_Replacement {
    function __construct(){
        // Hook on the plugins-loaded action since it's the first real action hook that's available to us.
        // However, if you're using a theme and want to replace that theme's `gallery` custom shortcode,
        // you may need to use another action. Search through your parent theme's files for 'gallery' and see
        // what hook it's using to define it's gallery shortcode, so you can make sure this code runs AFTER their code.
        add_action( "init", array( __CLASS__, "init" ) );
    }

    function init(){
        remove_shortcode( 'gallery' ); // Remove the default gallery shortcode implementation
        add_shortcode( 'gallery', array( __CLASS__, "gallery_shortcode" ) ); // And replace it with our own!
    }

    /**
    * The Gallery shortcode.
    *
    * This has been taken verbatim from wp-includes/media.php. There's a lot of good stuff in there.
    * All you want to do is add some more HTML to it, and since (for some reason) they didn't provide more
    * filters to be able to add, we have to replace the Gallery shortcode wholesale.
    *
    * @param array $attr Attributes of the shortcode.
    * @return string HTML content to display gallery.
    */
    function gallery_shortcode($attr) {
        global $post;

        static $instance = 0;
        $instance++;

        $output = apply_filters('post_gallery', '', $attr);
        if ( $output != '' )
            return $output;

        if ( isset( $attr['orderby'] ) ) {
            $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
            if ( !$attr['orderby'] )
                unset( $attr['orderby'] );
        }

        // NOTE: These are all the 'options' you can pass in through the shortcode definition, eg: [gallery itemtag='p']
        extract(shortcode_atts(array(
            'order'      => 'ASC',
            'orderby'    => 'menu_order ID',
            'id'         => $post->ID,
            'itemtag'    => 'dl',
            'icontag'    => 'dt',
            'captiontag' => 'dd',
            'columns'    => 3,
            'size'       => 'thumbnail',
            'include'    => '',
            'exclude'    => '',
            // Here's the new options stuff we added to the shortcode defaults
            'titletag'  => 'p',
            'descriptiontag' => 'p'
        ), $attr));

        $id = intval($id);
        if ( 'RAND' == $order )
            $orderby = 'none';

        if ( !empty($include) ) {
            $include = preg_replace( '/[^0-9,]+/', '', $include );
            $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );

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

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

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

        $itemtag = tag_escape($itemtag);
        $captiontag = tag_escape($captiontag);
        $columns = intval($columns);
        $itemwidth = $columns > 0 ? floor(100/$columns) : 100;
        $float = is_rtl() ? 'right' : 'left';

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

        $gallery_style = $gallery_div = '';
        if ( apply_filters( 'use_default_gallery_style', true ) )
            $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;
                }
            </style>
            <!-- see gallery_shortcode() in wp-includes/media.php -->";
        $size_class = sanitize_html_class( $size );
        $gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'>";
        $output = apply_filters( 'gallery_style', $gallery_style . "ntt" . $gallery_div );

        $i = 0;
        foreach ( $attachments as $id => $attachment ) {
            $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);

            $output .= "<{$itemtag} class='gallery-item'>";
            $output .= "
                <{$icontag} class='gallery-icon'>
                    $link
                </{$icontag}>";

            // MODIFICATION: include the title and description HTML if we've supplied the relevant shortcode parameters (titletag, descriptiontag)
            if ( $captiontag ) {
                $output .= "
                    <{$captiontag} class='wp-caption-text gallery-caption'>";
                // The CAPTION, if there is one
                if ( trim( $attachment->post_excerpt ) ) {
                    $output .= "
                        " . wptexturize($attachment->post_excerpt);
                }

                // The TITLE, if we've not made the 'titletag' param blank
                if ( $titletag ){
                    $output .= "
                        <{$titletag} class="gallery-item-title">" . $attachment->post_title . "</{$titletag}>";
                }

                // The DESCRIPTION, if we've not specified a blank 'descriptiontag'
                if ( $descriptiontag ){
                    $output .= "
                        <{$descriptiontag} class="gallery-item-description">" . wptexturize( $attachment->post_content ) . "</{$descriptiontag}>";
                }

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

        $output .= "
                <br style='clear: both;' />
            </div>n";

        return $output;
    }
}

new wpse_45326_Gallery_Replacement();

  2. Well just in case, anyone is looking at this, i solved the problem by manually inserting a <br/> tag in the caption area.

    so for example if the pictures content has this sample text "ABC-123" which outputs this

     --------
| Picture |
 --------
ABC-123

    then in the caption i entered something like this ABC<br/>123 which outputs this

     --------
| Picture |
 --------
ABC

123

    This is the simple gallery (with shortcode) in Wp to which i was referring to and was asked for above http://deadsilencethemovie.com/?page_id=29 (after the br tag) but again, this is just a workaround until something more legit drops for Wp.(if it hasnt already). Thanks all.