website: Update avatar documentation & demos #963
Conversation
FlyersPh9
commented
Jan 6, 2023
•
FlyersPh9
commented
- Add avatar demos for the different options.
- Update documentation, include adding hyperlinks to other mentioned components.
|
Once #1040 merges, this will get unblocked. |
| <Avatar | ||
| abbreviation='GB' | ||
| backgroundColor={getUserColor('Greg Bentley')} | ||
| image={<img src='https://www.bentley.com/wp-content/uploads/greg-bentley-hr-profile.jpeg' />} |
There was a problem hiding this comment.
Where can I host an image to use instead of this one from bentley.com? I don't want to use https://itwin.github.io/iTwinUI/css/assets/user-placeholder.png because it looks too close to the SVG examples.
There was a problem hiding this comment.
you can put it in the public folder under apps/website and it should be available at this url: https://itwinui.bentley.com/<your-file-name.jpg> (after it's deployed)
if you decide to do this, i would recommend not using a human face (even if it's AI-generated). Instead, you could use something like this: https://stock.adobe.com/search?k=robot+avatar&asset_id=359684982
There was a problem hiding this comment.
oh i just realized this is for the demos. we probably don't want to show the full domain in the code, so what you really need is to put an image inside the sandbox.
there might be cleaner ways of doing this, but one easy option is to convert it to a data uri and use it in the src attribute of the img.
<img src='data:image/...'>
the url is not the focus, so it gets the point across (that you can use an tag)
There was a problem hiding this comment.
Good suggestion, replaced with that robot & used a data URI.
There was a problem hiding this comment.
oh wow that url is incredibly long. maybe move it out to a variable
const imgSrc = `data:image/...`;
<img src={imgSrc} />
There was a problem hiding this comment.
move it out to a variable
bump
There was a problem hiding this comment.
Just pushed this change, let me know if I did it right.
FlyersPh9
requested review from
a team,
mayank99 and
r100-stack
and removed request for
a team
