Expand - Enlarge Image Toggles in CHM

Please post all questions relating to Help & Manual 6 here!

Moderators: Alexander Halser, Tim Green

Mary van Kemenade
Posts: 22
Joined: Mon Feb 16, 2009 10:36 am
Location: Sydney Australia

Expand - Enlarge Image Toggles in CHM

Unread post by Mary van Kemenade »

I just noticed with the latest version when printing to CHM and I click to view my image that is a toggle, it now pops it up on the screen instead of just enlarging in place. This is a major, major problem for me, all manuals have the format that the image is a toggle at the top and then below it a table explaining all the fields in the image. If you can no longer view the enlarged image in its place with the text below I will have to either rewrite all manuals, which is not an option or go back to an earlier version...Is there any other options you can think of to get the old, desired function of expanding the image in its place?

Also I had created Expand All and Collapse All options in the header and that no longer seems to work to expand the images? I am pretty sure it worked in earlier versions. I did not created those options myself as I am not good with XML at all. I searched the forum and asked for help on how to create those and ended up with this text in my HTML Page Templates, Default

<a href="javascript:HMToggleExpandAll(true)" title="Tooltip text" class="navilink">Expand All </a>
<a href="javascript:HMToggleExpandAll(false)" title="Tooltip text" class="navilink">Collapse All </a>
<a href="<%HREF_DEFAULT_PAGE%>" class="navilink">Top</a>&nbsp;
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Expand - Enlarge Image Toggles in CHM

Unread post by Tim Green »

Don't worry, you can change this behavior back. Just go to Configuration > Publishing Options > HTML Help > HTML Export Options and turn off the option "Display toggle images in a lightbox overlay". 8)

The ExpandAll function is now only applied to text toggles, not to image toggles, because so many people complained that they didn't want the image toggles to expand as well. This can't be changed directly at the moment, but we've made a note of the request. You could do it yourself by adding the following function to the your HTML page template:

Code: Select all

var HMGalleryExpandAll = function(value) {
	if (HMGallery.length != null) {
		for (var i=0; i< HMGallery.length; i++) {
			HMToggleExpand(HMGallery[i], value, (value && hmAnimate));
			}
		}
	}
Add this to any block of javascript code in the <head> section of your HTML page template (in your skin if you are using a skin, in your project if you are not. Then you can expand the images at the same time as the normal toggles by extending your current links as follows:

Code: Select all

<a href="javascript:HMToggleExpandAll(true);HMGalleryExpandAll(true);" title="Tooltip text" class="navilink">Expand All </a>
<a href="javascript:HMToggleExpandAll(false);HMGalleryExpandAll(false);" title="Tooltip text" class="navilink">Collapse All </a>
<a href="<%HREF_DEFAULT_PAGE%>" class="navilink">Top</a>&nbsp;
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Mary van Kemenade
Posts: 22
Joined: Mon Feb 16, 2009 10:36 am
Location: Sydney Australia

Re: Expand - Enlarge Image Toggles in CHM

Unread post by Mary van Kemenade »

Thanks so much, I would never have found the Toggles images as light overlay! That seems to have worked well, the images now expand in place.
I am running 6.2.3 Build 2670. When I published it seems that Expand All still did the images? that is what I wanted so I guess I should not complain ;-) So that leaves me a little confused then by the rest of the text you sent?! I tried adding the text in <head> section, I replaced the text I already had that looked the same and added that, but when I try expand all I get a Java Script error.

For the other code you sent, I am not sure 'where' the HTML text to add it? Sorry for all the questions I really want to learn how to do some of this myself but there is never time...

Also another question. I publish multiple manuals, I was thinking that a Skin is probably the way to go not sure though, I was hoping to get an image in the title bar of CHM manual. is that possible? Can I do that now with HTML page templates? The general look the manuals when published to CHM is the same only the name in the title bar is different.

here is what it looks like now, without the code for updated expand all

Code: Select all

<%DOCTYPE%>
<html>
<style type="text/css"> 
a.navilink { 
  color: #666666 ; 
  text-decoration: none; 
  } 
a.navilink:visited  { 
  color: #666666 ; 
  text-decoration: none; 
  } 
a.navilink:hover { 
  color: #666666 ; 
  text-decoration: underline; 
  } 
</style>
<head>
   <title><%TOPIC_TITLE%></title>
   <meta name="generator" content="Help & Manual" />
   <meta name="keywords" content="<%TOPIC_KEYWORDS%>" />
   <meta http-equiv="Content-Type" content="text/html; charset=<%DOCCHARSET%>" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <link type="text/css" href="<%STYLESHEET%>" rel="stylesheet" />
</head>
<body style="margin: 0px 0px 0px 0px; background: #FFFFFF;">

<IF_TOPIC_HEADER>
<table width="100%" border="0" cellspacing="0" cellpadding="5" bgcolor="#CCCCFF">
  <tr valign="middle">
    <td align="left">
      <%TOPIC_HEADER%>
    </td>
    <td align="right">
     <span style="font-size: 10pt">
        <a href="javascript:HMToggleExpandAll(true);HMGalleryExpandAll(true);" title="Tooltip text" class="navilink">Expand All </a>
<a href="javascript:HMToggleExpandAll(false);HMGalleryExpandAll(false);" title="Tooltip text" class="navilink">Collapse All </a>
<a href="<%HREF_DEFAULT_PAGE%>" class="navilink">Top</a>&nbsp;
         <IF_PREVIOUS_PAGE><a href="<%HREF_PREVIOUS_PAGE%>" class="navilink">Previous</a>&nbsp;</IF_PREVIOUS_PAGE>
     <IF_NEXT_PAGE><a href="<%HREF_NEXT_PAGE%>" class="navilink">Next</a></IF_NEXT_PAGE>
        </span>
    </td>
  </tr>
</table>
</IF_TOPIC_HEADER>

<!-- Placeholder for topic body. -->
<table width="100%" border="0" cellspacing="0" cellpadding="5"><tr valign="top"><td align="left">
<%TOPIC_TEXT%>
</td></tr></table>

</body>
</html>
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Expand - Enlarge Image Toggles in CHM

Unread post by Tim Green »

Hi mvk (if you'd like to change your user name to something more "salutation-friendly" just send me a mail at support AT ec-software.com (replace the AT with @) 8) ),
For the other code you sent, I am not sure 'where' the HTML text to add it? Sorry for all the questions I really want to learn how to do some of this myself but there is never time...
This depends a little on the existing code in the template or skin you are already using. The easiest solution would be to send me what you're using now -- your project in single-file .hmxz format if you're not using a skin or your .hmskin skin file if you are -- and I'll add it for you and include a description in my reply so that you know how to do it yourself later. Just mail it to the support address at support AT ec-software.com (replace the AT with @).
I was hoping to get an image in the title bar of CHM manual.
In CHM the only thing you have control over as the author is the body and header of the topic in the topic display area. The CHM viewer is a Windows component and you can't add anything there, although you can configure what components are displayed (in Configuration > Common Properties > Help Windows > HTML Help: HTML Help Options). So if you want to insert an image in your header it will have to be in the header of your topic.

There are two ways to do this, and you can combine both. In both cases, to make the image file accessible you need to add it to the Baggage Files section of your project (if you are not using a skin) or your skin file (if you are using a skin). Just select Project Files > Baggage Files in the Project Explorer, then use Add File in Project > Manage Topics to add the files. IMPORTANT: The image file names must be short and should not contain spaces or special characters. If they do, they won't work in many browsers! Also, the image should be a PNG, JPG or GIF.

1) Background image for the entire header

Change the definition for the header table as follows:

<IF_TOPIC_HEADER>
<table width="100%" border="0" cellspacing="0" cellpadding="5" style="background:url('your_image.jpg') no-repeat;" >
<tr valign="middle">
<td align="left">
<%TOPIC_HEADER%>
</td>


The version above is for a single image that needs to be wide enough to fill the entire width of the viewer, no matter how wide the user makes it. Note that that image file name is enclosed in SINGLE quotes. This is crucial and it won't work without it! Alternatively you can use an image that can repeat. To do that replace the "no-repeat" with "repeat-x" to repat horizontally only, "repeat-y" to repeat vertically only and "repeat-x repeat-y" and nothing at all to repeat in both directions (tiled images are the default for backgrounds).

2) Image inserted next to the text in the header

For this you just need to add an additional cell to the left of the main topic header and put the image in it in an image tag so that it is displayed to the left of the header on the same level. You can combine this with a background image, so I've left that in (the <td> ... </td> tag pair defines a cell, the <img /> tag defines the image). Note that it's important to include the width and height of the image in the IMG tag. Not doing that will slow down page building. I've set the alignment in the cell to center the image. If you want to change this you can change the align= value to "left" or "right" and the valign= value to "top" or "bottom".

<IF_TOPIC_HEADER>
<table width="100%" border="0" cellspacing="0" cellpadding="5" style="background:url('your_image.jpg') no-repeat;">
<tr valign="middle">
<td align="center" valign="middle">
<img src="logo-image.png" width="24" height="24" border="0" />
</td>

<td align="left">
<%TOPIC_HEADER%>
</td>

I was thinking that a Skin is probably the way to go not sure though
Skins are by far the easiest way to apply the same template to multiple projects. Once you have got it set up you can save your project as a skin with Save As... in the File menu. You can also try out the skins supplied with Help & Manual in the /Templates/HTML Skins folder in the Help & Manual program directory.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Mary van Kemenade
Posts: 22
Joined: Mon Feb 16, 2009 10:36 am
Location: Sydney Australia

Re: Expand - Enlarge Image Toggles in CHM

Unread post by Mary van Kemenade »

I have just upgraded to version7 but I cannot find this option anymore. I do not want the toggles popping up on the screen I want them expanding on screen as they did. Few years I could use the option listed below but now I do not see the option to untick display light box overlay? can you please tell me where to find it? thanks
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Expand - Enlarge Image Toggles in CHM

Unread post by Tim Green »

Hi Mary,
Mary van Kemenade wrote:I have just upgraded to version7 but I cannot find this option anymore. I do not want the toggles popping up on the screen I want them expanding on screen as they did. Few years I could use the option listed below but now I do not see the option to untick display light box overlay? can you please tell me where to find it? thanks
This option is no longer available because you no longer need it, since responsive images are now supported. If you want the image to expand in-place, don't create a toggle image at all. Instead, insert a normal image and activate the new option "Zoom is proportional to page width". The image will then never get wider than the page (if it is directly on the page) or the table cell it is in (if it is in a table). It will also never get larger than its own 100% size.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Mary van Kemenade
Posts: 22
Joined: Mon Feb 16, 2009 10:36 am
Location: Sydney Australia

Re: Expand - Enlarge Image Toggles in CHM

Unread post by Mary van Kemenade »

Um ok but I am not sure that helps. so that means that I need to go back and update all the manuals I author and remove the toggles and add the images back in if I want it to work? I have approximately 7 manuals and I guess around 2000 image files added in. The new feature sounds great and will be a good thing for going forward making things easier but I am bit concerned since I have spent years updating all these manuals with images toggles and they need to see the image with the text below it and now they cannot. Any suggestions other than rolling back to version 6? or trying to find time to remove all the toggles? thank you
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Expand - Enlarge Image Toggles in CHM

Unread post by Tim Green »

Hi Mary,

I'm going to discuss this with our developers to see what we can come up with here. However, I really wouldn't go back to HM6 just because of this... 8)
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Mary van Kemenade
Posts: 22
Joined: Mon Feb 16, 2009 10:36 am
Location: Sydney Australia

Re: Expand - Enlarge Image Toggles in CHM

Unread post by Mary van Kemenade »

Ok thanks I would appreciate that. I really would though consider going back based on the amount of toggles and layout of the manual. This is one of my many jobs and I just do not have the resources to devote to updating them all!
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Expand - Enlarge Image Toggles in CHM

Unread post by Tim Green »

Hi Mary,

I've discussed this with Alexander. We're going to add a modified script to the output that will allow existing inline image toggles from existing projects to behave as before in the output. You won't be able to create new inline image toggles, but the old ones will continue to work so that you don't need to update them (or at least, not all at once).
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
User avatar
Alexander Halser
EC-Software Support
Posts: 4098
Joined: Mon Jun 24, 2002 7:24 pm
Location: Salzburg, Austria
Contact:

Re: Expand - Enlarge Image Toggles in CHM

Unread post by Alexander Halser »

Hi Mary,

The functionality of image toggles is actually in the skins, not in the image toggle itself. Below I tell you how to re-activate the old behaviour in HM7.

Just some background for the change: we want to put as much as "intelligence" as possible into the skins that define the HTML layout in the browser. This is the only way to make them truly responsive and display content approriate for the current viewing device. The new responsive images mostly replace the old inline image toggles, that's why we have removed it to avoid duplicates.

How to re-activate old inline toggles in HM7

Help+Manual outputs a small Javascript file called "helpman_settings.js" with every HTML help or Webhelp output. The topic init script still contains the functionality to expand an object inline - or, alternatively - to show images and/or videos in lightboxes. The init script for toggles takes the settings of "helpman_settings.js" for initialization. Here, you need to make a small change.

Original version of "helpman_settings.js":

Code: Select all

/* Project settings */
var hmAnimate = true;
var hmPopupSticky = true;
var hmImageLightbox = true;
var hmVideoLightbox = true;
var hmLightboxConstrained = true;
var hmForceRedirect = false;
var hmTocSingleClick = false;
var autocollapse = false;
var gaaccount = "";
var initialtocstate = "collapsed";
Required modfication:

Code: Select all

/* Project settings */
var hmAnimate = true;
var hmPopupSticky = true;
var hmImageLightbox = false;                 <= This needs to be changed to "false"
var hmVideoLightbox = true;
var hmLightboxConstrained = true;
var hmForceRedirect = false;
var hmTocSingleClick = false;
var autocollapse = false;
var gaaccount = "";
var initialtocstate = "collapsed";
To automate this, perform the following steps:

1) Export Webhelp from your help project
2) Locate the file "helpman_settings.js" in the output folder and open it with a text editor
3) Change the setting hmImageLightbox from true to false.
4) Save the file, test your the Webhelp again: toggles should now open inline

5) To automate the change for subsequent exports and other formats (e.g. HTML Help), open your help project and include the file "helpman_settings.js" into the baggage list of your help project. H&M will now export your modified settings.
Alexander Halser
Senior Software Architect, EC Software GmbH
Mary van Kemenade
Posts: 22
Joined: Mon Feb 16, 2009 10:36 am
Location: Sydney Australia

Re: Expand - Enlarge Image Toggles in CHM

Unread post by Mary van Kemenade »

Great I am going to work on this tomorrow. Thanks so much for the quick responses and the help. I am not too technical but your instructions seem quite clear so I will give it a go! thanks again.
User avatar
waldemar.hersacher
Posts: 456
Joined: Tue Dec 09, 2003 10:06 pm
Location: Near Stuttgart Germany
Contact:

Re: Expand - Enlarge Image Toggles in CHM

Unread post by waldemar.hersacher »

I discussed that thing already during the beta phase.

It works, great solution.

I think Tim should make a reference from the Tipps and Tricks corner to Alexanders post or copy it.
Waldemar
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Expand - Enlarge Image Toggles in CHM

Unread post by Tim Green »

waldemar.hersacher wrote:I think Tim should make a reference from the Tipps and Tricks corner to Alexanders post or copy it.
Done. 8)
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Mary van Kemenade
Posts: 22
Joined: Mon Feb 16, 2009 10:36 am
Location: Sydney Australia

Re: Expand - Enlarge Image Toggles in CHM

Unread post by Mary van Kemenade »

Ok I am completely confused now. I was getting ready to get started using 7 and trying to follow the 'new' way of using images with zoom proportional instead of toggles and now that is gone too? I just updated to latest version 7. I finally had my head around how that was meant to work and had started changed my 5000+ images to use that instead of toggles and now that is gone too? replaced with different option which I cannot find what they mean. I checked user manual, PDF file, website everything I see refers to the 'old' window and documentation that says to use image toggles, which I understand from version 6 we are not using anymore. and refers to the old window that showed the image % and zoom is proportional to document width. Those are not the options any longer. I now see a different set of option all together and do not understand what each one is or what I am meant to use to get what I want. I am just really confused and cannot seem to find manual documentation on these new % options of Display Size and 4 options in the pick list.and we are now back to saying to use toggles for images again? I think I better got back to version 6.
Post Reply