Can I specify random logos?

Is it possible to (via a plug-in if necessary) randomly choose a logo (and small logo) from a set of 3 every time someone starts a new session (or until their browser refreshes the assets for the logo)?

The Ruby code is trivial - but how can we incorporate that into Discourse? :confused:

You could do it with JS i suppose, here is code i hope it works

if (document.getElementById) { window.onload = swap };
function swap() {
var numimages=4;
rndimg = new Array("IMAGE URL 1", "IMAGE URL 2", "IMAGE URL 3", "IMAGE URL 4");
document.getElementById("banner").style.logo-big = "url("+ randomimage +")";

PS this only works on hard refresh. also the css to big logo would be

.logo-big { 
background-image: url('DEFAULT LOGO IMAGE URL HERE');

The JS would work because i am using that to rotate my banner image randomly on every hard refresh not sure the exact code for logo CSS.


Thanks - I’ll give that a go :slight_smile:


This is exactly what I need! Is the second part required? Also where does the first part get put exactly?


This is doable in a theme component, the method by @Alankrit_Choudh can work but I would recommend adding a custom ember initializer instead that overrides the URL in discourse instead of relying on window.onload here.

1 Like


I’ve run up against the same problem. window.onload works if called before </head>, but not if called later. And because of that, document.getElementById fails (the ID isn’t defined yet).

Could you point me to a primer/example/howto for how to create a custom ember initializer for someone who has no experience with ember?

For completeness, what I’m trying to do is display a random banner image from an array of URLs:

var jlmyPix = new Array(
     [ ... ]

function jlchoosePic() {
     var jlrandomPicNum = Math.floor(Math.random() * jlmyPix.length);
     document.getElementById("jlmyPicture").src = jlmyPix[jlrandomPicNum];

window.onload = jlchoosePic;