Cannot get images to work in custom UI theme
One of my clients want to add their logo to the top of their CLM applications via Custom HTML and I have been trying to help them, but for the life of me I can't get it to work.
I have followed the directions in the wiki at https://jazz.net/wiki/bin/view/Main/WebUITheming#Image_References and have created a very simple theme to test it out, but it seems like there's something weird going on and the directions aren't quite correct.
My theme zip file is very simple and looks like this:
mytheme.zip
\html
aboveBanner.html
\img
logo.jpg
\js
myScript.js
The code in aboveBanner is just a simple HTML snippet that defines an image but with its src property empty, like so:
-----
<img id="imageNodeId" alt="my logo goes here" height="170" width="470" align="left">< / img>
-----
and my JavaScript file is exactly as detailed in the wiki entry:
-----
dojo.require("jazz.util.theming"); // This should already be included in the page, but it's safe to add it. dojo.ready(function() {
dojo.attr("imageNodeId","src",jazz.util.theming.themeFileUrl("img/logo.jpg"));
});
-----
I load the zip up and apply the theme, and I see the empty box where the logo should be, and the alternate text, but no image.
Upon playing around a lot more and throwing alert() functions into various places, what I have found is that the actual image is being located properly and can be loaded, but that the dojo.ready() callback function is being triggered BEFORE the custom HTML gets loaded, and so the image ID (and therefore its src property) is never found.
I have checked this by putting in one of the existing ID values close to where the custom theme is normally loaded and that ID is picked up just fine. I can also see that the image clearly hasn't loaded when my alert functions are hit.
I have also tried to put the JavaScript directly into the HTML, both before and after the image declaration, and I have tried a pure JavaScript getElementById, as well as just pulling the image location and trying to insert that into the image but I must be doing something wrong there too because the script doesn't even execute :-(
Has anyone managed to get this working for them, using custom HTML? I can see the pure dojo and dijit approach would work but my client wants to use the HTML approach as it's simpler... hah!! :-) .
One answer
for one my themes, the images references started showing up after I used that relative path
hope this helps
Comments
Thanks Dinesh,
I'm assuming by that you mean to hard code the src URL to that value?
The problem with that is that the wiki states that there's no guarantee that URL will work consistently, and that to access any file in your zip you should always use the jazz.util.theming.themeFileUrl() function to get the absolute path at runtime.
ok, i understand...
from the sample where i have it working.. though I understand path is hard coded, its still a relative one.. relative to the application theming resource path
so
if your theme zip has the image under "img" directory, with the name "logo.jpg"
and
the application theming resource path being "/ccm/_theming/resource"
the path that works for me is "/ccm/_theming/resource/img/logo.jpg"
Comments
Donald Nong
Jun 23 '14, 3:04 a.m.Hi Davyd,
Davyd Norris
Jun 23 '14, 4:05 a.m.Hi Donald,
Yes that's the issue - the client wants to use Custom HTML and not dojo. The only reason the dojo calls are being used is as per the wiki advice - to find the absolute URL for the image inside the theme.
I have suggested they look at the dojo example, but they want something that can be done with minimal scripting skills, so custom HTML is far preferred.
Even putting this aside, we may need to correct the wiki as the code snippet shown there does not seem to work correctly with the HTML approach.