Can I specify random logos?

Product Support

סיכום מבוסס בינה מלאכותית

In a support thread titled “Can I specify random logos?”, AstonJ asks if it’s possible to randomly display one of three logos on each new session or browser refresh. Alankrit_Choudh suggests using JavaScript to randomly select and apply a logo image on hard refresh, providing sample code that modifies the CSS background of a logo element — though noting it only works reliably if placed before </head>. AstonJ thanks them and plans to test it. Michael_Smart confirms the solution fits his needs and asks for clarification on implementation. sam advises that while the JS approach can work, a better method is to use a custom Ember initializer within a theme component to override the logo URL directly in Discourse, avoiding reliance on window.onload. Gunnar echoes the issue with window.onload failing if executed too late (due to DOM elements not being ready), and requests beginner-friendly guidance on creating an Ember initializer for this purpose, sharing his own similar use case for rotating banner images. The discussion centers on balancing simplicity (JS) vs. robustness (Ember initializer) for dynamic logo/banners in Discourse.

1

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:

2

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

<script>
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");
x=(Math.floor(Math.random()*numimages));
randomimage=(rndimg[x]);
document.getElementById("banner").style.logo-big = "url("+ randomimage +")";
}
</script>

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.

3

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

4

Hi,

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

Best,
Michael

6

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.

7

Sam,

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(
     '/img/pic0.jpeg',
     [ ... ]
     '/img/picN.jpeg'
);

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

window.onload = jlchoosePic;