How to show description under an inserted image?

3 comments

1. This is actually quite easy: You just hijack the short code handler for image captions, grab the post_content (the image description) and set its content as a value for the attribute caption. Then you call the original shortcode handler.

   The following example requires the shortcode attribute desc set to 1 to make the magic work:

   <?php # -*- coding: utf-8 -*-
   /**
    * Plugin Name: T5 Caption With Description
    * Description: Adds the description to images with a caption if you set <code>desc=1</code> in the shortcode.
    * Version:     2015.03.26
    * Author:      Thomas Scholz <info@toscho.de>
    * Author URI:  http://toscho.de
    * License:     MIT
    * License URI: http://www.opensource.org/licenses/mit-license.php
    */
   
   namespace T5ImagesCaptions;
   
   $callback = __NAMESPACE__ . 'add_description';
   
   // Hijack the native shortcode handlers.
   add_shortcode( 'wp_caption', $callback );
   add_shortcode( 'caption',    $callback );
   
   /**
    * Add image description if needed
    *
    * @param  array $attr
    * @param  null $content
    * @return string
    */
   function add_description( $attr, $content = null )
   {
       if ( needs_description( $attr ) )
           $attr['caption'] = get_description( $attr['id'] );
   
       return img_caption_shortcode( $attr, $content );
   }
   
   /**
    * Check required attribute values
    *
    * @param array $attr
    * @return bool
    */
   function needs_description( Array $attr ) {
   
       if ( empty ( $attr['desc'] ) )
           return FALSE;
   
       if ( 1 > (int) $attr['width'] )
           return FALSE;
   
       return ! empty ( $attr['id'] );
   }
   
   /**
    * Prepare post content (the description)
    *
    * @param  string $attachment_id Usually it looks like 'attachment_123'
    * @return string
    */
   function get_description( $attachment_id ) {
   
       $post_id = str_replace( 'attachment_', '', $attachment_id );
       $img     = get_post( (int) $post_id );
   
       if ( is_a( $img, 'WP_Post' ) )
           return wpautop( $img->post_content );
   
       return '';
   }
   

   Now you add a description …

   

   … use regular caption markup …

   

   … and get the description nicely formatted:

   

   If you add the parameter desc with a value different from 1 to the caption (desc=0 for example) no description will be used.

   Download on GitHub.

   Log in to Reply

2. First of all thanks to toscho for his solution. In case anybody needs the code for his theme instead of using it as a plugin here is the adopted code rewritten as a single function:

   add_shortcode('wp_caption', 'img_caption_add_description');
   add_shortcode('caption', 'img_caption_add_description');
   function img_caption_add_description($attr, $content = null)
   {
       $post_id = str_replace('attachment_', '', $attr['id']);
       $img = get_post((int)$post_id);
   
       if (is_a($img, 'WP_Post')) {
           $attr['caption'] = $img->post_content;
       }
   
       return img_caption_shortcode($attr, $content);
   }
   

   Tested this with WordPress 4.2.3 and it’s working without any problems.

   Log in to Reply

3. I found the solution. I wanted to show description under all pictures. This solution works great.Thanks to https://wordpress.stackexchange.com/users/3687/tom-auger

   <?php
   /*
   Plugin Name: WPSE-45326 Gallery Replacement example
   Plugin URI: https://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();
   

   Log in to Reply