WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Ten 1.1 ignoring image width resizing (18 posts)

  1. namklim
    Member
    Posted 4 years ago #

    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-300x225.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.

  2. namklim
    Member
    Posted 4 years ago #

    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.

  3. Andrew Nacin
    Lead Developer
    Posted 4 years ago #

  4. Greglorious
    Member
    Posted 4 years ago #

    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

  5. Harm Jans
    Member
    Posted 4 years ago #

    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?

  6. namklim
    Member
    Posted 4 years ago #

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

  7. masonictraveler
    Member
    Posted 3 years ago #

    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

    http://www.freemasoninformation.com/2010/03/the-better-angels-of-our-nature-a-review/

    (look for the image of Lewis A. Armistead)

  8. alchymyth
    Forum Moderator
    Posted 3 years ago #

    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;

  9. masonictraveler
    Member
    Posted 3 years ago #

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

  10. alchymyth
    Forum Moderator
    Posted 3 years ago #

    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

  11. phillyone
    Member
    Posted 3 years ago #

    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!

  12. masonictraveler
    Member
    Posted 3 years ago #

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

    width: auto;

    tag.

  13. danielPh
    Member
    Posted 3 years ago #

    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

  14. alargule
    Member
    Posted 3 years ago #

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

  15. danielPh
    Member
    Posted 3 years ago #

    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.

  16. masonictraveler
    Member
    Posted 3 years ago #

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

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

  17. kristel_ttm
    Member
    Posted 3 years ago #

    3.0.5 and the issue is still not fixed :(

  18. rlc737capt
    Member
    Posted 3 years ago #

    IMAGE RE-SIZING HELP REQUEST

    I have a TwentyTen 3.0.5 theme WordPress-based photography website:

    cassidyphotography.net

    I uploaded the TwentyTen theme and have been working with it, since February 1st. It is very frustrating at times. Just when I think I have got it figured out . . .

    If you go to Portfolio > Modeling you will also note there are photos of different sizes.

    There is just no damned way I can make them one size. It seems whatever way I attack the photo or image size, they show larger or smaller on the WordPress Dashboard, but after I Update, nothing has been changed. I have tried using Apple iMac and Safari OS X. I have
    tried Windows XP and Firefox. Oddly sometimes they load to Media and other times to Gallery . . . I have not figured this out, yet, either.

    I have a Page Titled: Screen Calibration Check . . . it was a Test Image that I created to play with in TwentyTen. I ended up modifying the style.css to get what you see. I thought myself clever, until I tried uploading smaller photos of Models and resizing them . . .

    When I upload the photos, I am sure to make them 671px X 446px, for example, but they come out different sizes, in practice, on my website.

    I wrote to many different folks about the situation including my Website Host and to the Author of TwentyTen, a few times, actually . . . No reply.

    I would need to know precisely what file to change or where to make changes in style.css.

    Can anyone advise?

    cassidy_photographyATyahooDOTcom

Topic Closed

This topic has been closed to new replies.

About this Topic