Skip to:

Opened 10 years ago

Closed 10 years ago

Last modified 8 years ago

#5280 closed defect (bug) (fixed)

Codex: Image in content area extends beyond container

Reported by: mercime's profile mercime Owned by: djpaul's profile DJPaul
Milestone: Sites Priority: normal
Severity: normal Version:
Component: Sites Keywords: has-patch
Cc: mercijavier@…, karmatosed@…


Per report of David Cavins, author of the following article 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;

Change History (12)

#1 @mercime
10 years ago

  • Cc mercijavier@… added
  • Component changed from Core to

#2 @DJPaul
10 years ago

  • Keywords reporter-feedback added
  • Owner set to DJPaul
  • Status changed from new to assigned

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

#3 @DJPaul
10 years ago

  • Milestone changed from Awaiting Review to Future Release

#4 @mercime
10 years ago

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

Thank you.

#5 @karmatosed
10 years ago

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.

#6 @karmatosed
10 years ago

  • Cc karmatosed@… added

#7 @mercime
10 years ago

@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.

#8 @mercime
10 years ago

  • Keywords reporter-feedback removed

#9 @DJPaul
10 years ago

  • Milestone changed from Future Release to

#10 @DJPaul
10 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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

#11 @DJPaul
10 years ago

This is now deployed.

#12 @DJPaul
8 years ago

  • Component changed from Sites - Codex to Sites
Note: See TracTickets for help on using tickets.