WordPress.org

Forums

[resolved] Image not resizing in WYSIWYG (17 posts)

  1. zeckdude
    Member
    Posted 4 years ago #

    I am inserting photos into my post using the WYSIWYG editor in the admin area of WordPress. I am using the twentyten theme.

    When I insert photos into the post, it will insert the full size image. At this point I would like the client to be able to resize the image from within the WYSIWYG editor. It does provide resizing controls on the corner of the image, and when I use those to resize it, the photo appears smaller in the WYSIWYG editor, but it still shows the full size image on the web.

    Why is the image not resizing using the controls in the WYSIWYG editor?

    I know I can use the 3 pre-determined thumbnail options, but I would like the user to be able change the size of the image by eye.

  2. Doesn't work that way. You have predefined image sizes, and that's that. You can create a theme to have more possibilities for image sizes, but you can't make it drag/drop image sizes directly from the editor.

  3. zeckdude
    Member
    Posted 4 years ago #

    Why do they include the resize controls in the WYSIWYG editor in the first place then if they don't have any function?

    Do you know of any themes or plugins that have the functionality I am looking for?

  4. zeckdude
    Member
    Posted 4 years ago #

    Otto, according to http://en.support.wordpress.com/images/image-settings/ I should be able to visually change the size of the image in the WYSIWYG editor using the resize control bars.

    Why are you so sure that you can only use predefined image sizes?

  5. elfin
    Moderator
    Posted 4 years ago #

    Have to agree Otto, sorry.

    Look in your CSS for something like #content img

    is there a width:auto; set? if so delete it. It should then work OK.

    However it does need amending in the default TwentyTen theme, IMO.

  6. zeckdude
    Member
    Posted 4 years ago #

    Rich 'elfin' Pedley,

    That was exactly the problem. For some reason, the twentyten css file has it as width: auto.

    I will simply change that css in my child theme css file.

    Thank you.

  7. elfin
    Moderator
    Posted 4 years ago #

    I used twentyten and ran a quick test, but it confused me for a while.

  8. Ryan Hellyer
    Member
    Posted 4 years ago #

    Otto is correct, you can't change image sizes like that. However you can change the size dimensions which are applied to an existing image, ie: via the markup.

    If the changes you are implementing in the back-end aren't showing up on the front-end, then your CSS is presumably over-riding those image dimensions set in the markup (ie: width and height settings on the IMG tag itself).

  9. Ryan Hellyer
    Member
    Posted 4 years ago #

    EDIT: I just realised I repeated what Rich 'elfin' Pedley and zeckdude said above.

    For those of you using the TwentyTen theme, try changing the following in your style.css:


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

    to this:

    #content img {
    margin: 0;
    max-width: 640px;
    }

    I’m not sure if those auto widths and heights are needed for something else so hopefully it doesn’t break some other edge case situation which I haven’t thought of.

  10. Yes, I see what you're talking about now.

    I think this is probably a bug in WordPress, or at least some kind of oversight. It shouldn't be using the attributes of the image tag to do resizing like that.

  11. namklim
    Member
    Posted 4 years ago #

    In http://wordpress.org/support/topic/changes-twentyten-10-11?replies=32 Andrew Nacin wrote: It was designed to fix an IE8 bug, I believe. I'm having someone look into the side effects.

    See also http://wordpress.org/support/topic/twenty-ten-11-ignoring-image-width-resizing

  12. danielPh
    Member
    Posted 4 years ago #

    I'm having a similar problem and have changed the CSS as suggested above,but still no joy. When I try resize using width and height values in the image tag, it works in the visual editing mode, but when I update the page and view it, image size is back to original.

  13. namklim
    Member
    Posted 4 years ago #

    Have you made sure you cleared out your browser cache before trying to view the changes?

  14. danielPh
    Member
    Posted 4 years ago #

    Thanks , but that hasn't helped.

  15. danielPh
    Member
    Posted 4 years ago #

    Hi namklin, sorry it did do the trick, thanks.

  16. Griff Wigley
    Member
    Posted 4 years ago #

    ryanhellyer, I had this problem as well and your fix did the trick for me, too. Thx!

  17. rlc737capt
    Member
    Posted 4 years ago #

    IMAGE RE-SIZING HELP REQUEST

    I have a TwentyTen 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