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.

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

Image Badges (flair) #4254

Closed
jbotte opened this issue May 25, 2023 · 2 comments
Closed

Image Badges (flair) #4254

jbotte opened this issue May 25, 2023 · 2 comments
Assignees

Comments

@jbotte
Copy link

jbotte commented May 25, 2023

Search Terms

image badge, image badges, flair, image user badge, user badges

Suggestion

Allow image url strings for badges so sites can create something similar to "flair" for their comment sections

Here is an example of what I implemented on a test server

Screenshot 2023-05-25 at 6 41 40 PM

Here is a code excerpt of me implementing this on my test server.

https://pastebin.com/g4EtiJEM

I also plan on adjusting the regex to make sure it handles urls query params.

The function excerpt is from my modified AuthorBadges.tsx

Use Cases

We want to encourage user interaction and reward them for different things with flair icons.

@nick-funk nick-funk self-assigned this Jun 8, 2023
@jbotte
Copy link
Author

jbotte commented Jun 12, 2023

Here is my updated code with support for query parameters (i may serve images through a cdn that needs query params to retrieve proper sizes)

import React, { FunctionComponent } from "react";

import { Tag } from "coral-ui/components/v2";

interface Props {
  badges: ReadonlyArray<string>;
  className?: string;
}

const AuthorBadges: FunctionComponent<Props> = ({ badges, className }) => (
  <>
    {badges.map((badge) => {
      if (/^https?:\/\/.*\.(?:png|jpg|jpeg|gif)(\?.*)?$/i.test(badge)) {
        className = className + " flairBadge"
        return (
          <Tag key={badge} color="dark" className={className}>
            <img src={badge} />
          </Tag>
        )
      }
      else {
        return (
          <Tag key={badge} color="dark" className={className}>
            {badge}
          </Tag>);
      }
    })}
  </>
);

export default AuthorBadges;

@tessalt
Copy link
Contributor

tessalt commented Jun 13, 2023

Hi there, thanks for the suggestion, we'll add to our backlog.

@tessalt tessalt closed this as completed Jun 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants