# Should attaching an image be more obvious?

**URL:** https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315
**Category:** UX
**Created:** [July 22, 2015, 10:50pm UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315 "2015-07-22T22:50:36Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [July 24, 2015, 5:29am UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/21 "2015-07-24T05:29:17Z")

</div>

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

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

```

![](https://global.discourse-cdn.com/meta/original/3X/4/d/4de07853ee69654ba46cdded91501979e8e2da87.png)

Maybe a one colon vs. two colons thing?

---

<div class="post-metadata">

### Author: ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [July 24, 2015, 5:47am UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/22 "2015-07-24T05:47:19Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [July 24, 2015, 7:17am UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/23 "2015-07-24T07:17:39Z")

</div>

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

> [@jesselperry](#):
>
> Should uploading function be more obvious?

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.

> [@jesselperry](#):
>
> these functions are very clear and not hidden among other formatting features

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.

> [@jesselperry](#):
>
> If there were some easy way to override the “upload” icon to always be the picture icon through CSS, I would do that immediately on mine. Do you know of a way?

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

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [July 24, 2015, 7:32am UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/24 "2015-07-24T07:32:08Z")

</div>

> [@steve\_pd](#):
>
> but isn’t it a little bizarre to make everything else less obvious

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?

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [July 24, 2015, 8:21am UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/25 "2015-07-24T08:21:06Z")

</div>

> [@steve\_pd](#):
>
> Don’t get me wrong, you’re entitled to change it to any icon you want. Heck, you can use a 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?

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**

![](https://global.discourse-cdn.com/meta/original/3X/2/5/25b671857158b21111ab4d623983e2598ff91346.png)

**simplified task-based plain text design**

 ![](https://global.discourse-cdn.com/meta/original/3X/9/0/900dabfdb460c2299862fb64d74e0d4fc262ca06.png)

---

<div class="post-metadata">

### Author: ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [July 24, 2015, 8:24am UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/26 "2015-07-24T08:24:44Z")

</div>

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:

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

```

I’m cringing even writing that, though.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [July 24, 2015, 8:26am UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/27 "2015-07-24T08:26:07Z")

</div>

Well, even changing the icon, picking this out

![](https://global.discourse-cdn.com/meta/original/3X/d/6/d6d2e2ea7de274edbee1b27cd0ae0a1bd3ce0013.png)

is harder than picking this out

![](https://global.discourse-cdn.com/meta/original/3X/7/b/7b95fcf498ea87b71c75d24b9d80714da4a2ea0c.png)

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

---

<div class="post-metadata">

### Author: ![jesselperry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesselperry/32/119501_2.png) [@jesselperry](https://meta.discourse.org/u/jesselperry)
#### Post date: [July 24, 2015, 11:20am UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/28 "2015-07-24T11:20:27Z")

</div>

Ok. Thanks for your feedback.

---

<div class="post-metadata">

### Author: ![jesselperry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesselperry/32/119501_2.png) [@jesselperry](https://meta.discourse.org/u/jesselperry)
#### Post date: [July 24, 2015, 1:41pm UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/29 "2015-07-24T13:41:44Z")

</div>

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

Also got it to work with `#` instead of `.`

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

```

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [July 24, 2015, 1:42pm UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/30 "2015-07-24T13:42:32Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jesselperry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesselperry/32/119501_2.png) [@jesselperry](https://meta.discourse.org/u/jesselperry)
#### Post date: [July 24, 2015, 1:46pm UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/31 "2015-07-24T13:46:39Z")

</div>

Good to watch out for when I upgrade - thanks!

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [July 24, 2015, 2:19pm UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/32 "2015-07-24T14:19:50Z")

</div>

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.

![](https://global.discourse-cdn.com/meta/original/3X/7/b/7be5fa38f2b3cc6f75b0b6236db7552c600a41c7.png)

---

<div class="post-metadata">

### Author: ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [July 24, 2015, 2:39pm UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/33 "2015-07-24T14:39:34Z")

</div>

I like the paperclip over the up-arrow too.

---

<div class="post-metadata">

### Author: ![jesselperry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesselperry/32/119501_2.png) [@jesselperry](https://meta.discourse.org/u/jesselperry)
#### Post date: [July 24, 2015, 2:54pm UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/34 "2015-07-24T14:54:14Z")

</div>

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? - #5 by codinghorror](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/5)

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.”

---

<div class="post-metadata">

### Author: ![jesselperry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesselperry/32/119501_2.png) [@jesselperry](https://meta.discourse.org/u/jesselperry)
#### Post date: [July 24, 2015, 2:55pm UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/35 "2015-07-24T14:55:18Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Tom\_Newsom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tom_newsom/32/115981_2.png) [@Tom\_Newsom](https://meta.discourse.org/u/Tom_Newsom)
#### Post date: [July 24, 2015, 3:16pm UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/36 "2015-07-24T15:16:33Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [July 24, 2015, 3:20pm UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/37 "2015-07-24T15:20:27Z")

</div>

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; }

```

---

<div class="post-metadata">

### Author: ![jesselperry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesselperry/32/119501_2.png) [@jesselperry](https://meta.discourse.org/u/jesselperry)
#### Post date: [July 24, 2015, 4:34pm UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/38 "2015-07-24T16:34:21Z")

</div>

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

 ![](https://global.discourse-cdn.com/meta/original/3X/2/0/2005240ba3d110a7dd7d1ffb0cc19e1ca479aae7.png)

---

<div class="post-metadata">

### Author: ![jesselperry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesselperry/32/119501_2.png) [@jesselperry](https://meta.discourse.org/u/jesselperry)
#### Post date: [July 24, 2015, 4:37pm UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/39 "2015-07-24T16:37:07Z")

</div>

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

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [August 7, 2015, 7:55am UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/40 "2015-08-07T07:55:14Z")

</div>

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

 ![](https://global.discourse-cdn.com/meta/original/3X/a/4/a439bcc9bb6c9877414aa92776bcc4b23c697061.gif) 

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

 ![](https://global.discourse-cdn.com/meta/original/3X/2/c/2c62dec7da2646d4d5caaa72956dac6767536a40.gif)

[Previous page](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315.md?page=1)

[Next page](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315.md?page=3)
