Changing WP's Caption Setup

  • Resolved Will White

    (@willpcg)


    14 years, 4 months ago

    Hey Guys,

    I’m working on a site for a church and they’ve asked for a staff page that allows a mouse-over effect on the images of their staff. I’ve come up with a fix that would keep them from having to edit html in order for it to work.

    The plan is to find the code in the WP files that creates the div that contains the image and its caption, and move the caption ‘paragraph’ inside the link code that houses the image. That way I can use :hover to display it when a user mouses over it.

    However I can’t seem to find the relevant code. The file ‘media.php’ has the build for the div itself – but references ‘do_shortcode($content);’ to build the link/image. I can’t seem to find where that variable is coming from, because its not instantiated in the media.php file.

    I’m still relatively new to changing native wp files so if there is a better way of doing this (or a way of doing this without altering any WP files) I’d certainly appreciate any insight.

    Thanks in advance!

    —
    https://severnruncom.ipower.com/closer-look/our-staff/
    The caption right now is styled to cover the images. Eventually the display on them will be set to none and they will only display once a user mouses over a picture.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Will White

    (@willpcg)

    I’m still digging but not having any luck.

    For reference this is the structure captioned images output:

    <div id="attachment_130" class="wp-caption alignnone" style="width: 100px">
       <a href="mailto:[email protected]">
              <img class="size-full wp-image-130" src="https://severnruncom.ipower.com/wp-content/uploads/2010/06/Nathan.jpg" alt="" width="90" />
       </a>
       <p class="wp-caption-text">Staff Member 1</p>
</div>

    And what I’m aiming to have it output as:

    <div id="attachment_130" class="wp-caption alignnone" style="width: 100px">
       <a href="mailto:[email protected]">
             <img class="size-full wp-image-130" src="https://severnruncom.ipower.com/wp-content/uploads/2010/06/Nathan.jpg" alt="" width="90" />
              <p class="wp-caption-text">Staff Member 1</p>
       </a>
</div>

    Thread Starter Will White

    (@willpcg)

    Bump.

    Thread Starter Will White

    (@willpcg)

    For anyone interested:

    I finally figured it out. In the file ‘media.php’ in your wp-includes folder on line 650 you can alter the string containing the image and the link enclosing it. In this case I removed the last 4 characters (the closing tag) and added it to the div creation return.

    function 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;

	$holder = substr( $content, 0, -4 );

	if ( $id ) $id = 'id="' . esc_attr($id) . '" ';

	return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
	. do_shortcode( $holder ) . '<p class="wp-caption-text">' . $caption . '</p></a></div>';
}

    Now the caption sits within the link you create for an image, and can be edited to pop up as a :hover effect via css.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Changing WP's Caption Setup’ is closed to new replies.

Tags