WordPress.org

Support

Support » Themes and Templates » Twenty Ten 1.1 ignoring image width resizing

Twenty Ten 1.1 ignoring image width resizing

  • The Twenty Ten v1.1 upgrade has resulted in the width resizing information of images being ignored; the images now overlap the associated outline frame and adjacent text (checked in Firefox, IE, Chrome). They appear correctly displayed in the visual editor but not when posted.

    The html in the post is in the following style:
    [caption id="attachment_1460" align="alignleft" width="200" caption="Almeida"]<img class=”size-medium wp-image-1460″ title=”Almeida” src=”http://…/Almeida_village-300×225.jpg” alt=”Almeida” width=”200″ height=”150″ />[/caption]

    The displayed outline frame has a width 200 but the image is displayed in the original size ( it is 300 x 225 pixels pixels). The outline frame is resized vertically to the 225 pixel height of the image.

    I reverted back to v1.0 and the images are now back to their correct required width (200 pixels) and no longer overlapping the text and frame.

Viewing 15 replies - 1 through 15 (of 17 total)
  • From a Google search it seems there are others who are having the similar problems with the width (and height) in old posts following the Twenty Ten v1.1 upgrade.

    I have now discovered the problem is a change in style.css between 1.0 and 1.1
    v1.0
    #content img {
    margin: 0;
    max-width: 640px;
    }

    v1.1
    #content img {
    margin: 0;
    height: auto;
    max-width: 640px;
    width: auto;
    }

    Unfortunately it seems it is not possible to put a command in a child theme to disable the width: auto; and height: auto; so it is necessary to edit the v1.1 style.css to remove them.

    Moderator Andrew Nacin

    @nacin

    Lead Developer

    Hi Andrew – I noticed a patch was added to the ticket you referenced. I’m something of a newbie, but how do I apply the .diff patch file that corrects the issue to my installation of WP?

    Thanks,
    Greg

    After implementing the changes suggested by namklim, image resizing works great in Firefox, but not in IE. Images look distorted, probably due to issues with proportions. My guess is that this was changed in v1.1 in order to make images look OK in IE.

    Is there a way to fix this issue for both FF and IE?

    Harm Jans – I don’t have image problems with Chrome, FF, IE 8, Opera or Safari after making the change.

    Has this fix been released in a theme patch yet? The problem is still persisting.

    This is an older post, but the images are breaking the caption box

    The Better Angels of Our Nature

    (look for the image of Lewis A. Armistead)

    Michael

    @alchymyth

    Forum Moderator

    edit style.css and change this style:

    /* =Images
    -------------------------------------------------------------- */
    
    #content img {
    	margin: 0;
    	height: auto;
    	max-width: 640px;
    	width: auto;
    }

    remove the line with width: auto;

    That fixed it, but will it fall out in the next update or will the style edit remain?

    Michael

    @alchymyth

    Forum Moderator

    as with all default themes, any changes will be overwritten with the next update – however, are you not hoping that this issue will be fixed in the update?

    if you have made other changes to the theme, it might be a good idea to save the whole theme under a new name into a new directory –

    basically you make a copy of the theme directory of the original, just under a new directory name, and with the theme name changed in style.css.

    say your original is the TwentyTen theme in the folder /wp-content/themes/twentyten

    then copy all files from there into an new directory, say
    /wp-content/themes/mynewtheme

    then edit style.css in this new directory, and change

    Theme Name: Twenty Ten

    to

    Theme Name: My New Theme

    that should normally be enough.

    http://codex.wordpress.org/Theme_Development
    http://codex.wordpress.org/Theme_Development#Anatomy_of_a_Theme

    Asking people to change their style.css is not the solution.
    This is because plugins that spit out scaled images in the html will suffer from this issue. Plugins should work straight out of the box and not have to conform to the standards set by a specific theme.

    I am no css guru hence why I am here also looking for a solution but it looks like something that should be fixed in the actual theme itself!

    masonictraveler

    @masonictraveler

    It looks like the latest patch to the theme did not correct the problem and added back the

    width: auto;

    tag.

    Resizing via html image tag produces required results when viewed in visual editing mode, but upon updating page and then viewing page, image resizing is lost. I have not found removing CSS width:auto line fixes the problem

    ^^ That used to do the trick. However, it doesn’t work anymore since the latest patch. Seems even the workaround has been ‘fixed’…

    If I clear the cache the image resize coding seems to work. However have since been told on another post that one should not be using the resize coding… it’s bad practice.

    latest patch, 3.0.4 and same issue not fixed – reoccurring issue.

    The line code fix DOES still work and resolves the issue.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Twenty Ten 1.1 ignoring image width resizing’ is closed to new replies.
Skip to toolbar