Skip to content

[NEW] Allow request avatar placeholders as PNG or JPG instead of SVG#8193

Merged
rodrigok merged 10 commits intodevelopfrom
avatar-svg-to-png
Feb 14, 2018
Merged

[NEW] Allow request avatar placeholders as PNG or JPG instead of SVG#8193
rodrigok merged 10 commits intodevelopfrom
avatar-svg-to-png

Conversation

@lindoelio
Copy link
Copy Markdown
Contributor

@lindoelio lindoelio commented Sep 18, 2017

@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 200px

Example https://open.rocket.chat/avatars/@rodrigo.nascimento?format=png&size=500

image

@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-8193 September 18, 2017 20:24 Inactive

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>`;
Copy link
Copy Markdown
Contributor Author

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.

@karlprieb karlprieb requested a review from rodrigok September 18, 2017 21:54
@karlprieb
Copy link
Copy Markdown
Contributor

karlprieb commented Sep 18, 2017

@rodrigok Do we want default initials avatar to be PNG by default (if GraphicsMagick or ImageMagick was installed)?

@engelgabriel engelgabriel added this to the 0.60.0 milestone Sep 19, 2017
@lindoelio
Copy link
Copy Markdown
Contributor Author

@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?

@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-8193 November 22, 2017 09:00 Inactive
@rodrigok rodrigok modified the milestones: 0.60.0, 0.61.0 Dec 7, 2017
@rodrigok rodrigok modified the milestones: 0.61.0, 0.61.1 Jan 22, 2018
@theorenck theorenck modified the milestones: 0.61.1, 0.62.0 Feb 8, 2018
@rodrigok rodrigok temporarily deployed to rocket-chat-pr-8193 February 12, 2018 19:24 Inactive
@rodrigok rodrigok temporarily deployed to rocket-chat-pr-8193 February 12, 2018 19:57 Inactive
@rodrigok rodrigok changed the title [NEW] Add avatar conversion of SVG to PNG. [NEW] Allow request avatar placeholders as PNG or JPG instead of SVG Feb 12, 2018
@rodrigok rodrigok temporarily deployed to rocket-chat-pr-8193 February 13, 2018 19:18 Inactive
@rodrigok rodrigok temporarily deployed to rocket-chat-pr-8193 February 13, 2018 19:22 Inactive
@rodrigok rodrigok temporarily deployed to rocket-chat-pr-8193 February 13, 2018 19:50 Inactive
}

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>`;
Copy link
Copy Markdown
Member

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.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

@rodrigok rodrigok temporarily deployed to rocket-chat-pr-8193 February 14, 2018 11:57 Inactive
@rodrigok rodrigok temporarily deployed to rocket-chat-pr-8193 February 14, 2018 12:15 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants