WordPress.org

Making WordPress.org

Opened 10 months ago

Closed 2 weeks ago

#4499 closed defect (fixed)

Prevent tall screenshots overflowing container

Reported by: dd32 Owned by: SergeyBiryukov
Milestone: Priority: normal
Component: Theme Directory Keywords:
Cc:

Description

Sometimes theme authors accidentally add screenshots which are too tall for the theme directory, see the below slack conversation for an example, we should limit the height of screenshots.

https://wordpress.slack.com/archives/C02RP4Y3K/p1559876587250600

Attachments (1)

themes-2-across.jpg (104.9 KB) - added by SergeyBiryukov 9 months ago.

Download all attachments as: .zip

Change History (17)

#1 @dd32
10 months ago

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

In 8932:

Theme Directory: Styles: Prevent tall screenshots overflowing the container.

Fixes #4499.

#2 @dd32
10 months ago

In 8933:

Theme Directory: Cache bump after r8932.

See #4499.

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


9 months ago

#4 @SergeyBiryukov
9 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

As reported by @joyously, this caused issues with stretching the screenshot images on mobile views (see the screenshot above). Per Slack discussion, reopening to either revert or find a better CSS fix.

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


8 months ago

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


8 months ago

#7 @SergeyBiryukov
8 months ago

  • Owner changed from dd32 to SergeyBiryukov
  • Status changed from reopened to accepted

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


8 months ago

#9 @DannyCooper
8 months ago

Removing the max-height value in _main.scss:182 appears to fix this.

.theme-browser .theme .theme-screenshot img {

That may be because all the most recent screenshots use the correct dimensions though. It would need to be checked against a theme that doesn't too.

#10 @DannyCooper
8 months ago

Removing the max-height as I mentioned above could be combined with the following to enforce the correct screenshot size: https://i0.wp.com/themes.svn.wordpress.org/kvarken/3.0/screenshot.png?resize=1200,900

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


4 months ago

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


8 weeks ago

#13 @dingo_d
8 weeks ago

I've played a bit with this screen, and I'm not sure if this resize has to be added when the images are generated or not, but just adding ?resize=1200,900 to a tall image didn't seem to do much.

I also played a bit with flex container, but that still didn't solve the issue of tall images staying tall when resizing (vs regular images shrinking down).

So it's a bit complicated problem :S

I thought about adding a js resize handler that would just fix these heights on all images, but the entire theme js code is written in backbone.js and I'd need to really go through it to understand it.

My 2 cents: we should completely rewrite the entire themes theme with either React.js or vanilla JS. Make it look more like plugins page.

#14 @DannyCooper
7 weeks ago

@dingo_d Do you have an example of a screenshot/theme where the simple fix doesn't work?

#15 @dingo_d
7 weeks ago

Well, that's the issue. I'm not 100% sure the simple fix works, as I can only manually replace the image and add the query. Which didn't do anything.

I still cannot show my local themes when running themes site locally. Only themes from the API are pulled, so I need to see how this whole flow works.

#16 @dd32
2 weeks ago

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

In 9622:

Theme Directory: More responsive styling for the theme listing.

This should fix the stretched theme images in certain responsive sizes.

Props dufresnesteven.
Fixes #5110, #4499.

Note: See TracTickets for help on using tickets.