[Post] image caption problem (i.e.

  • jasonTakesManhattan

    (@jasontakesmanhattan)


    12 years, 10 months ago

    I’m having an issue with posts in wordpress. Any time I add a caption to an image within my post, it wraps a div around the image and caption. That div has the word “attachment” before the class declaration within the div, which causes a problem b/c then I am unable to target the div class. For example, the following happens when I add a caption to the image in my post:

    <div attachment_122class="wp-caption alignleft" >
<a href="http://dev2.mywebsite.com/wp-content/uploads/2013/07/about-tanks.jpg" rel="lightbox[184]" title="Testing the post again"><img class="size-full wp-image-122" alt="New fermentation tanks at Helltown." src="http://dev2.mywebsite.com/wp-content/uploads/2013/07/about-tanks.jpg" /></a>
<p class="wp-caption-text">New fermentation tanks at Helltown.</p>
</div>

<p style="text-align: left;">his is Photoshop’s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit</p>

    So, if you take a look at the div, you’ll see that it adds attachment_122 before the word “class.” When this happens, I am unable to target the div class of alignleft. I’ve tried:

    .alignleft { float: left; } // no css works here

    But this just doesn’t do anything. No matther what code I put in the alignleft class, nothing happens. So is there any way I can style alignleft when it has attachment_xxx in front of it? Or is there a way I can get rid of that attachment_122 part?

    Whenever I google the issue, no one seems to have the same problem. In every other example I’ve seen, the attachment part is the id, as opposed to being placed before the class declaration. The code would be output like this:

    <div id="attachment_122" class="wp-caption alignleft"></div>

    This would work just fine for me, but I don’t know how to make WordPress do this. Any help would be appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Michael

    (@alchymyth)

    12 years, 10 months ago

    is your theme using any coding to influence captions in any way?

    if yes, check that code; if no, check /wp-inludes/media.php of your WordPress installation;
    look for this line (line 655):

    return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'

    this line’s code might be broken (?)

    what theme are you using?

    Thread Starter jasonTakesManhattan

    (@jasontakesmanhattan)

    12 years, 10 months ago

    I’m building a custom theme, and I started from a blank wordpress theme. I took a look at the media.php file and this is the code for captions:

    function img_caption_shortcode($attr, $content = null) {
	// New-style shortcode with the caption inside the shortcode with the link and image tags.
	if ( ! isset( $attr['caption'] ) ) {
		if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {
			$content = $matches[1];
			$attr['caption'] = trim( $matches[2] );
		}
	}

	// 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 ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
	. do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}

    Is it the variable $id that is adding attachment_xxx before the class? Would something like this possibly work?

    return '<div id="' . $id . '" class="wp-caption ' ...........

    I’m not 100% sure what $id is outputting, but I figure it has to be the attachment name. I just want to assign that attachment name as the id instead of something like attachment_xxxclass=”wp-caption…..

    I also have read that editing the media file could be a problem when updating wordpress, as it will just overwrite the file. Is that the case?

    Thread Starter jasonTakesManhattan

    (@jasontakesmanhattan)

    12 years, 10 months ago

    I tried altering the “return” line above, but that didn’t work either. And just to give you a visual of what is happening in my code, this is the code that is output whenever I add a caption to an image in my post:

    <div class="news-article">

<div attachment_122class="wp-caption alignleft" >
<a href="http://dev2.mysite.com/wp-content/uploads/2013/07/about-tanks.jpg" rel="lightbox[184]" title="Testing the post again"><img class="size-full wp-image-122" alt="New fermentation tanks at Helltown." src="http://dev2.mysite.com/wp-content/uploads/2013/07/about-tanks.jpg" /></a>
<p class="wp-caption-text">New fermentation tanks at Helltown</p></div>
<p style="text-align: left;">his is Photoshop’s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. </p>

</div>

    And again, that problem area is the part the reads:

    <div attachment_class122=”wp-caption alignleft”>

    I can’t style wp-caption or alignleft when it is written like this.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘[Post] image caption problem (i.e.’ is closed to new replies.