How to use image in Customer Portal header HTML, without using Image ID?

Question

Documentation says I can choose an HTML file for header image in Customer Portal. Searching on the internet is showing that people have uploaded the image on Documents, and referring to the ID of this Document image in their HTML file. This means that after deployment, I will have to manually change the ID in my HTML file. I want the solution to be sustainable, i.e., no maintenance should be needed after deployment. Is there a way to add an image banner without using ID?

Can you provide me the snippet of HTML code?

Edit: In case I use Header Logo field in Customer Portal, the image will get scaled down to 300px width, like the screenshot below. Hence I can't use this approach if I have to add a Customer Portal image banner covering full width of the page, just above the tabs. Also, in case of using Logo field, the image will have to be less than 20 KiB.

Answer 1

This will smell horrendous but I'm guessing you want HTML in the portal header for good reason ;-)

Upload it as a Static Resource and use JavaScript UserContext.siteUrlPrefix to resolve the path:

<script type="text/javascript">
  document.write(
    "<img " +
      "src='" + UserContext.siteUrlPrefix + "/resource/yourImagePng'" +
    "/>"
  );
</script>

Answer 2

In my case it also worked without the siteUrl prefix (and adherent javascript). So I just put:

<link href="/resource/PartnerPortalAssets/style.css" rel="stylesheet">

for my css file

which would translate to:

<img src="/resource/yourImagePng" />

for your image