Twitter: black rectangle, or cropping of different types of inverted logo, in some tweets that refer to pages in the discourse.opensourcedesign.net domain

Good news! I think we’ve identified the issue.

  1. png with transparency
  2. png larger than 720px in either dimension

When #2 is true, the image will be forced to a JPG. There is a bug where
transparency is treated as black instead of white, so this results in an
all-black PNG.

As a temporary workaround, resize the PNG so neither dimension is more than
720px; we have a deeper fix that is rolling out in the next few days as
well.

2 Likes

Thanks :thumbsup:

@staff you have, readily available, the first of the two URLs at Twitter: black rectangle, or cropping of different types of inverted logo, in some tweets that refer to pages in the discourse.opensourcedesign.net domain - #11 by grahamperrin above.

Discourse tweeted:

… all in one place …

:thumbsup:

I’ll edit the subject line.

Problems with inverted versions of a logo

https://twitter.com/opensrcdesign/status/868205626308087808 (2017-05-26) cropped representation of what I originally thought was a square logo. In retrospect it might have been cropped from the square part of a rectangular logo. At the time of writing, it’s inverted.

https://twitter.com/simonv3/status/855409535070195714 (2017-04-21) previously presented a black rectangle, now there’s a cropped representation of an inverted logo.

https://twitter.com/opensrcdesign/status/870281492433326080 (2017-06-01) cropped representation of a different inverted logo. I guess, the same inverted logo that appears almost white-on-white at Twitter: black rectangle, or cropping of different types of inverted logo, in some tweets that refer to pages in the discourse.opensourcedesign.net domain - #20 by grahamperrin above.

Iframely

Yesterday (2017-06-01) the result of Iframely URL Debugger - Open Graph, Twitter Cards, oEmbed was:

418 server error

Not long afterwards, I began getting

Access Denied

– for that particular debug URL and more generally, for Iframely URL Debugger - Open Graph, Twitter Cards, oEmbed. I wonder whether access is denied because we have overused the debugging service for URLs in a particular domain, or because I have overused the service from a particular IP address. For a few hours, http://iframely.com/ was unaffected but now (04:56 UK time) there’s 504, gateway time-out.

Ultimately, ideally

The behaviours with @staff -defined images at discourse.opensourcedesign.net should be as good as with the set of admin/staff-defined images at, for example, Mozilla Discourse.

https://twitter.com/search?f=tweets&q=from:firefox%20discourse.mozilla-community.org

– in that example, a list of tweets, it’s probably normal for one to appear without an image because an adjacent tweet refers to the same topic. The tweet that is listed without an image does present its image when viewed as https://twitter.com/firefox/status/837044463864279048

https://twitter.com/search?f=tweets&q=discourse.mozilla-community.org offers a broader overview where most examples are OK, exceptions include:

– both of which present a generic page icon. @discourse that’s just FYI; I don’t suppose that the forthcoming deep fixes are intended to address such cases. (I treat the generic page icon as normal, not peculiar.)

@staff bump

I ran through the shortlist of nineteen tweets. All still bugged but where previously the rectangle was black, now the problem is with the oversized image. The appearance is unprofessional.

It should be easy to work around this by using the suitably sized image that I provided in post 11.

I thought I had updated this already, but seemingly it was still on it’s old stage. Hope this one works.

1 Like

Thanks, you must be psychic, I was in the middle of drafting an e-mail to someone about this issue!

Any change now will probably not ‘cascade’ to previously bugged tweets until after a waiting period of … maybe a few days.

I’ll test with a fresh tweet …

Different, but still apparently oversized. See below.

Please, is this the result of the URL that I gave in post 11?

(What are the field entries?)

TIA

OK, I tried the smaller one from post 11 (it took me a while to find out how I can get to the 11th post without counting and that there you already suspected the larger one to be cropped)

1 Like

OK, thanks, it fits but it’s tight –

– and https://twitter.com/grahamperrin/status/876351028232425473 not suitably crisp.


We’re much closer to a workaround, I think. Try this:

https://global.discourse-cdn.com/standard17/uploads/opensourcedesign/original/1X/a95e29b61e4858fe8b21e874e1a86c18066f3246.png

– that began with GIMP rendering opensourcedesign-logo-text-narrow.svg at 90 ppi … flattened, greyscale … canvas widened from 300 to 306 (for 3 left and right (narrower than the space between the square and the letters, but at a glance it ‘feels’ right)).

I half-expect the result in Twitter to be not crisp enough, again; if so, there’ll be one more URL to try. Hopefully the last.