Posted 4 years ago #
I'm having a issue with the new image caption feature in WordPress 2.6. Apparently it is automatically adding 10px to the width of the caption div surrounding the image:
<div class="wp-caption alignright" style="width: 347px"><img style="width: 337px; height: 450px;"...
Does anyone know why this is, and how I might fix it so that the width of the caption div is the same as the image?
Posted 4 years ago #
I second that ;-)
I'm currently subtracting 10px in the caption tag, but that also feels just like a weird workaround.
Posted 4 years ago #
width: auto;
Posted 4 years ago #
So where would you put "width: auto;"?
The thing is that the new caption feature writes something like that:
[caption id="attachment_XY" align="alignright" width="100" caption="This is a caption"]<img src="example.com/image.jpg" alt="This is a caption" title="XYZ" width="100" height="100" class="size-full wp-image-XY" />[/caption]Note that the first width (that goes into the div in the output) is the same as the width of the image in the editor. But as soon as you post it, 10px are automatically added to the width of the div (so in the example above, the div would be 110px wide, although the image is only 100px).
Posted 4 years ago #
the forum is more for a helping hand, not really to teach you everything. It is great you want to to run your own site, but this will involve you learning basic code, esspecially CSS. Lot of sites out that explaining with tutorials and examples CSS. CSS is universal and not just WP.
Posted 4 years ago #
I don't get you. I do think this is a WP specific topic, not a general CSS thing. Did you read my last posting?
Posted 4 years ago #
So where would you put "width: auto;"?
This is your answer. If you understand CSS you know where to put it. If you don't know CSS you could badly screw things up. Read about the basics of CSS and you have your problem sorted.
Posted 4 years ago #
Ok, but I still don't understand why WP adds these 10px.
Posted 4 years ago #
Because the caption box surrounds the whole image, like the edge on a polaroid picture. It's got 5 px of gray on each side. Look at the default theme, for example.
The caption shortcode itself does this. No fix other than replacing the shortcode with a plugin or hacking the core code. Look at the function img_caption_shortcode in the media.php file.
Posted 4 years ago #
Ok, that explains it perfectly! Thanks a lot.
@greyisgood: width: auto!important; for .wp-caption worked for me. Sorry for bothering.
Posted 4 years ago #
Setting width:auto; (or no width) on the caption div would make it as wide as the content when the caption is centered, so the frame won't "stick" around the image.
Posted 4 years ago #
Actually, setting width: auto; for floated elements is not valid CSS2, see:
http://www.w3.org/TR/CSS2/visuren.html#floats
(CSS 2.1 changes this to allow auto on floats, but it is still only a candidate recommendation. It would use "shrink to fit" width in this case.)
So, while setting width: auto; may appear to work in your browser, it is actually incorrect and not cross-browser safe.
So, WordPress is doing the right thing by hardcoding a width -- but it is doing something supremely annoying by randomly adding 10px instead of just leaving the width alone! To me this "feature" is a bug that WordPress should rectify or at least make configurable.
There is a WP file you can easily hack if you want to remove this behavior. See this bug report for more info:
Posted 4 years ago #
instead of hacking the core, a simple plugin should do the trick. try this for size. install in the normal way.
<?php
/**
* @package FixImageMargins
* @author Justin Adie
* @version 0.1.0
*/
/*
Plugin Name: FixImageMargins
Plugin URI: #
Description: removes the silly 10px margin from the new caption based images
Author: Justin Adie
Version: 0.1.0
Author URI: http://rathercurious.net
*/
class fixImageMargins{
public $xs = 0; //change this to change the amount of extra spacing
public function __construct(){
add_filter('img_caption_shortcode', array(&$this, 'fixme'), 10, 3);
}
public function fixme($x=null, $attr, $content){
extract(shortcode_atts(array(
'id' => '',
'align' => 'alignnone',
'width' => '',
'caption' => ''
), $attr));
if ( 1 > (int) $width || empty($caption) ) {
return $content;
}
if ( $id ) $id = 'id="' . $id . '" ';
return '<div ' . $id . 'class="wp-caption ' . $align . '" style="width: ' . ((int) $width + $this->xs) . 'px">'
. $content . '<p class="wp-caption-text">' . $caption . '</p></div>';
}
}
$fixImageMargins = new fixImageMargins();
?>
Posted 4 years ago #
Hey! I tried you plugin which worked successfully on a localhost, but when I put it online, it says:
Parse error: parse error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /myweb/fiximagemargins.php on line 16
Any ideas? Thanks a lot for this code, I hope they will fix this in the next version :-)
Posted 4 years ago #
Any ideas at all?
Posted 4 years ago #
Worked for me on dreamhost.
Posted 4 years ago #
Freakin sweeeet! thanks.
Posted 4 years ago #
@revolutionfrance:
Ah, damn... yeah on a client's site on MediaTemple, I'm getting the same error...
dreamhost is fine... :-/
Posted 4 years ago #
Ah found it.
This plugin only works php 5. Works now. woo!
And, commenting on this, if wp devels are going to fix this I would get rid of the hardcoded inline style too.
Posted 4 years ago #
@jpadie how do i install this plugin? i'm not familiar with installation from a text file. thanks.
Posted 4 years ago #
This hardcoded 10px padding is really annoying. WP devs, please remove these kinds of dabbling with the style.
The plugin works great though, thanks jpadie.
Posted 4 years ago #
Great plugin! Those extra hard coded 10 pixels have been driving me bonkers!
Oh, and reverb09, just save the text file as FixImageMargins.php and upload it to your plugins directory. Then you can activate it from your admin panel.
Posted 4 years ago #
@reverb09
save the text to a new file in wp-content/plugins. does not matter what it's called. as The Monkeyboy says.
@revolutionfrance
the code is OOP and so properly compatible only with php5. it's easy enough to convert to php4 though. delete the word 'public' in the method declarations and change 'public' to 'var' in the property declaration
@Xamataca
i agree- this is a rare example of very poor core coding.
Another hour gone to WordPress issues! (not happy)
I wanted to change this frame around the images, too. As an artist and cartoonist, would like to note that the caption below is a great addition, but the grey on top and sides is distracting, and too thick.
Anyway, am not able to change to php4, jpadie.
Here is what I did: it mentions public 3 times, so changed according to you and instructions I found online to:
var $xs = 0; //change this to change the amount of extra spacing
function fixImageMargins(){
add_filter('img_caption_shortcode', array(&$this, 'fixme'), 10, 3);
}
function fixme($x=null, $attr, $content){But am still getting error message in 2.7.1. I don't understand php, am just copying.
Anyone can help with this php coding to get it to work in php4?
Thanks!
Oops, just tried to change something else, too, so to help others, for php it should be:
var $xs = 0; //change this to change the amount of extra spacing
function fixImageMargins(){
add_filter('img_caption_shortcode', array(&$this, 'fixme'), 10, 3);
}
function fixImageMargins($x=null, $attr, $content){And it seems to work!
The top of the frame is still a little thicker than I would like, but it's great to have the side frames only one px borders.
This topic has been closed to new replies.
