IDEATION: Enable the adding of images to ideas

[BeccaMelhuish]

@ilmartyrk Am making a new high priority issue as a spin-off from this one, for what we agreed to do before the 'hard launch' comms of the ideation feature.

I think the most minimal 'MVP' version to have before the comms, would be to add this button, so users can add a single photo added to the idea.

But (from the research) other things which would be desirable, if there's time, would be:

• The possibility to add multiple images, not just one.
• The possibility to add images into the body of the text as well. (I.e. like we have in topic texts)
• The possibility to add images to idea replies, not just to the idea itself.
• If it's a similar amount of work to enable attaching images as it is to enable attaching other documents (e.g. PDFs, something that also came up in the testing) then we could do that too.

Do we need designs from @kevincrepin on the UX/UI of what happens after you click the 'Add image' button? I.e. the view for adding the image/s, and also how it looks once added, when someone is viewing the attached images, etc.?

[ilmartyrk]

@BeccaMelhuish everything is possible, as the idea description and argument explanation work the same way and use the same markdown editor we can implement the same solution quite easily. I already tested the solution of adding an image with the button that is outside of the editors toolbar and it works, I will have to solve the image uploading part and also making the editor be in the "preview" mode so that the text wouldn't look weird for average user

[kevincrepin]

We have an example for attachments:

@ilmartyrk : https://www.figma.com/design/gOJ4i00538e0qaP6IKIPVE/Platform-2.0---Design?node-id=2-8742&t=Xkizp56Otqv8zCDK-1

Choosing a file is done through the native OS so doesn't need design.

[BeccaMelhuish]

@kevincrepin Great, thank you!

What about how it should look when the image is added though, i.e. in the published idea? A visual preview of some sort showing the image/s in thumbnail and then a way to open them up, and click through them if there's more than one?

[kevincrepin]

I'm thinking a bit that a thumbnail is no problem, but I would be inclined to open these in the most basic "open in a new tab" kind of way, because we are already in a popup with the idea. and this popup also has the arrows to go trough the other ideas. It would become messy and confusing to then also have a gallery lightbox open on top of this...

[BeccaMelhuish]

Not sure I've seen this UX anywhere, so might be a bit unexpected, but how about when you hover over a certain thumbnail it expands to a more visible size (in the same position as shown above, but bigger). But then when you click on the file name (and maybe also when you click on the thumbnail?) it opens full size in a new tab?

Or, that when you hover, an icon appears (e.g. magnifying glass), then when you click, it expands it to a more visible size?

I guess on mobile it would need to be when you tap the thumbnail.

I feel like only opening in a new tab is quite inconvenient / a bit annoying for anyone viewing a lot of photos (which could be the case sometimes, if it's a very image based discussion).

[ilmartyrk]

@BeccaMelhuish @kevincrepin the solutuion is quite different from what I initially thought, but it will make the file handling a lot easier. And for mobile the image can already be 100% width

[BeccaMelhuish]

Nice, thank you @ilmartyrk!

A few things from me:

• The 'Add image' button is a bit oversized, should be the same height as the other:

• When I had already added an idea, then went to edit idea, deleted the image, added a new image, then tried to 'update idea', I got this insufficient permissions error:

• Here I had added two images but only one appeared, was it meant to be working for multiple:

• When I went to upload an idea, one that I had previously tried to add was already there attached in the (what should be) empty new idea window:

• Could there be a bit more gap between the image and the filename:

• The image popping up on hover feels a bit weird to me. A bit unexpected and can be easily done by accident. My idea had been rather that it would expand like so (sketch below) within the window, but that might be a bit odd/hard to use as well, especially if there are multiple images, as they'd be moving around. Will tag @kevincrepin to review. We could just keep it as Kevin originally suggested, that it opens in a new tab (rather than downloads), but maybe make the thumbnail quite a bit bigger, so you can get a relatively good idea of what the photo is of before you click to open?

• Another one for @kevincrepin, when I was editing an idea then wanted to exit without saving, I accidentally clicked the top right X, rather than the bottom left X. Top right X closed both pop-ups at once, and left me quite confused/disoriented. Should the top right X disappear while the 'Edit idea' box is open, to avoid confusion? (As it sits just to the top right of the edit box - quite easily confusable). Or just leave it and keep an eye in future tests?

[ilmartyrk]

@BeccaMelhuish made some fixes and updates

[BeccaMelhuish]

Thanks @ilmartyrk! Checked and still a few things :)

• The way the image pops up is preferable to the previous version, but it's still a bit unexpected, I feel it might make users jump :D Hopefully @kevincrepin can review and see if he has any ideas or if we should just stick to making the thumbnails a bit bigger and opening in a new tab only. Maybe next to the image we can have a 'magnifying glass with plus' icon, that you can click to expand the image. And same with minus to make it small again? That way they'll be actively choosing to make it bigger rather than it happening to happen when they move their mouse over it.

• When you click on the URL for the photo, it looks for a second in my browser like it will open in a new tab, but then it still just auto downloads. Can we have it open in a new tab, and then users can save it from there if they want to? (I think this was @kevincrepin's suggestion initially).

• Added 1 image to an existing idea (in edit mode). Then went into edit again and added a second image. I showed in edit mode, but then once published there was still only 1:

And then when I go into edit mode, it still shows 2:

• In another case, I made a new idea with 1 image, but when posted it wasn't there:

Again when I went into edit mode it was:

• Went to try making a new idea again, and found the image that I'd tried to add above was already attached:

• Tried deleting the above idea, and then adding one, and when publishing the idea the photo wasn't there. Also tried again with a new idea, again the photo didn't publish. (So just confirming that the problem seems to be every time with a new idea, not occasional):

• Can we have the image show up when in edit mode, rather than only the URL?

• I'm getting this at random points when testing (not clear why/due to what it's popping up):

• It would be great to be able to add images to replies too, but I guess that's a lot more work so can make a separate issue for that as lower priority for now?

[ilmartyrk]

@BeccaMelhuish posted more fixes

[BeccaMelhuish]

Seems to be working much better now!

Though I got this error again, it just randomly popped up when I was looking and thinking, not doing anything:

And re deleting images, there were 2 initially here (below). I went in to edit mode to delete one and it disappeared fine, then went in to delete the next one and it was still showing. When I went out and back into the idea the second image had also been deleted, so I think this was just an issue with it not displaying what had actually happened? Is there a way to make sure it always updates?

And then if possible to add the image thumbnail in edit mode too, so they can see the image they've added before they post it, but if that's a big job I'll make a separate issue?

[kevincrepin]

I still think opening them in new tabs is fine in this context. Especially when there are multiple then in that way you could at least have them all open at once. Otherwise if we open it within the platform you have to open and close them one by one.

The thumbnail can be a bit bigger, for example 80px wide. And I don't think this hover interaction really works, it's a bit unexpected behaviour, so I would not do this. Just (bigger) thumbnail, filename and open in tab (not download as it does now). It's not a bad idea with the expand/minimise magnifying glass, but for me the problem is that all of this is crammed into this small popup window. If it's an image with a bigger size (some diagram or smt detailed), then we should still allow to view the full size, so they would still need to be able to download it or open it fully in the browser.

---

About editing the idea and still having the idea open behind it: I would approach this idea popup the same as the other content when an overlay is opened, namely darken it. We already have this darken layer over the topic behind it, so adding another one is maybe a bit weird, but what if that darken layer is on top of the idea popup when the edit overlay is open? Then this idea popup will also feel "disabled".

---

I also had the issue when I posted my idea that the image didn't show until I closed that idea and opened it again, so same issue as Becca has.

[BeccaMelhuish]

OK thank you @kevincrepin! Let's do it like that then - no 'magnifying hover', just 80px wide thumbnails and open in tab (not download).

Having the darker layer over the idea during edit also sounds a great solution :)

[ilmartyrk]

@BeccaMelhuish @kevincrepin downloading is caused by your browsers default behavior.

[BeccaMelhuish]

@ilmartyrk Ah OK, there's no workaround to fix it? To me it's really not a user-friendly solution..

@kevincrepin Does this change anything from your side?

[kevincrepin]

Yep, I agree if this automatically downloads the image, that's no good.

Then let's open it within the popup, with a possibility to close again and also to download the image.

So default looks like this:

And when the image is opened like this:

@ilmartyrk you can find this here: https://www.figma.com/design/gOJ4i00538e0qaP6IKIPVE/Platform-2.0---Design?node-id=13338-115399&t=dkotUyTY3qUxWrQ8-1