Image Badges (flair)

[jbotte]

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

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.

[jbotte]

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]

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