Afternoon,

I have finally loaded WP 2.7 on my server and now starting the long process of migration. However I've an issue that I also had with 2.6 and it's regarding images.

You can see what I'm dealing with at the moment by going here:

http://www.followtheboat.com/index.php/2002/05/11/a-new-post/

You can see that both my left aligned and right-aligned images have an extra 10px added to the right, or, rather, the container is 10px bigger and the image is forced top-left. When I look at the code I can see that the image style is set to 210px when the image itself is 200px. Here is the CSS for all my images, starting with the code for the align left and align right images that are affected:

CODE

.wp-caption.alignright {background-color: #443713;  font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #FFFFFF; margin-left:15px; border: thin solid #443713;}
.wp-caption.alignleft  {background-color: #443713;  font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #FFFFFF;    margin-right:15px; border: thin solid #443713;}
/* CURRENT IMAGE*/
img.alignright {float:right;margin:0 0 1em 1em;    border: thin solid #443713;margin:5px;}
img.alignleft {float:left;margin:0 1em 1em 0;border: medium solid #443713; margin:5px;}
img.aligncenter {display: block;margin-left: auto;margin-right: auto;border: thin solid #443713;margin:5px;}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0; border: medium solid #6d5820;}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto;border: medium solid #6d5820;}
/*THUMBNAIL IMAGE*/
.imgtfe {border: medium solid #443713;}
/* OTHER IMAGES*/
.ranimagecontainer {width:600px; float:left; text-align:center;border: thin double #6d5821; background-color:#443713;}
.ranimage {position: relative; background: url(images/rlogimage.gif) no-repeat left bottom; z-index:5; background-repeat no-repeat; height:60px;}
.picleft{background-color: #453713;border: thin solid #7c6426;padding: 5px;margin-right:15px;}
img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; border: medium solid #FF0000;}

If anyone could help I'd be really grateful as this is the last major annoyance I have to deal with before I started migrating my webiste.

Thank you!

jpadie (TechnicalUser)

12 Dec 08 13:28

if you have a look at the source code, there is a div around the image and the caption that has an inline style set with a width attribute of 210px. it looks to me as though this is the issue.

you have two potential fixes available.

1, go remove the offending style attribute from the divs
2. add this to the .wp-caption.alignright and left css

CODE

width: 200px !important;

this still leaves the 1px brown border around the image, of course.

or have i missed the point?

followtheboat (Programmer)

12 Dec 08 13:59

Hi J,

Er, 'fraid to admit it but you have this time. I didn't create the attribute of that style=210px, it's done on the fly by WP I think; and if I add a defined width then I can only use that class for an image that is 200px wide. The width of my images that use this class is completely varied.

My problem is this style attribute. I've no idea why it is creating a style of 210px width or where it comes from.

Difficult to find it without posting up my entire CSS sheet (wouldn't want to do that on this forum but of course you can see it in the page code) but got any tips on HOW to search for this tag or WHAT I should be looking for?

jpadie (TechnicalUser)

12 Dec 08 14:27

i have your style sheet. that's not the problem.

the solution is as I posted. from an html or css point of view.

from the WP point of view, i will need to look into how the images are being generated and inserted. I assume you are using the flash media library?

followtheboat (Programmer)

12 Dec 08 14:49

Yep. No image plug-ins, just the standard 2.7 flash upload feature.

jpadie (TechnicalUser)

12 Dec 08 16:13

if you upload and insert an image into the code, and switch into html view, do you see the style attribute for width being 10px bigger in the div than the image? on my systems the width values are identical.

jpadie (TechnicalUser)

12 Dec 08 16:18

scrap that. i'm getting the same behaviour now. one step closer to a solution.

jpadie (TechnicalUser)

12 Dec 08 16:51

ok. found the problem. and it's silly.

bunch of solutions.

1. centre everything.  add text-align:center !important; to the alignright/left css  this at least centres things and makes the border look neater.

2. hack the wp-core.  edit line 580 of wp-includes/media.php and change the reference from 10 to 0

3. use a plugin to create the same effect as item 2. the plugin is pretty simple. i have not tested this (really) but it should work... remember to do the normal thing of uploading to wp-plugins and enabling.  feel free to shove in a directory or just in the wp-plugin dir itself. the name of the file does not matter so long as it is .php and unique.

CODE

<?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, 2));
    }
    public function fixme($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();

?>

followtheboat (Programmer)

12 Dec 08 17:19

Justin, you are a genius. I can't believe you have gone to all this trouble to sort this out, I really appreciate it.

I tried the plug-in first, out of curiosity, though that didn't appear to work so I went for option two and changed the code (must make a note to keep an eye out for it when installing future upgrades). I'm curious, what is this !important hack you are using? I've not seen this before.

I'm very excited about this as today was the first day of migration and this problem was my last one BIG annoyance that was bugging me. Seriously, you've made my day.

Sincere thanks.

jpadie (TechnicalUser)

12 Dec 08 18:44

sorry. the plugin is def the right answer but i made a few schoolboy errors. this should work for you

CODE

<?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();

?>

followtheboat (Programmer)

12 Dec 08 18:54

Getting an error:

Quote:
Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, 'Array' was given in E:\domains\f\followtheboat.com\user\htdocs\wp-includes\plugin.php on line 166

I've left it up on http://www.followtheboat.com/index.php for you to see...

jpadie (TechnicalUser)

13 Dec 08 2:32

my fault again, probably too tired. missed a bracket.

change the __construct method as shown

CODE

public function __construct(){
add_filter('img_caption_shortcode', array(&$this, 'fixme'), 10, 3);
}

followtheboat (Programmer)

13 Dec 08 5:25

Spot on. Once again ;)

Start A New Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Promoting, selling, recruiting and student posting
are not allowed in the forums.
Posting Policies

LINK TO THIS FORUM!

(Add Stickiness To Your Site By Linking To This Professionally Managed Technical Forum)

TITLE: WordPress Forum at Tek-Tips

URL: http://www.tek-tips.com/threadminder.cfm?pid=1716

DESCRIPTION: WordPress technical support forum and mutual help system for computer professionals. Selling and recruiting forbidden.

Back To Forum

Back To WordPress

Member Login

Come Join Us!

Partner With Us!

Member Feedback

Geography

Unknown style tag 10px bigger than image - ugly margin

CODE

CODE

CODE

CODE

Quote:

CODE

Start A New Thread

Posting in the Tek-Tips forums is a member-only feature.

Promoting, selling, recruiting and student postingare not allowed in the forums.Posting Policies

LINK TO THIS FORUM!

Back To Forum

Promoting, selling, recruiting and student posting
are not allowed in the forums.
Posting Policies