Codex: Image in content area extends beyond container

[mercime]

Per report of David Cavins, author of the following article ​http://codex.buddypress.org/getting-started/guides/modifying-the-registration-form/ where the images extends beyond the content area.

Simple solution is to add the following to the codex theme's functions.php file:

// Set the content width based on the theme's design and stylesheet.
if ( ! isset( $content_width ) )
	$content_width = 580;

[DJPaul]

How did you decide 580 was the right number? For the record, the codex theme doesn't have $content_width set currently.

[mercime]

How did you decide 580 was the right number?

Recommendation based on the current .content width which is 640px. Just made allowance for when image is captioned. It's up to you of course what the final $content_width would be.

For the record, the codex theme doesn't have $content_width set currently.

Yes, I gathered that was the case. Hence this ticket to add $content_width ​http://codex.wordpress.org/Content_Width#Adding_Theme_Support

Thank you.

[karmatosed]

If we are doing proper image 'responsifying' we don't need to have any content-width set (some would argue shouldn't in retina age). It is usually there as a frame buster prevention and a bit of a legacy also in some cases of fixed width themes. I would lend to a 2 pronged attack with a content-width and bring in:

img {
  height: auto;
  /* Make sure images are scaled correctly. */
  max-width: 100%;
  /* Adhere to container width. */
}

Then we can have it as 640px and allow for increase as responds.

[mercime]

@karmatosed thank you for your input and reminder. Yes, adding the max-width and auto height in codex theme's stylesheet would be great.

However, I would have to disagree with you about not needing to have any $content_width set in the functions.php file as the $content_width controls not only the images added to posts but also oEmbeds or any other content added in posts. As an aside, $content_width is a Required item in WP theme reviews.

In the case of responsive themes which usually have max widths (I assume this will be so for the Codex theme when it's made responsive) we could then adjust the $content_width to fit that max width within the content area and can further adjust for special page templates if needed. Smaller screen sizes should then adjust automatically with the stylesheet's img max-width set at 100%.

For this particular ticket, given that the codex theme is still fixed-width and we're not sure if the theme's going to be made responsive this year, it would be much appreciated if the $content_width be added to the theme's functions.php as well as max-width for images/oEmbeds to the theme's stylesheet so we could address the current image overflows in the codex.

@DJPaul Please let me know what I can do to expedite the implementation of the above-mentioned. Thank you.

[DJPaul]

I have set $content_width and added the img styles to the bb-base, bbpress-2013, buddypress-2013, codex.bbp.org, and codex.bp.org themes. The changes aren't deployed to production yet, but hopefully this will be done early next week.

[DJPaul]

This is now deployed.