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

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.

enter image description here

Answer

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>

Attribution
Source : Link , Question Author : Shumon Saha , Answer Author : Matt and Neil

Leave a Comment