Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
jdittrich opened this issue May 19, 2017 · 24 comments
Open

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

jdittrich opened this issue May 19, 2017 · 24 comments

Comments

@jdittrich
Copy link
Member

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 grahamperrin changed the title No images previewed in tweet if link to discourse black rectangle (no image) in some tweets that refer to pages in the discourse.opensourcedesign.net domain May 20, 2017
@grahamperrin
Copy link

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):

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
Copy link

grahamperrin commented May 20, 2017 •
edited

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

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

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
Copy link

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

@grahamperrin
Copy link

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,

test

@grahamperrin
Copy link

grahamperrin commented May 21, 2017 •
edited

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
Copy link
Member Author

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
Copy link

grahamperrin commented May 21, 2017 •
edited

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
Copy link

… 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
Copy link

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
Copy link

❗

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

  • default_opengraph_image_url
  • twitter_summary_large_image_url

Related

Validation

💡

Troubleshooting Guide — Twitter Developers refers to:

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

@grahamperrin
Copy link

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
Copy link
Member Author

jdittrich commented May 22, 2017 •
edited

@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
Copy link

grahamperrin commented May 22, 2017 •
edited

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
Copy link
Member Author

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
Copy link

Thanks.

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

@grahamperrin
Copy link

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
Copy link

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

@grahamperrin
Copy link

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:

  • no longer present a black rectangle ✅
  • now present a generic page icon ❓

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 ✅ ❓

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

@grahamperrin
Copy link

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
Copy link
Member Author

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

@grahamperrin
Copy link

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
Copy link

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
Copy link

pdurbin commented May 28, 2017

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
Copy link

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@pdurbin @grahamperrin @jdittrich