Should attaching an image be more obvious?

UX
21

Hmmm, this worked for me on localhost Firefox latest. .

.wmd-image-button::before {
  content: "\f030";
}

Maybe a one colon vs. two colons thing?

1 Like
22

:before is css2, it should work AFAIK, but yes the correct syntax is ::before

3 Likes
23

I’m sorry but I feel the need to call this out because it feels like a blatant contradiction.

I don’t agree that it’s currently hidden, in your case you’ve opted to expand the functionality of uploads, so Discourse has intelligently changed the icon to reflect this.

Agreed, some services do provide a little image button to upload images, particularly those which exclusively offer the ability to upload images, which Discourse did by default and you moved away from. Still, user choice and all that.

Wait, what?

Your initial assertion was that Discourse doesn’t make uploads obvious enough, although I think we can agree from the above that it does until you change the default behaviour. Your criticism was that uploads weren’t clear, but again until the default is changed it’s at least equal to that of other services. You’ve insisted that you need to keep other uploads enabled, but are now looking to conceal that functionality behind an image icon, effectively making that option much less obvious?

Don’t get me wrong, you’re entitled to change it to any icon you want. Heck, you can use a :banana: if you so wish, but isn’t it a little bizarre to make everything else less obvious instead of engaging in a tiny bit of user education?

24

TBH that’s my feeling as well. If I were to be only allowing image uploads a camera icon might make more sense. But what of users wanting to upload text or PDF or whatever non-image?

Anyway, I was not offering any opinion as to the wisdom (or lack of) such decision, only offering a way.

Who knows, maybe it will work better?

25

Well, I think he has a point, but to me it is mostly about this:

If we decide we don’t care about teaching formatting codes, can we have a simplified, task oriented editor with three big honking buttons instead of 11 tiny toolbar buttons?

It is basically these two things, opposed:

traditional formatted text editor toolbar design

simplified task-based plain text design

Pasted image877×213 39.9 KB

2 Likes
26

Sure Jeff, I get that, but the original point from Jesse was the assertion that uploading isn’t obvious and that a file upload icon isn’t clear for images, that they need some special case or dedicated button.

His use case apparently requires uploads of file types other than images, and is proposing a change that will ultimately make uploading those files less obvious.

Unless I missed something?

You could at least show them side-by-side using something like:

.wmd-image-button:before {
    content: "\f030 \f093";
}

I’m cringing even writing that, though.

27

Well, even changing the icon, picking this out

is harder than picking this out

It’s just fundamental to “are we showing them 12 things to do, or three?”

5 Likes
28

Ok. Thanks for your feedback.

29

I’m using your cringe-worthy code, thanks. :stuck_out_tongue_winking_eye:

Also got it to work with # instead of .

#wmd-image-button:before {
content: "\f030 \f093";
}
30

Ah, you must be a few versions behind then, as that change to . was recent

1 Like
31

Good to watch out for when I upgrade - thanks!

32

I agree that it’s a symptom of having a more complex editor more akin to word processing rather than social media… but it might be worth having two buttons in the instances of files other than images being allowed: the camera for images and the paperclip for other files?

It would probably be fine if they still opened the same upload dialogue, but it could make both actions clearer.

8 Likes
33

I like the paperclip over the up-arrow too.

1 Like
34

I personally like the camera and paperclip idea. But I’m biased because that’s what I’m doing…

@mcwumbly in up arrow’s defense: Should attaching an image be more obvious?

However the paperclip is overwhelmingly used (life according to Google Images) when you search “attach icon”

I think for a user’s understanding, “attach” is probably a better verb and related icon than “upload.”

35

@awesomerobot is there an easy way to change the text area placeholder text and/or color? It doesn’t appear that it’s possible with CSS? I was hoping to customize that for my installation too.

36

Ditto. “Upload” makes sense if that’s all you’re doing, but really you’re adding a file to a text message. AKA an attachment.

37

The placeholder text is set in the HTML, so the only way to override it in CSS is to hide it and use a :before (though maybe the composer input placeholder text should be a setting in the admin?)

So to hide the current text and display your own (in a custom color) you’d need

.wmd-input::-webkit-input-placeholder { color: #fff; }
.wmd-input::-moz-placeholder { color: #fff; } 
.wmd-input:-ms-input-placeholder { color: #fff; } 

.wmd-input::-webkit-input-placeholder:before { content: 'your content here'; color: salmon; }
.wmd-input::-moz-placeholder:before { content: 'your content here'; color: salmon; } 
.wmd-input:-ms-input-placeholder:before { content: 'your content here'; color: salmon; }
2 Likes
38

@awesomerobot That seems to just add to the text, not replace it

Screen Shot 2015-07-24 at 12.34.01 PM.png768×116 17.2 KB

39

Speaking of editing the text, the default seems to have the same “drag or paste” explanation on mobile also. Not applicable on mobile, correct?

40

Another option is to hide all the editing options altogether, ala what Kinja does now…

hide-toolbar.gif811×255 248 KB

Or, have just a few “major” toolbar elements then click to expand them all. Gmail basically does that.

8 Likes