CSS/JS for Circular cropping of an image
css, imagemagick, javascript, ruby-on-rails
Solution
For the speech bubble part I suggest this tutorial. http://nicolasgallagher.com/pure-css-speech-bubbles/ I use it often for ideas and learning how to do it myself. I give you a tutorial because I want you to learn how to do it. If you gave me code that needed some help, then I'd give you an answer on how to fix it. Do you have any code for this yet?
Also for the cropping, I think a quick way to do this is make a square wrapper div around your image then give it a border-radius (css) that is half of the length of one of the sides. Set the overflow to hidden and you're set.
Cheers!
Problem
my designer passed me a look that I would love to be able to replicate, but i am not very sure how to do so. - the first part is the circular cropping of the avatar (it is a square upload) - the second part is the speech bubble I am open to doing the first part in the backend, but would prefer having a CSS/JS solution.