WordPress.org

1. mfuchs
   Member
   Posted 1 year ago #

   Hello together!

   When embeding an image with caption into a post or page WordPress assigns an ID and a Style with a width to the DIV which surrounds the image with caption. It outputs the following code:
   

   <div id="attachment_45" class="wp-caption alignnone" style="width: 308px">
   	<img class="size-full wp-image-45 " title="1029" src="http://www.example.com/linkto.jpg" alt="Alt_Text" width="298" height="298" />
   	<p class="wp-caption-text">Caption Text</p>
   </div>
   <p>Regular text here<br />

   I would like to modify the code so that it basically looks like the one below. I would like to be able to just assign my own class to the surrounding DIV, no class to the image and no Paragraph tag for the caption text.
   

   <div class="pic-caption block">
       <img src="http://www.example.com/linkto.jpg" alt="Alt_Text" width="298" height="298" />
       Caption Text
   </div>
   <p>Regular text here<br />

   I tried to figure out how to do that but hit a wall because this is automatically generated within <?php the_content(); ?>.
   I realize that I could just modify my own CSS to get the same look I want but would prefer to modify the output so that it looks like my example above.

   Any help would be highly appreciated!

   Thanks a lot,
   Martin

2. alchymyth
   The Sweeper
   Posted 1 year ago #

   maybe this contains some ideas how to get a lever to modify captions:

   http://wordpress.org/support/topic/wordpress-generated-styling-and-caption-css?replies=11

3. mfuchs
   Member
   Posted 1 year ago #

   This did indeed help. I was able to change the div and remove the paragraph tag by adding the below code to functions.php.

   /*
    * Change default image caption output
    */
   add_shortcode('wp_caption', 'fixed_img_caption_shortcode');
   add_shortcode('caption', 'fixed_img_caption_shortcode');
   function fixed_img_caption_shortcode($attr, $content = null) {
   	// Allow plugins/themes to override the default caption template.
   	$output = apply_filters('img_caption_shortcode', '', $attr, $content);
   	if ( $output != '' ) return $output;
   	extract(shortcode_atts(array(
   		'id'=> '',
   		'align'	=> 'alignnone',
   		'width'	=> '',
   		'caption' => ''), $attr));
   	if ( 1 > (int) $width || empty($caption) )
   	return $content;
   	if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
   	return '<div ' . 'class="pic-caption ' . esc_attr($align)
   	. '">'
   	. do_shortcode( $content )
   	. $caption . '</div>';
   }

   I wasn't able to get rid of the class assigned to the IMG. Any idea how I could do that?

   Thanks so much,
   Martin

Topic Closed

This topic has been closed to new replies.