WordPress.org

Ready to get started?Download WordPress

Forums

Post Format Test: Image (Linked) problem (11 posts)

  1. richardpd
    Member
    Posted 3 years ago #

    I have been editing & testing my WP theme anIMass (available in WP themes directory)with the latest WP test-data xml file.
    I get a problem with image overflowing content container with
    Post Format Test: Image (Linked)
    In firebug I see element.style {width:650px;} & presently I cannot work out where this style rule comes from so I can reduce the width to around 500px so the image will not break out of the container.
    As a temporary fix I have had overflow:hidden to the content div.

    This can be seen on my online theme test site at:onlinewpthemetest.richard-dickinson.com

    I am most grateful if someone can help me figure out this so I can fix it & I look forward to helpful replies, many thanks

  2. esmi
    Forum Moderator
    Posted 3 years ago #

    Try looking in functions.php for if ( ! isset( $content_width ) ) $content_width = 650; and reduce the value to 500.

  3. richardpd
    Member
    Posted 3 years ago #

    Thanks esmi
    However I already have content width set to 500px in functions.php eg:
    if ( ! isset( $content_width ) )
    $content_width = 500;

    Any other idea what the problem is and why this isn't working?
    Best wishes

  4. esmi
    Forum Moderator
    Posted 3 years ago #

    I can't see any images with a width of 650px via inline style.

  5. richardpd
    Member
    Posted 3 years ago #

    The link attached image that is broken & escaping the container has a width 650px. Somehow WP should adjust the width to fit the container
    (I have set the media settings large image to 500px).Here is the html from firebug for this image:
    <div id="attachment_612" class="wp-caption aligncenter" style="width: 650px">

    Any other ideas how I can fix this?

  6. esmi
    Forum Moderator
    Posted 3 years ago #

    Ah! I think the image you mean is being pulled in from an external url, yes? If so, the only way to control its max-width is via CSS.

  7. richardpd
    Member
    Posted 3 years ago #

    Esmi
    Yes you are right-the image is from an external url-so how do I code my css to control the max-width of this attachment div linked image?
    (this came from WP latest test-data xml file I imported into the theme and against which all WP themes should be tested with to check everything works correctly).

  8. esmi
    Forum Moderator
    Posted 3 years ago #

    Apply a max-width to images within the post content area on archive pages.

  9. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    if you look at the image, it already has the right width - it is the caption area that is sticking out; try to apply a max width to the .wp-caption style:

    .wp-caption { max-with: 510px; }

    (the caption frame is always by default 10px wider than the image)

  10. richardpd
    Member
    Posted 3 years ago #

    Not sure I understand your fix esmi-but thanks for your help.

    I finally fixed this by applying max-width attribute to these css rules:

    #content .aligncenter,
    #content img.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width:550px;
    }
    Alleluia! Image + caption now displays properly (no longer escapes container).
    {I already have another problem to fix- now getting this error message after trying to update posts:
    Accountability
    Warning: Cannot modify header information - headers already sent by (output started at /home/hilaryd/public_html/wp-includes/post-template.php:52) in /home/hilaryd/public_html/wp-includes/pluggable.php on line 897

    but this is another issue to fix!! oh deep joy! :-) }

  11. richardpd
    Member
    Posted 3 years ago #

    Hi alchymth
    Thanks for your reply-I will check out your fix which seems very logical-many thanks

Topic Closed

This topic has been closed to new replies.

About this Topic