I can't get the emoji images to display locally

emoji

(Ben M) #1

I’m hosting my own Discourse server and have everything working except I get the browser’s placeholder rectangle when the Emoji images should be. The URLs in the browser look like

<img src="http://10.164.191.59:3000/plugins/emoji/images/smile.png" title=":smile:" class="emoji" alt="smile" width="20" height="20">

The emoji images are only to be found in the plugins/emoji/public/images directory in my Discourse directory. Should they somehow have been copied to plugins/emoji/assets/images (which is where the JS and CSS are)?

I’m running in development mode on version 0.9.9.14 of Discourse on Ubuntu 13.10.


(Ben M) #2

In fact, would it be better to put a question like this on something like superuser.com? Since that’s a Q&A site?


(Jens Maier) #3

Now that you mention it, I can’t figure out how emojis could possibly work in the default install… except that they do.

On my experimental production setup I just made a symlink:
cd public/plugins && ln -s ../../plugins/emoji/public/


(Robin Ward) #4

Out of the box in development mode Emoji works fine for me.

My URLs are relative /plugins/emoji/images/1234.png which works fine. Maybe try rm -rf tmp and restart your dev instance?


(Jens Maier) #5

Oh, right, derp. I added that symlink because I wanted my webserver to serve emoji images directly instead of routing them through Unicorn and the Rails asset pipeline.


(Ben M) #6

Thanks - I’ll try out those ideas when I get back on my Discourse VM.

I’m wondering now why my URLs aren’t relative (and why that makes a difference)? Does anyone know or care to hazard a guess?


(Robin Ward) #7

Did you set the hostname site setting? It could be that.


(Ben M) #8

Some progress…

I think I had some stale links in my posts. I edited a post with a :smile: in, deleting it and re-typing :). This got replaced with :smile:. All good so far. Looking at the HTML I now see a relative path (I must have mucked something up with hostname or similar at some point that made the img src attribute come out as an absolute path). So I now have an emoji image with HTML element like this:

<img src="/plugins/emoji/images/smile.png" title=":smile:" class="emoji" alt="smile">

But that still doesn’t render an image. I can’t see how the route to that src is satisfied though. Is it meant to pick it up directly from the public directory? In which case shouldn’t I have files like public/plugins/emoji/images/smile.png? I don’t!

Interestingly, if I point my browser at http://10.164.191.59:3000/plugins/emoji/images/smile.png I get this image .

And the image is being downloaded but it’s not a valid PNG. I notice that smile.png is actually a text file with the contents unicode/1f604.png. Sure enough, that image is the smiley I’d expect to see, so what should be causing the unicode image to be served?

Can anybody point me in the right direction?


(Robin Ward) #9

There is definitely something fishy with your development install.

If I request http://localhost:3000/plugins/emoji/images/smile.png I get the :smile: emoji as I should.

The images should all exist in plugins/emoji/public/images in your install, and are wired up to be served at the above URL when the plugin loads. If they’re not, the best suggestion I have is to rm -rf tmp and restart your server. Or perhaps check out the project again from github? Maybe something got messed up.


(Mittineague) #10

A while back I started to mess with writing a plugin so our forum could use our old “traditional” vB smilies.
(Windows7, VirtualBox, Vagrant)

At first I thought that Emoji only worked in Production.
I ran in Production but still no joy.
Checking the CLI more closely I saw that Symlinks Emoji relies on were failing because of a Shared folder problem.

I have yet to try moving everything to inside the VM, which I hope will solve my problems, but I am most interested in this discussion.


(Jens Maier) #11

Could you describe your whole setup a bit? What operating systems are you running? Are you running a VM? If so, what OS is running inside the VM? Where are Discourse’s files stored? Internal, external harddisk or perhaps USB stick? On what kind of filesystem (e.g. ext4, HPFS, NTFS, FAT32)?

I’m asking all these things because smile.png is supposed to be a symbolic link to another file, namely unicode/1f604.png. For some reason, the webserver delivers the contents of the link instead of the contents of the linked file and that is a very unusual behaviour – and my guess would be that you’ve stored Discourse’s file on a filesystem that doesn’t properly support POSIX symlinks.


(Ben M) #12

Crikey, that’s probably it @elberet. I’ll check but I’m pretty sure that those files aren’t symlinks to the ones in the unicode directory. The VM that hosts my Discourse is a Ubuntu distro running under Hyper-V on a Windows 8.1 PC. I deployed to the VM using Vagrant (and have repeatedly synced the Vagrant shared folder using the vagrant rsync command).

The couple of levels of indirection here have been confusing me. Maybe it is just that some required symlinks haven’t been generated. I need to poke around…


(Jens Maier) #13

It’s not rsync in this case, but git for Windows which doesn’t create symlinks on NTFS – which is probably for the better, because Windows’ idea of symlinks is… weird, to say the least. Git’s “solution” is to create text files with the symlink’s destination in them.

Yeah…


(Edit: I think I’ve been a bit trigger happy with the rant and didn’t read the rsync part right.)


(Ben M) #14

Yep, you’re spot on there @elberet (and love the image BTW!) . I tried copying the contents of a file from my unicode directory into smile.png in the directory above and sure enough it displays correctly on the site now.

I need a simple solution for this now. Maybe I should fetch the git repo directly on the Ubuntu VM… but that will upset my “Edit stuff in Windows => vagrant rsync => restart Rails server” workflow, which I quite like.

Writing a little script to ‘fix’ (i.e. copy over) the non-symlinked files now…


(Michael Brown) #15

Not if you’re able to mount a samba share containing your files from Windows. Samba is pretty easy to configure, then you can work on Discourse without needing to deal with Windows file system insanity.


(Jens Maier) #16

That’s how I hack on Discourse – so yeah, it should work. :slight_smile: