Profile Background Image

(Johan Jatko) #1

The current grey background in the user profile page looks like a placeholder for something that could contain an image.

What about adding an option to link/upload a background image Twitter/GPlus style.

There could be an option to tile the background image like Twitter has.

PS. My email is public on my website, don’t worry bout it. =)

(Jeff Atwood) #2

Trust level: elder? Impressive.

(Johan Jatko) #3

Trying my best to grow a beard to fit in, but its mostly darker patches that can be mistaken for dirt. =(

Further: I’ll try to get a PR(if there is interest for this) for this done when I have finished some school stuff, but im fairly new to Rails so will take a while.

Not sure if it should allow off-site embedding or just uploading thou?

(Martin Wright) #4

The current grey background in the user profile page looks like a placeholder for something that could contain an image.

I was thinking this the other day.

(Torrelles) #5

Oh hi @ArmedGuy :3

I support this!

(Patrick) #6

A great (and rather obvious!) idea. Good stuff!

(Katie Hunter) #7

I support this idea =) ! It is these little features and tweaks that members appreciate and love.

(Jeff Atwood) #8

The more I think about this the more I like it. Would love to see contributions here.

(Torrelles) #9

Can’t really code it, but could get into doing some design mockups, as text-above-image without any means of distinction could make the text unreadable in some cases.

(Jeff Atwood) #10

Generally you can add a black outline to the font, and it works on most backgrounds at that point. And if you grief yourself by adding a neon pink background to your profile, well, as Bobby Brown once said, that’s your prerogative.

(Torrelles) #11


Inb4 “don’t do web design pls”.

(Johan Jatko) #12

I believe Twitter skips doing this? And instead you have to just not have a bad background image?

(Torrelles) #13

Twitter’s descriptions actually have a rather subtle and soft drop shadow.

(Jeff Atwood) #14

Indeed they do, indeed they do:


From left to right, the effects are as follows:

  • Solid background + text. (This is what Windows uses.)
  • Black text, no effects. (As a baseline.)
  • Xor.
  • Simple drop shadow, drawing black at (+1,+1), black at (0,0) then white at (0,0).
  • One-pixel wide outline.
  • Two-pixel wide outline.
  • 50% alpha.

To my untrained eye, the only readable ones are the first one and the “two-pixel wide outline” (which nobody suggested but which I just made up). The enormously popular Xor is completely useless.

(Johan Jatko) #15

As for the button to change the background, should it be like this:

Or possibly like this, kinda like the edit post button is:

Or should it be down with where the edit button for the avatar is?

Update: As I am new to Ruby and Ruby on Rails, im taking my time to analyze the structure of how it works(very confusing at first =D )
So far, Ive added the db column profile_background (suitable name?), added it to the serializer and user.js model + handlebars file.

Now I just have to add the user frontend for adding link(currently no upload feature, I think these images could get quite large, unlike avatars), and do proper sanitizing of URLs to avoid injection. (Any help on what functions exist for me to use?)

(Kane York) #16

Check out the method used to upload backups in /admin/backups - I think the Discourse devs imported a library for resumable uploads.

(Johan Jatko) #17

Well, apparently Twitter just changed their design…

As for the changes, its coming together slowly. Added a site setting so you can turn profile backgrounds off. =)
Also ive changed my mind on offsite embedding and going for upload only instead. (just need to figure out how to do it)

Current “Change Profile Background” button:

The preview is there because the top isn’t visible and it is also collapsed on the preferences page. (It also looked nice!)
The button opens a modal kinda like the Avatar does, where you can remove profile background / upload new one.

(Johan Jatko) #19

PR away!

Did I forget anything or should I change something? =)

EDIT: Discoursebot tells me I have not signed the CLA, but Ive sent it in twice now.
@codinghorror Can you please have a look at it?

(Johan Jatko) #20

FYI, this is now part of the Discourse core. =)
Thanks for all the help!

(Patrick) #21

@ArmedGuy, this is a really great idea and I love your mock-ups. How goes the coding, and how soon do you think until this is available in an Discourse update?