Repository navigation
Center the showcase link preview image for square crops - #212
Merged
Merged
Conversation
…hats Chats such as Slack crop the middle of the image to a nearly square box in the compact card, which cut the brush and the title of the 1200 x 630 image. The brush, the title and the tagline are now in a column in the middle, inside the 630 pixel square that stays visible.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
In the compact card of Slack, the link preview image is cropped to the middle of the picture in a nearly square box, so the 1200 x 630 image showed half of the brush and "react-sk" (the layout of #211 had the brush on the left and the title on the right).
og-image.pngis redrawn with the brush, "react-sketch", "Showcase" and a tagline in one column in the middle. All of it is inside the middle 630 pixel square, so a square or nearly square crop shows it whole, and the wide cards (Twitter, Facebook, LinkedIn, the large card of Slack) show it with plain background at the sides.Verification
og-image.pngidentical to the one inpackages/showcase/public.packages/), and Slack keeps old previews, so post the link again with a query, for examplehttps://tbolis.github.io/react-sketch/?v=3.