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

**URL:** <https://discourse.opensourcedesign.net/t/twitter-black-rectangle-or-cropping-of-different-types-of-inverted-logo-in-some-tweets-that-refer-to-pages-in-the-discourse-opensourcedesign-net-domain/166>\
**Category:** Forum feedback\
**Created:** [May 19, 2017, 8:06am UTC](https://discourse.opensourcedesign.net/t/twitter-black-rectangle-or-cropping-of-different-types-of-inverted-logo-in-some-tweets-that-refer-to-pages-in-the-discourse-opensourcedesign-net-domain/166 "2017-05-19T08:06:03Z")\
**Posts on this page:** 9\
**Page:** 2

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex029/uploads/opensourcedesign/original/1X/8cd739a58030a4afeb37abf872f5ffd3319bbc63.png) [@system](https://discourse.opensourcedesign.net/u/system)\
**Post date:** [June 1, 2017, 10:43pm UTC](https://discourse.opensourcedesign.net/t/twitter-black-rectangle-or-cropping-of-different-types-of-inverted-logo-in-some-tweets-that-refer-to-pages-in-the-discourse-opensourcedesign-net-domain/166/21 "2017-06-01T22:43:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![grahamperrin](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.opensourcedesign.net/grahamperrin/32/62_2.png) [@grahamperrin](https://discourse.opensourcedesign.net/u/grahamperrin)\
**Post date:** [June 2, 2017, 3:03am UTC](https://discourse.opensourcedesign.net/t/twitter-black-rectangle-or-cropping-of-different-types-of-inverted-logo-in-some-tweets-that-refer-to-pages-in-the-discourse-opensourcedesign-net-domain/166/22 "2017-06-02T03:03:59Z")

</div>

Thanks 👍

> [@discourse](#):
>
> … so neither dimension is more than 720px …

[@staff](https://discourse.opensourcedesign.net/groups/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](https://discourse.opensourcedesign.net/t/-/166/11) above.

---

<div class="post-metadata">

**Author:** ![grahamperrin](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.opensourcedesign.net/grahamperrin/32/62_2.png) [@grahamperrin](https://discourse.opensourcedesign.net/u/grahamperrin)\
**Post date:** [June 2, 2017, 4:35am UTC](https://discourse.opensourcedesign.net/t/twitter-black-rectangle-or-cropping-of-different-types-of-inverted-logo-in-some-tweets-that-refer-to-pages-in-the-discourse-opensourcedesign-net-domain/166/23 "2017-06-02T04:35:16Z")

</div>

[Discourse tweeted](https://twitter.com/discourse/status/870174672037400576):

> … all in one place …

👍

I’ll edit the subject line.

## Problems with inverted versions of a logo

[https://twitter.com/opensrcdesign/status/868205626308087808](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](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://canada1.discourse-cdn.com/flex029/uploads/opensourcedesign/original/1X/c74310ee6b9ae0282671f0a81d8dabf032cdf81e.png)

[https://twitter.com/opensrcdesign/status/870281492433326080](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](https://discourse.opensourcedesign.net/t/-/166/20) above.

 ![](https://canada1.discourse-cdn.com/flex029/uploads/opensourcedesign/original/1X/e98e1a858063a26490fdaf07609d99c4720b0691.png)

## Iframely

[Yesterday](https://twitter.com/grahamperrin/status/870095922285379584) (2017-06-01) the result of [Iframely URL Debugger - Open Graph, Twitter Cards, oEmbed](http://iframely.com/debug?uri=https%3A%2F%2Fdiscourse.opensourcedesign.net%2Ft%2F-%2F130) 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](http://iframely.com/debug). 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/](http://iframely.com/) was unaffected but now (04:56 UK time) there’s 504, gateway time-out.

## Ultimately, ideally

The behaviours with [@staff](https://discourse.opensourcedesign.net/groups/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](https://twitter.com/search?f=tweets&q=from:firefox%20discourse.mozilla-community.org)

 ![](https://canada1.discourse-cdn.com/flex029/uploads/opensourcedesign/original/1X/caaf7376e0c6eb89739e6bc613f41860fa9b96fe.png)

– 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/firefox/status/837044463864279048)

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

- [https://twitter.com/Benlamara/status/857939685246734336](https://twitter.com/Benlamara/status/857939685246734336) with reference to [https://discourse.mozilla-community.org/t/is-it-possible-to-flash-android-on-a-flatfish/4396/2](https://discourse.mozilla-community.org/t/is-it-possible-to-flash-android-on-a-flatfish/4396/2)
- [https://twitter.com/brionv/status/869384066465898496](https://twitter.com/brionv/status/869384066465898496) with reference to [https://discourse.mozilla-community.org/t/this-functionality-already-exists-why-not-make-something-that-doesnt/11988/3](https://discourse.mozilla-community.org/t/this-functionality-already-exists-why-not-make-something-that-doesnt/11988/3)

– 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.)

---

<div class="post-metadata">

**Author:** ![grahamperrin](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.opensourcedesign.net/grahamperrin/32/62_2.png) [@grahamperrin](https://discourse.opensourcedesign.net/u/grahamperrin)\
**Post date:** [June 8, 2017, 12:49am UTC](https://discourse.opensourcedesign.net/t/twitter-black-rectangle-or-cropping-of-different-types-of-inverted-logo-in-some-tweets-that-refer-to-pages-in-the-discourse-opensourcedesign-net-domain/166/24 "2017-06-08T00:49:07Z")

</div>

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

![](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex029/uploads/opensourcedesign/original/1X/cfddf80fd5e8d0f8d87d9dc8a27d345b00b00ddf.png)

---

<div class="post-metadata">

**Author:** ![jdittrich](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.opensourcedesign.net/jdittrich/32/42_2.png) [@jdittrich](https://discourse.opensourcedesign.net/u/jdittrich)\
**Post date:** [June 18, 2017, 7:40am UTC](https://discourse.opensourcedesign.net/t/twitter-black-rectangle-or-cropping-of-different-types-of-inverted-logo-in-some-tweets-that-refer-to-pages-in-the-discourse-opensourcedesign-net-domain/166/25 "2017-06-18T07:40:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![grahamperrin](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.opensourcedesign.net/grahamperrin/32/62_2.png) [@grahamperrin](https://discourse.opensourcedesign.net/u/grahamperrin)\
**Post date:** [June 18, 2017, 7:41am UTC](https://discourse.opensourcedesign.net/t/twitter-black-rectangle-or-cropping-of-different-types-of-inverted-logo-in-some-tweets-that-refer-to-pages-in-the-discourse-opensourcedesign-net-domain/166/26 "2017-06-18T07:41:15Z")

</div>

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 …

---

<div class="post-metadata">

**Author:** ![grahamperrin](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.opensourcedesign.net/grahamperrin/32/62_2.png) [@grahamperrin](https://discourse.opensourcedesign.net/u/grahamperrin)\
**Post date:** [June 18, 2017, 7:56am UTC](https://discourse.opensourcedesign.net/t/twitter-black-rectangle-or-cropping-of-different-types-of-inverted-logo-in-some-tweets-that-refer-to-pages-in-the-discourse-opensourcedesign-net-domain/166/27 "2017-06-18T07:56:53Z")

</div>

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

![](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex029/uploads/opensourcedesign/original/1X/ab29e1e089cb7036200aeaa58edb843b6349d7a2.png)

---

<div class="post-metadata">

**Author:** ![jdittrich](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.opensourcedesign.net/jdittrich/32/42_2.png) [@jdittrich](https://discourse.opensourcedesign.net/u/jdittrich)\
**Post date:** [June 18, 2017, 8:05am UTC](https://discourse.opensourcedesign.net/t/twitter-black-rectangle-or-cropping-of-different-types-of-inverted-logo-in-some-tweets-that-refer-to-pages-in-the-discourse-opensourcedesign-net-domain/166/28 "2017-06-18T08:05:31Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![grahamperrin](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.opensourcedesign.net/grahamperrin/32/62_2.png) [@grahamperrin](https://discourse.opensourcedesign.net/u/grahamperrin)\
**Post date:** [June 18, 2017, 8:27am UTC](https://discourse.opensourcedesign.net/t/twitter-black-rectangle-or-cropping-of-different-types-of-inverted-logo-in-some-tweets-that-refer-to-pages-in-the-discourse-opensourcedesign-net-domain/166/29 "2017-06-18T08:27:49Z")

</div>

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

![](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex029/uploads/opensourcedesign/original/1X/82fc24c152ee9f75b53519210e74de87a5737890.png)

– and [https://twitter.com/grahamperrin/status/876351028232425473](https://twitter.com/grahamperrin/status/876351028232425473) not suitably crisp.

* * *

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

`https://canada1.discourse-cdn.com/flex029/uploads/opensourcedesign/original/1X/a95e29b61e4858fe8b21e874e1a86c18066f3246.png`

![](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex029/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.

[Previous page](https://discourse.opensourcedesign.net/t/twitter-black-rectangle-or-cropping-of-different-types-of-inverted-logo-in-some-tweets-that-refer-to-pages-in-the-discourse-opensourcedesign-net-domain/166.md?page=1)