3

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".

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 [gallery link="file" orderby="rand"] , what page or code block is this referencing?

Thanks in advanced

4
  • So the default gallery display (at least in 3.3.1, the latest version as of this writing) is to display only the image (the "gallery icon") and the image caption (the "excerpt"). The Title of the image and the Description are NOT included in the default gallery output when you use the gallery shortcode. So it must be your theme that's adding that stuff in - which makes it harder for us to give you a general answer since each theme could approach it differently.
    – Tom Auger
    Mar 14, 2012 at 13:36
  • @somdow Do you have a link example? This can probably be solved with a few lines of CSS we just need to see the markup you're working with. Mar 14, 2012 at 15:00
  • @sanchothefat how do you propose removing the hyphen with CSS (unless the unlikely event that it's somehow encapsulated within its own container tag)?
    – Tom Auger
    Mar 14, 2012 at 15:03
  • @TomAuger well we don't know yet, I did say 'probably'. An ascii example and the actual HTML/CSS are 2 different things Mar 14, 2012 at 15:18

2 Answers 2

7

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 . "\n\t\t" . $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();
5
  • Looks like a request for such a filter has already been made, and a patch provided that looks like it will do the trick. You can login to trac and lend your support. core.trac.wordpress.org/ticket/14130
    – Tom Auger
    Mar 14, 2012 at 15:00
  • ok ill check that link thanks. and ill try that code a bit later....here is the site gallery page so you get an idea. i went ahead and did the work-around with the manual "br" tags on each items description text lol. but ill check it out either way.
    – somdow
    Mar 15, 2012 at 11:46
  • Tom Auger, ill check on that code you posted a bit later when i get a chance, if it works, ill mark as thee answer.
    – somdow
    Mar 15, 2012 at 11:58
  • Hey @TomAuger, how would you go about adding a class to the anchor tag that wraps around the image? Ive been trying to figure it out but no dice :(
    – Mr.Brown
    May 29, 2012 at 0:01
  • @Mr.Brown probably should be a separate question, but look at line 1177 of post-template.php. You can use the 'wp_get_attachment_link' filter along with a regular expression to add a class to the anchor around the gallery image tag. If you're still having trouble, post up a new question here on WPSE.
    – Tom Auger
    May 29, 2012 at 13:17
0

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.

2
  • 1
    Since you're putting the person's name AND the description all inside the "caption" field of the attachment, then the way you've done it is the ONLY way to get that to break. Based on the "plugin" above, you might consider breaking that up, and putting the person's name inside the "title" field and their role inside the "description" or "caption" fields, and using the plugin above to get them to display. The reason this could be an advantage is that it would allow you to style those two elements differently with CSS, so you could, for example, bold the name, or italicize the role.
    – Tom Auger
    Mar 15, 2012 at 16:58
  • I guess i should have been more clear in the original post. When i enter the title name it does nothing. the only part that shows in the picture was the "caption" hence me putting it all there.
    – somdow
    Mar 16, 2012 at 9:25

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.