black rectangle (no image) in some tweets that refer to pages in the discourse.opensourcedesign.net domain

[jdittrich]

According to @grahamperrin on discourse no images are previewed in a tweet if it links to discourse; it will just have a black rectangle, like this:

(image taken from @grahamperrin discourse post

Not yet reproducible with any other instance of Discourse (I experimented with tweets for four other instances).

PS.: If that should go to another repo, please move it and leave a note, Org was most fitting for discourse I thought.

[grahamperrin]

Tweeted 2017-05-15

With reference to a post that was made by pdurbin on 2017-05-14, https://twitter.com/opensrcdesign/status/864001489437642752

• is not bugged
• presents the avatar of the author of post 4 within a topic (not the opening poster):

Tweeted 2017-05-19

One of these two is bugged:

The earlier of the two:

The later of the two:

[grahamperrin]

A shortlist of tweets that are bugged

Not intended to be comprehensive.

https://twitter.com/grahamperrin/status/852496087873191936

• 2017-04-13
• https://t.co/Bzhw52yX1W
• https://discourse.opensourcedesign.net/

https://twitter.com/opensrcdesign/status/855146100956770306

• 2017-04-20
• https://t.co/DCRaaemES5
• https://discourse.opensourcedesign.net/

https://twitter.com/simonv3/status/855409535070195714

• 2017-04-21
• https://t.co/dX5l2JUTCN
• https://discourse.opensourcedesign.net/t/portland-or-usa/100/1
• opening post specified
• opening poster simonv3

https://twitter.com/opensrcdesign/status/857658850370961408

• 2017-04-27
• https://t.co/UohSPKJljP
• https://discourse.opensourcedesign.net/t/funding-getting-paid-and-designing-for-floss/116
• opening poster simonv3

https://twitter.com/opensrcdesign/status/858230760951689216

• 2017-04-29
• https://t.co/ZuDj0NYVl2
• https://discourse.opensourcedesign.net/t/examples-for-scenarios/102
• opening poster jdittrich

https://twitter.com/opensrcdesign/status/859867979109908480

• 2017-05-03
• https://t.co/EMS2OFX924
• https://discourse.opensourcedesign.net/t/cost-of-design-versus-cost-of-implementation/128
• opening poster simonv3

https://twitter.com/simonv3/status/860174552600412160

• 2017-05-04
• https://t.co/HUgSvyy1O4
• https://discourse.opensourcedesign.net/t/cost-of-design-versus-cost-of-implementation/128
• opening poster simonv3

https://twitter.com/RebelDevNews/status/860238514126016512

• 2017-05-04
• https://t.co/vPokILvvso
• https://discourse.opensourcedesign.net/

https://twitter.com/opensrcdesign/status/862111393121619968

• 2017-05-10
• https://t.co/E57tWx9jv4
• https://discourse.opensourcedesign.net/t/new-york-ny-usa/138
• opening poster xuv

https://twitter.com/opensrcdesign/status/862578049543491585

• 2017-05-11
• https://t.co/t6bRbbvOMg
• https://discourse.opensourcedesign.net/t/sharing-assets-to-build-upon/142/1
• opening post specified
• opening poster jdittrich

https://twitter.com/opensrcdesign/status/865637851966222336

• 2017-05-19
• https://t.co/XBoyhk74K2
• https://discourse.opensourcedesign.net/t/boulder-denver-co-usa/167
• opening poster MSiep

https://twitter.com/opensrcdesign/status/866555460392013824

• 2017-05-22
• https://t.co/yMxIdjOCRS
• https://discourse.opensourcedesign.net/t/berlin-germany/97
• opening poster jan

https://twitter.com/opensrcdesign/status/866556200829190144

• 2017-05-22
• https://t.co/c8FaHfcRDJ
• https://discourse.opensourcedesign.net/t/london-uk/103/1
• opening poster belenbarrospena

https://twitter.com/philipdurbin/status/868795340354400256

• 2017-05-28
• https://t.co/o9JOmqBhDG
• https://discourse.opensourcedesign.net/t/invision-invisionapp-com/189
• opening poster pdurbin

A shortlist of tweets that are bugged, but not by the black rectangle

https://twitter.com/opensrcdesign/status/868205626308087808

• 2017-05-26
• https://t.co/y0rGDfVWW5
• https://discourse.opensourcedesign.net/t/qualitative-surveys-for-opensource-user-need-research/186
• opening poster jdittrich
• cropped representation of the square (or square part of) a logo, just part of the head of the paintbrush (observed 2017-05-29 20:26) … I can't recall whether it was inverted

https://twitter.com/grahamperrin/status/870094611464810497

• 2017-06-01
• expect this test tweet to disappear
• https://t.co/pxoQUFBkX0
• https://discourse.opensourcedesign.net/t/trusted-users-of-this-forum-engagement-with-discourse-meta/130
• cropped representation of an inverted logo, Open So… Design

https://twitter.com/opensrcdesign/status/872512148592771072

• 2017-06-07
• https://t.co/9ZVECSG8Pd
• https://discourse.opensourcedesign.net/t/joining-forces-with-opendesign-io/203
• cropped representation of a logo, Open So… Design

https://twitter.com/grahamperrin/status/872612807648399360

• 2017-06-08
• https://t.co/IiZtjLE7UF
• https://discourse.opensourcedesign.net/t/joining-forces-with-opendesign-io/203
• cropped representation of a logo, Open So… Design

[grahamperrin]

https://twitter.com/grahamperrin/status/865947199955456000 seeks advice from Twitter Support.

[grahamperrin]

I wondered whether the issue is avatar-specific.

Test tweet, link to https://discourse.opensourcedesign.net/t/cost-of-design-versus-cost-of-implementation/128/1?u=grahamperrin where simonv3 is the opening poster:

• fail (black rectangle).

Test tweet, link to https://discourse.opensourcedesign.net/t/cost-of-design-versus-cost-of-implementation/128/7?u=grahamperrin where post 7 in the same topic is also by simonv3:

• success,

[grahamperrin]

Interesting, a test tweet a few minutes ago with reference to https://discourse.opensourcedesign.net/t/first-impressions-part-two/147/6?u=grahamperrin presented a cropped version of an image that ceased appearing in that post (6) a few hours ago:

– https://pbs.twimg.com/card_img/866191835147972608/QW8wKRHg?format=jpg&name=144x144_2

(The original of what's cropped by Twitter can be found in the first edition of the linked post.)

[jdittrich]

Some sort of background info: The black image is not hotlinked but stored at twitter, so it is not very easy to find out what twitter drags in.

[grahamperrin]

Thanks.

From https://discourse.opensourcedesign.net/t/-/166

… maybe check both:

• your site assets topic
• URLs for logos

– do the URLs refer to the assets? Is each asset in a required format? …

I have a very vague recollection, from the first day(s) of admin, that SVG did not work as expected in at least one context. SVG aside, for a moment …

---

At a glance, without reference to what's specified in the basic requirements area of admin preferences: http://opensourcedesign.net/images/opensourcedesign-logo-text.png strikes me as extraordinarily large:

• 2,231 x 273 pixels
• more than 18 KiB.

Try flattening (the alpha is probably unnecessary in this context), greyscale, scale down to a saner size, add to your site assets topic, then change the admin preference to refer to the asset.

Also http://opensourcedesign.net/images/opensourcedesign-logo.png is probably larger than will ever be necessary in the context of the site assets topic (512 x 512 pixels, 4.6 kB).

---

Additional background information at https://experts.feverbee.com/t/-/5903 (I began the topic there, not Discourse Meta, with an assumption that someone at FeverBee might have encountered the issue in the past). Quite verbose, tl;dr I found nothing there that might explain the problem with our instance of Discourse.

[grahamperrin]

… what's specified in the basic requirements area of admin preferences …

https://github.com/discourse/discourse/blob/6a746c931a3d6e3614b3f2c724fa74d7d69bf67c/config/locales/server.en.yml#L973 specifies shapes but not sizes for logo_url and logo_small_url

I'll search Discourse Meta for recommendations (if any) on size.

[grahamperrin]

From post 9 (2015-09-14) under What is the ideal size of Logo file?:

… pixel dimensions are irrelevant, as the browser (with the sad, forlorn exception of IE11 and Edge) will resize the image as needed.

You also want a larger image for retina-class devices with high DPI, …

[grahamperrin]

❗

@jdittrich please what's in your admin preferences for these two fields?

• default_opengraph_image_url
• twitter_summary_large_image_url

Related

• https://github.com/discourse/discourse/blob/6a746c931a3d6e3614b3f2c724fa74d7d69bf67c/config/locales/server.en.yml#L1185
• Facebook OpenGraph images not working on the homepage (2016-06-20) – a long topic, tl;dr there's discussion of things such as default_opengraph_image_url and twitter_summary_large_image_url.

Validation

💡

Troubleshooting Guide — Twitter Developers refers to:

• Card Validator | Twitter Developers

– where we can validate forum URLs such as those in the shortlist above.

[grahamperrin]

twitter_summary_large_image_url: "URL of the default Twitter summary card image (should be at least 280px in width, and at least 150px in height)."

From the Card Validator, for a card with a black rectangle:

INFO: Page fetched successfully
INFO: 18 metatags were found
INFO: twitter:card = summary_large_image tag found
INFO: Card loaded successfully

[jdittrich]

@jdittrich please what's in your admin preferences for these two fields?

Do you know where they can be found? In the link you send is a text file, but as far as I am concerned, we can only access the Admin dashboard and there I could not find it.

[grahamperrin]

Admin dashboard

There's a filter field, find-as-you-type if I recall correctly.

In this screenshot (grabbed from Discourse Meta) someone has filtered for the word sidebar:

In your case I guess that you'll find fields of interest by filtering first for opengraph, then for twitter

Chat: are you a user of Riot? If not I can join you in IRC, if you like.

[jdittrich]

For both parameters, it is this value: http://opensourcedesign.net/images/opensourcedesign-logo.png – which calls up an image which just looks fine to me.