Making WordPress.org

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#3777 closed enhancement (fixed)

Bad CSS Code hides the bottom 24 pixels (11%) of theme screenshots

Reported by: ilovewpcom's profile ilovewpcom Owned by: coffee2code's profile coffee2code
Milestone: Priority: normal
Component: Theme Directory Keywords: dev-feedback has-screenshots has-patch
Cc:

Description

The current CSS code for displaying the themes (in list mode) CUTS out from the bottom 24 pixels of an already short screenshot. Considering that the total height is ~214, taking out 24 pixels is 11%!

Fixing this takes about 60 seconds.

.theme-browser .theme .theme-screenshot img - should not have absolute positioning.
.theme-browser .theme .theme-screenshot:after - should not even exist.

We immediately get 100% of our screenshots visible in the /themes/ list pages.

Attachments (3)

wordpress-org-themes-bad-css.png (402.7 KB) - added by ilovewpcom 6 years ago.
This is an example of the bottom 24 pixels that each theme loses.
img.png (479.5 KB) - added by Presskopp 6 years ago.
meta-3777.diff (1.1 KB) - added by pratikthink 6 years ago.

Download all attachments as: .zip

Change History (19)

@ilovewpcom
6 years ago

This is an example of the bottom 24 pixels that each theme loses.

This ticket was mentioned in Slack in #themereview by ilovewpcom. View the logs.


6 years ago

#2 follow-ups: @Otto42
6 years ago

Your "fix" seems to cut the name off of the bottom of the screenshot.

#3 in reply to: ↑ 2 @ilovewpcom
6 years ago

Replying to Otto42:

Your "fix" seems to cut the name off of the bottom of the screenshot.

The screenshot does not contain the result of removing the CSS lines.
The screenshot is there to demonstrate the part of the screenshots that is hidden by the titles.

#4 in reply to: ↑ 2 @DannyCooper
6 years ago

Replying to Otto42:

Your "fix" seems to cut the name off of the bottom of the screenshot.

If the correct CSS was provided, would this be implemented?

#5 @mukesh27
6 years ago

  • Keywords needs-patch added

#6 @ilovewpcom
6 years ago

Is there any luck to get this fixed?
It's a simple CSS fix, shouldn't take more than 5 minutes, but would help with presenting our themes a little better in the repo.

#7 @mukesh27
6 years ago

  • Keywords ui-feedback dev-feedback added
  • Type changed from defect to enhancement

This ticket was mentioned in Slack in #meta by dannycooper. View the logs.


6 years ago

#9 @Presskopp
6 years ago

I can confirm that the patch like described above will work fine (tried with browser console). It only needs to be made by someone.

.theme-browser .theme .theme-screenshot img - should not have absolute positioning.
.theme-browser .theme .theme-screenshot:after - should not even exist.

I'm also not sure if these are needed:

height: auto;
left: 0;
width: 100%;

@Presskopp
6 years ago

#10 @Presskopp
6 years ago

  • Keywords has-screenshots added

This ticket was mentioned in Slack in #themereview by dannycooper. View the logs.


6 years ago

#12 @pratikthink
6 years ago

  • Keywords has-patch added; needs-patch ui-feedback removed

1200 × 900 (recommended theme screenshot size) aspect ratio 4:3
572 × 429 (theme gallery screenshot size) aspect ratio 4:3

So I think there is no need to set a fixed aspect ratio for the theme gallery screenshots

This ticket was mentioned in Slack in #themereview by ilovewpcom. View the logs.


6 years ago

#14 @coffee2code
6 years ago

  • Owner set to coffee2code
  • Resolution set to fixed
  • Status changed from new to closed

In 8222:

Theme Directory: Prevent clipping bottom portion of theme screenshots in theme browser.

Props pratikthink, presskopp, ilovewpcom.
Fixes #3777.

#15 @ilovewpcom
6 years ago

Nice :)

This ticket was mentioned in Slack in #themereview by ilovewpcom. View the logs.


6 years ago

Note: See TracTickets for help on using tickets.