-
Notifications
You must be signed in to change notification settings - Fork 10.9k
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
[NEW] Allow request avatar placeholders as PNG or JPG instead of SVG #8193
Conversation
server/startup/avatar.js
Outdated
|
||
res.write(svg); | ||
res.end(); | ||
const svg = `<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" width=\"150\" height=\"150\">\n<rect height=\"150\" width=\"150\" fill=\"${ color }\"/>\n<text y=\"50%\" x=\"50%\" pointer-events=\"auto\" fill=\"#ffffff\" font-family=\"Helvetica, Arial, Lucida Grande, sans-serif\" font-weight=\"400\" font-size=\"72\">\n<tspan y=\"67%\" x=\"50%\" text-anchor=\"middle\">${ initials }</tspan>\n</text>\n</svg>`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Alignment improvements for the generated SVG.
@rodrigok Do we want default initials avatar to be PNG by default (if GraphicsMagick or ImageMagick was installed)? |
@rodrigok It's the short time solution about that we did talk in a recent video call so provides a better way for mobile apps to handle user avatar request. Can you make a review? |
# Conflicts: # server/startup/avatar.js
68f5395
to
56fd1cc
Compare
server/startup/avatar.js
Outdated
@@ -79,11 +95,18 @@ Meteor.startup(function() { | |||
initials = username.replace(/[^A-Za-z0-9]/g, '').substr(0, 1).toUpperCase(); | |||
} | |||
|
|||
const svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 80 80\">\n<rect width=\"100%\" height=\"100%\" rx=\"6\" ry=\"6\" fill=\"${ color }\"/>\n<text x=\"50%\" y=\"50%\" dy=\"0.36em\" text-anchor=\"middle\" pointer-events=\"none\" fill=\"#ffffff\" font-family=\"Helvetica, Arial, Lucida Grande, sans-serif\" font-size="50">\n${ initials }\n</text>\n</svg>`; | |||
const svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 80 80\">\n<rect width=\"100%\" height=\"100%\" fill=\"${ color }\"/>\n<text x=\"50%\" y=\"50%\" dy=\"0.36em\" text-anchor=\"middle\" pointer-events=\"none\" fill=\"#ffffff\" font-family=\"Helvetica, Arial, Lucida Grande, sans-serif\" font-size="50">\n${ initials }\n</text>\n</svg>`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
when converting to png
or jpeg
the result image will have the viewBox
size. is it 80x80 the size we would like it to have? just for reference, we're using a 120x120 image on profile detail.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
@RocketChat/core
Closes #7908
Add ability to request the placeholders in PNG or JPG formats passing a query string
format={png,jpg,jpeg}
.Add ability to request the placeholders in any size smaller than 1024px passing a query string
format=jpg&size=80
, default is 200pxExample https://open.rocket.chat/avatars/@rodrigo.nascimento?format=png&size=500