search

opensourcedesign / organization

:clipboard: Organizational topics for the Open Source Design collective
http://opensourcedesign.net/organization/
GNU Affero General Public License v3.0
92 stars 27 forks source link

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

Open jdittrich opened 7 years ago

jdittrich commented 7 years ago

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 (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 commented 7 years ago

Tweeted 2017-05-15

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

a tweet with the avatar of discourse user pdurbin

the linked post by pdurbin

Tweeted 2017-05-19

One of these two is bugged:

two tweets

The earlier of the two:

a tweet with blackness

the linked post by msiep

msiep avatar 120x120 pixels

The later of the two:

a tweet with the avatar of discourse user xuv

the linked post by xuv

grahamperrin commented 7 years ago

A shortlist of tweets that are bugged

Not intended to be comprehensive.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

grahamperrin commented 7 years ago

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

grahamperrin commented 7 years ago

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:

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:

test

grahamperrin commented 7 years ago

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:

2017-05-21 08-20

qw8wkrhg – 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 commented 7 years ago

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 commented 7 years ago

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:

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 commented 7 years ago

… 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 commented 7 years ago

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 commented 7 years ago

:exclamation:

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

Related

Validation

:bulb:

Troubleshooting Guide — Twitter Developers refers to:

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

grahamperrin commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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:

5c7ee91c416864d88a5f52d88df1929d4bf79784_1_690x448

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 commented 7 years ago

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.

grahamperrin commented 7 years ago

Thanks.

I wonder whether we'll resolve the problem by using a 280 x 150 image for twitter_summary_large_image_url

grahamperrin commented 7 years ago

Try this 280 x 150 for twitter_summary_large_image_url

opensourcedesign-logo-280x150-rough

It's very rough (certainly not the proper typeface) but IMHO good enough for short-term test purposes. Can't look worse than the black rectangle :-) – if this works around the issue in a test tweet then we'll know that we're heading in the right direction. Thanks.

grahamperrin commented 7 years ago

I ran a couple of previously bugged URLs through the Validator on mobile. No black rectangle.

grahamperrin commented 7 years ago

Tuesday morning, reviewing this issue at a desktop computer: definitely some improvement.

Please, what changed? twitter_summary_large_image_url alone?

Brief observations

Re: the shortlist above

https://twitter.com/RebelDevNews/status/860238514126016512 and the two other tweets that refer to the forum home page:

Similarly improved: https://twitter.com/simonv3/status/855409535070195714 with reference to https://discourse.opensourcedesign.net/t/portland-or-usa/100/1, a single-post topic with no image, only the avatar of simonv3 :white_check_mark: :question:

Amongst the tweets where there's not yet an improvement:

grahamperrin commented 7 years ago

opensourcedesign-logo.png (512 x 512 pixels, 4.6 kB), Twitter Cards twitter:image

… http://opensourcedesign.net/images/opensourcedesign-logo.png is probably larger than will ever be necessary in the context of the site assets topic …

At the time of writing, it appears broken at (for example):

jdittrich commented 7 years ago

@grahamperrin the links look fine to me– maybe it was a caching issue?

grahamperrin commented 7 years ago

Checked at a different computer, on a different network: opensourcedesign-logo.png still appears broken in all three examples.

(Hint: click the Twitter Cards tab.)

grahamperrin commented 7 years ago

Back to https://discourse.opensourcedesign.net/t/twitter-black-rectangle-no-image-in-some-tweets-that-refer-to-pages-in-the-discourse-opensourcedesign-net-domain/166/3?u=grahamperrin – and if the issue can't be addressed by local staff then please call @discourse into that topic. Thanks.

pdurbin commented 7 years ago

I just noticed the black rectangle at https://twitter.com/philipdurbin/status/868795340354400256 and I agree that it would be great to fix this somehow. Is there anything I can do to help?

grahamperrin commented 7 years ago

@pdurbin thanks, I added your example to the shortlist above.

https://discourse.opensourcedesign.net/t/-/166/7?u=grahamperrin seeks advice from @discourse.