Prevent tall screenshots overflowing container

[dd32]

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

[dd32]

In 8932:

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

Fixes #4499.

[dd32]

In 8933:

Theme Directory: Cache bump after r8932.

See #4499.

[SergeyBiryukov]

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.

[DannyCooper]

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.

[DannyCooper]

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

[dingo_d]

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.

[DannyCooper]

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

[dingo_d]

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.

[dd32]

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.