Images stretched when posting

  • Resolved lonniw

    (@lonniw)


    15 years, 8 months ago

    Hey all,

    First time poster. I’ve scoured the posts trying to find someone else that had this problem, but just can’t seem to find a solution.

    http://www.lonniandmelodia.com/2008/08/15/izzabelle-update/

    The picture picture in this post is stretched from the original size. In the settings > Miscellaneous, I have the following settings: Thumbnail size Width: 75 Height: 75; Medium size Max Width: 250 Max Height: 250

    I upload the pictures using WP 2.6 (no plugins) by clicking add media>picture then choose files to upload. Pictures upload ok. Thumbnails created. I then click “show” to view the image. Default size is medium. Default alignment: none. I click “insert” and the image is put in the post. The image size is 166 wide/250 high.

    The I click the image to edit it. In the popup window, I change the alignment to “right” and save the change. The picture appears normal in the “write blog” window, not distorted, alignment function working. Then I click save/post and look at the image in the post. It appears different in the post than in the “write post.” In the actual post, it’s stretched. This doesn’t happen for all pics. In this case, it happened for two vertically-oriented pics, but not the two horizontally-oriented ones as I was posting.

    Last night, I had trouble with a horizontal image. http://www.lonniandmelodia.com/2008/08/14/izzabelle-update-august-14/
    The Hulk image. I added it and clicked “thumbnail” for size because I wanted a smaller image. Then I clicked align: left. It stretched that image too.

    In both cases, the only way I can get either image to display properly is if I change the alignment to none, which then has the image floating in white space about the text. But I’d prefer to wrap text around the image using one of the other alignment options.

    What am I doing wrong here? (as a side question, is there a plugin uploader I’d be better served using to make life easier? Recommendations?) It’s clear that it’s trying to make all images about 250 wide. Is this something I did wrong in the settings>misc? Is it a problem in my css? (http://www.lonniandmelodia.com/wp-content/themes/prosumer-10/style.css).

    Thanks for any suggestions. Sorry for the length of the post; wanted to be detailed.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter lonniw

    (@lonniw)

    15 years, 8 months ago

    Finally found the prob in my css. In the prosumer-10 theme, inserting into the CSS:

    img.alignright {padding: 4px; margin: 0 0 2px 7px; border: #000000 1px solid; display: inline; float: right;}

    img.alignleft {padding: 4px; margin: 0 7px 2px 0; border: #000000 1px solid; display: inline; float: left;}

    Didn’t resolve the problem. I thought this would universally handle images within the site, but it didn’t. I had to look at the specific div holding the posts. It’s called “content”. It’s css is

    #content {width: 510px;float: right;}

    So, adding this code to the content div resolved the problem…

    #content img.alignright {padding: 4px; margin: 0 0 2px 7px; border: #000000 1px solid; display: inline; float: right;}

    #content img.alignleft {padding: 4px; margin: 0 7px 2px 0; border: #000000 1px solid; display: inline; float: left;}

    I’m posting this resolution in case it helps anyone else out. I didn’t have the issue with 2.5, but when I upgraded to 2.6, it appeared. So did the new image handler, and I’m wondering if the new image handler in 2.6 (as compared to 2.5) was part of the reason for this. I don’t know enough to answer why it was an issue in 2.6 and not 2.5, but I’ll leave it here for those who may have the same problem.

    smallwonder

    (@smallwonder)

    15 years, 7 months ago

    I too am using Prosumer (v 1.4) and I had the same problem. I tried your fix but it didn’t work for me.

    What I did instead to resolve the problem was remove the width tag from the alignleft and alignright classes in the stylesheet so that all they contain is the following:

    .alignleft
    {
    float: left;
    }
    .alignright
    {
    float: right;
    }

    I can’t understand why “width-50%” was originally inserted since most users will expect their default image size to show up and adjust it as necessary. Forcing the image to stretch when it’s smaller than 50% of the column width is odd behavior.

    And since of the editors on my site don’t know html, I did edit your suggested text to create default padding for images so that they don’t abut directly against the text, e.g.:

    img.alignleft {
    padding: 5px;
    display: inline;
    }

    Thanks for your post. This problem has been bugging me but I never took the time to look for a solution (I just edited the HTML directly.)

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Images stretched when posting’ is closed to new replies.