Pages: 1
Print
Author Topic: WebHelp: Including an image in the footer  (Read 3983 times)
jlm05
Member

Posts: 79


« on: June 04, 2012, 12:58:28 PM »

I've been experimenting with trying to include an image in the footer for WebHelp.

However, whenever I include an <img> tag in the footer.xml file, the footer does not display at all. The image is in the location I set, although if it wasn't I would expect a broken image, not the entire footer going away.

Are images not allowed? If so, how do I go about including them?

Thanks,

Janice
Logged
Derek Read
Program Manager (XMetaL)
Administrator
Member

Posts: 2621



WWW
« Reply #1 on: June 04, 2012, 01:39:16 PM »

This file is expected to contain XHTML (this is dictated by the DITA Open Toolkit not XMetaL Author Enterprise). I mention this for two reasons: some people may try to include DITA markup in this file, and others might not realize the difference between HTML and XHTML and that XHTML is expected. It needs to be XHTML because the DITA Open Toolkit parses this file with an XML parser that does not handle HTML (SGML).

Here's an example of the content of a file that works for me:

<div class="mycustomfooterclassname">
© 2012 XYZ Company<br/><img src="xyzcompanylogo.jpg"/>
</div>

The most common problem you are likely to run into is that you have not properly closed the <img> tag. Essentially, instead of writing XHTML you have written HTML (ie: HTML as SGML not XML).

You can check to see what specific problems your footer file is causing (or any other errors when producing output) by opening the Output log file: File > View Output Log. Search for references to the file name (in your case footer.xml) to see if it is mentioned.
Logged
Scibert
Member

Posts: 25


« Reply #2 on: June 04, 2012, 03:33:41 PM »

Further to Derek's response, I would like to add that the copyright symbol might prevent the footer from being displayed in some browsers.

A safer variation would be:

<div class="mycustomfooterclassname">
   &#169; 2012 XYZ Company<br/><img src="xyzcompanylogo.jpg"/>
</div>


Also, where should the xyzcompanylogo.jpg file be placed for it to be automatically included in the WebHelp output?
Logged
Derek Read
Program Manager (XMetaL)
Administrator
Member

Posts: 2621



WWW
« Reply #3 on: June 04, 2012, 05:41:18 PM »

The path is relative in my example and will need to resolve as such. In my example it is in the same folder as the file referencing it.

If your topic files are all in the same folder on input then they will all be in the same folder on output and you can put that image in the same folder and use that path. If not, and they end up in different folders then most websites would probably organize things in the following way:

http://website.com/folder1/sometopic.html  [contains your footer]
http://website.com/folder2/sometopic.html  [contains your footer]
http://website.com/images/xyzcompanylogo.jpg


Then the path would be this for all files:
src="../images/xyzcompanylogo.jpg"

Generally best practice to use a relative path so you can move web pages around rather than having src="http://website.com/images/xyzcompanylogo.jpg"
« Last Edit: June 04, 2012, 05:44:57 PM by Derek Read » Logged
jlm05
Member

Posts: 79


« Reply #4 on: June 05, 2012, 05:52:50 AM »

I'm still having trouble. I'm able to insert an image if it is already being used in the guide.

However, when I add the logo image (which isn't used in the guide topics) it doesn't get copied over to the WebHelp output, so the image link doesn't work.

So for example, our guide source files include a src directory for the XML topics, and an images directory for all of our images. The footer.xml file is also in src.

I add the logo image (same file format as the other images) to the images directory of our source files.

In the footer file, I add:

<img src="../images/logo.png"/>

When I generate the WebHelp output, the logo.png file is not in the images directory of the output, so the img tag in the footer does not work.

Even if I copy the logo file to the src directory, and just have the link <img src="logo.png"/>, the image file isn't copied to the WebHelp output src directory.

Is there something else I need to do to get that image file to be copied over?

Thanks,

Janice
Logged
jlm05
Member

Posts: 79


« Reply #5 on: June 05, 2012, 06:23:45 AM »

After my previous post, I got it to work by putting the image in the WebHelp customization folder (in xmwebhelp/images), which is probably where it should be anyway, since it will be used by all of our guides.

Thanks again,

Janice
Logged
Derek Read
Program Manager (XMetaL)
Administrator
Member

Posts: 2621



WWW
« Reply #6 on: June 05, 2012, 10:51:42 AM »

The DITA OT does not have any code that will copy files referenced in the header or footer, so this is expected for all XHTML-type outputs. Sounds like you have the right solutions for WebHelp though.
Logged
Pages: 1
Print
Jump to: