Image scaling
Moderators: Alexander Halser, Tim Green
Image scaling
Hi, This is probably answered but i don't find it.
I would like to have most of my image added with 50% of the screen. Now i have to change them each time and it is time consuming. I know that the image will be rescaled depending the output. Still i would like to keep a not full 100% image. I don't want to emphasize the doc on the image.
Same is any wall to default alignment to right.
Thanks
Pierre
I would like to have most of my image added with 50% of the screen. Now i have to change them each time and it is time consuming. I know that the image will be rescaled depending the output. Still i would like to keep a not full 100% image. I don't want to emphasize the doc on the image.
Same is any wall to default alignment to right.
Thanks
Pierre
- Tim Green
- Site Admin
- Posts: 23186
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Image scaling
Hi Pierre,
Your best option here is to set the responsive option "% of page width, maximum is physical size". Then you set the % width to 50% and it will be 50% of the page but will not exceed the physical width of the image, thus preventing possibly fuzzyness. Alternatively, you can just set it to 50% of the page width, but then smaller images will also be scaled up, which may not look so good.
You can do this for existing images by double-clicking on the image in the Help+Manual editor, then adjust the setting in the lower part of the dialog, in the Display Size: field.
You can also set right alignment there. After doing that, the same settings will be used for the next images you insert in the current session.
Your best option here is to set the responsive option "% of page width, maximum is physical size". Then you set the % width to 50% and it will be 50% of the page but will not exceed the physical width of the image, thus preventing possibly fuzzyness. Alternatively, you can just set it to 50% of the page width, but then smaller images will also be scaled up, which may not look so good.
You can do this for existing images by double-clicking on the image in the Help+Manual editor, then adjust the setting in the lower part of the dialog, in the Display Size: field.
You can also set right alignment there. After doing that, the same settings will be used for the next images you insert in the current session.
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.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Re: Image scaling
Hi
"Actually, Impict is now getting on in years and it's going to be replaced with something else that is going to do a lot more in addition to just editing screenshots. Wait and see." -
That's too tantalizing.
We are about to start a MAJOR update cycle, with new look and feel - the application is almost ready for us to start doing the replacements of over 2500 images that have to be redone. Many rely on ipp's wonderful ability to include layered graphics with callouts, highlights, etc, without having to render everything back to a .png or .jpg. And it helps us greatly with branding, because the application goes out with more than one identity.
Conversely, many graphic tricks are hindered by the restrictions on transparent elements.
Any chance of some hints / a beta / a timeline? Please?
Rob
"Actually, Impict is now getting on in years and it's going to be replaced with something else that is going to do a lot more in addition to just editing screenshots. Wait and see." -
That's too tantalizing.
We are about to start a MAJOR update cycle, with new look and feel - the application is almost ready for us to start doing the replacements of over 2500 images that have to be redone. Many rely on ipp's wonderful ability to include layered graphics with callouts, highlights, etc, without having to render everything back to a .png or .jpg. And it helps us greatly with branding, because the application goes out with more than one identity.
Conversely, many graphic tricks are hindered by the restrictions on transparent elements.
Any chance of some hints / a beta / a timeline? Please?
Rob
- Tim Green
- Site Admin
- Posts: 23186
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Image scaling
http://helpxplain.comAny chance of some hints / a beta / a timeline? Please?
In addition to screencasts and animated infographics, HelpXplain can also edit static images and add callouts, images, text, shapes and more.
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.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Re: Image scaling
Thanks Tim.
Yes, I am eagerly waiting the HelpXplain, as we want to do a lot more in the area of 'How-To's'.
But the question was more from the point of view of regular graphics - as long as I know that there is no planned change in the .ipp format, so that we can continue to take .png screenshots, annotate them and save .ipp's which get re-used for .chm, .pdf. webhelp and (soon, hopefully) .exe outputs.
Can you tell me if there are any planned upgrades to the capabilities of the annotation tools? In particular, I asked quite a long time ago, if there could be a 'format painter'-type capability, so that the look-and-feel of an annotation could be 'painted' from one ipp element to another. (Thinks: doing a repeated change of font characteristics, or line color, etc.) Would be a real boon!!
(and even more ambitiously, I asked in the H&M Wish-list, for an F4 'do-it-again' capability. That would also be magic!!)
Rob
Yes, I am eagerly waiting the HelpXplain, as we want to do a lot more in the area of 'How-To's'.
But the question was more from the point of view of regular graphics - as long as I know that there is no planned change in the .ipp format, so that we can continue to take .png screenshots, annotate them and save .ipp's which get re-used for .chm, .pdf. webhelp and (soon, hopefully) .exe outputs.
Can you tell me if there are any planned upgrades to the capabilities of the annotation tools? In particular, I asked quite a long time ago, if there could be a 'format painter'-type capability, so that the look-and-feel of an annotation could be 'painted' from one ipp element to another. (Thinks: doing a repeated change of font characteristics, or line color, etc.) Would be a real boon!!
(and even more ambitiously, I asked in the H&M Wish-list, for an F4 'do-it-again' capability. That would also be magic!!)
Rob
- Tim Green
- Site Admin
- Posts: 23186
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Image scaling
Hi Rob,
HelpXplain also has pretty much the same options for editing static graphics as IPP, but it won't use the IPP format. Impict will go on existing for a while, and even later you can continue to use it and Help+Manual will continue to support IPP images. As for the format painter option: HelpXplain has styles.
HelpXplain also has pretty much the same options for editing static graphics as IPP, but it won't use the IPP format. Impict will go on existing for a while, and even later you can continue to use it and Help+Manual will continue to support IPP images. As for the format painter option: HelpXplain has styles.
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.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
-
- Posts: 206
- Joined: Thu Jul 13, 2017 2:57 pm
Re: Image scaling
The most recent HelpXplain I saw was a while back, and I don't think it had named styles then. That would be a useful feature, particularly if there was some ability to vary the style dynamically, something on the lines of active vs inactive or in a screencast sequence maybe current vs past vs future or next step.Rob Davis wrote:'format painter'-type capability and F4 'do-it-again'
-
- Posts: 305
- Joined: Mon Aug 21, 2017 7:35 pm
Re: Image scaling
Is there a beta HelpXplain version I can try out?
-
- Posts: 102
- Joined: Sun Dec 10, 2017 12:47 pm
Re: Image scaling
Please allow me to add another detail feature request:
I would like to have two more options:
Or is there a trick to achieve this, that I am not aware of?
- We can have fixed-size images (e.g. 50 % of physical image size), but then the image is not zoomed when the window is to small to display it entirely, forcing the user to scroll horizontally.
- We can have "zoom to smaller" images over a percentage of the page width, but then only the physical image size can be set as the maximum.
I would like to have two more options:
- "x % of physical size max, and zooming to smaller page width if necessary", and/or
- ""y % of page width, maximum is z % of physical image size"
- "max x % of physical size, max y % of page width (whatever is smaller), and zooming to smaller window width if necessary"
Or is there a trick to achieve this, that I am not aware of?
Regards,
Rainer
Head of Technical Writing & Knowledge Management
TIG Technische Informationssysteme GmbH, Rankweil, Austria
Rainer
Head of Technical Writing & Knowledge Management
TIG Technische Informationssysteme GmbH, Rankweil, Austria
- Martin Wynne
- Posts: 2656
- Joined: Mon May 12, 2003 3:21 pm
- Location: West of the Severn, UK
Re: Image scaling
Hi Rainer,Rainer Oehry wrote:Or is there a trick to achieve this, that I am not aware of?
Assuming you are talking only about Webhelp/HTML output, you can do anything you like with a bit of scripting, either in the page template, or using the Insert > HTML Code Object option.
For example here is a bit of script I use to get my images to the sizes I require and also responsive to the user's page width. You should be able to do something similar, and change the numbers to whatever you want.
This should be included as a function in the page onload event in the page template, or alternatively inserted at the bottom of every topic page as a code object, possibly as a snippet:
Code: Select all
<script type="text/javascript">
var ww = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var n;
var v = document.getElementsByTagName('img');
for(n=0; n<v.length; n++)
{
vimg = v[n].naturalWidth;
if (vimg > 200)
{
v[n].style.maxWidth = vimg + "px";
v[n].style.width = (ww - 360) + "px";
}
}
</script>
If an image is originally less than 201 pixels wide it is not affected. This prevents icons, symbols, logos, etc. from being affected. Change the 200 to whatever you want, or set it to zero. Allowance is made for 360 pixels on the left for a TOC or menu or floated text, or whatever. Change the 360 to whatever you want, or set the width as a % of the page width.
The problem Alex and Tim have is trying to make everything work also in non-HTML outputs, such as PDF, which limits what they can do.
cheers,
Martin.
-
- Posts: 102
- Joined: Sun Dec 10, 2017 12:47 pm
Re: Image scaling
Thank you, Martin, your input is much appreciated.
I suspected that it was possible to achieve this behavior with the help of some additional scripting. I was just hoping that I could avoid that …
I could of course combine several images with the same required maximum size into the same IF clause and assign them the same maxwidth. As this value is the same for all occurrences of that image in the whole document, I could add this code to the page template, but that would still force me to add every such image to the code … I could also try to give all those images a specific name, with a keyword and the maximum pixel size as part of the file name that could be extracted, something like "image123_MAX500.png" … I was just hoping that I would not have to do that …
How exactly do I create such an onload event in the page template?
I suspected that it was possible to achieve this behavior with the help of some additional scripting. I was just hoping that I could avoid that …
In my case, the maximum size is not the same for all images on the page. I would therefore be required to modify the script upon each addition of such an image, in order to handle all images individually according to the required maximum size.Martin Wynne wrote:The script affects all images on the page.
I could of course combine several images with the same required maximum size into the same IF clause and assign them the same maxwidth. As this value is the same for all occurrences of that image in the whole document, I could add this code to the page template, but that would still force me to add every such image to the code … I could also try to give all those images a specific name, with a keyword and the maximum pixel size as part of the file name that could be extracted, something like "image123_MAX500.png" … I was just hoping that I would not have to do that …
How exactly do I create such an onload event in the page template?
Regards,
Rainer
Head of Technical Writing & Knowledge Management
TIG Technische Informationssysteme GmbH, Rankweil, Austria
Rainer
Head of Technical Writing & Knowledge Management
TIG Technische Informationssysteme GmbH, Rankweil, Austria
- Martin Wynne
- Posts: 2656
- Joined: Mon May 12, 2003 3:21 pm
- Location: West of the Severn, UK
Re: Image scaling
Hi Rainer,Rainer Oehry wrote:In my case, the maximum size is not the same for all images on the page.
The script doesn't set all images the same. The maximum size for each is set to its own natural size.
In other words if an image is 800 pixels wide, that will be the size it is displayed at, and scaled down from that if necessary to fit.
If an image is 2560 pixels wide, that will be the size it is displayed at, and scaled down from that if necessary to fit.
So if you need an image to be a specific maximum size, you would re-size it to that size before inserting it.
However, if you do want a specific image to be handled differently from others, you could give it an ID or class name in the H&M image dialog. That could then be referenced in a separate bit of script on that page only.
I will post some code for the onload/resize events below shortly. Which skin (if any) are you using? Not all the skins make easy access to the full page template.
edit:
To use the code in an onload event you need to create it as a function, which means enclosing it in a function name and another pair of curly brackets. I called it do_image_size but you can call it whatever you like. The function would normally be placed in the head section on the page. The onload and resize events are then added to the body tag. So you need to find this in the page template:
Code: Select all
</head>
<body>
Code: Select all
<script type="text/javascript">
function do_image_size()
{
var ww = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var n;
var v = document.getElementsByTagName('img');
for(n=0; n<v.length; n++)
{
vimg = v[n].naturalWidth;
if (vimg > 200)
{
v[n].style.maxWidth = vimg + "px";
v[n].style.width = (ww - 360) + "px";
}
}
}
</script>
</head>
<body onload="do_image_size()" onresize="do_image_size()">
cheers,
Martin.
-
- Posts: 102
- Joined: Sun Dec 10, 2017 12:47 pm
Re: Image scaling
Hi Martin,
I have screenshots that should be displayed at their full width, if possible, and then scaled down if necessary. I have others that should be displayed at a maximum of e.g. 80 % of their true size, and then scaled down from there if necessary. But whether the maximum size should be 100 % of their physical size or smaller cannot be determined from the true size of the images. So maybe an image with 600 px original width should be displayed at full size, whereas another with a true width of 500 px should be displayed scaled down to 80 % or a maximum width of 400 px, and then eventually scaled further down.
Right now I use a fixed scale factor for the images that need to always be scaled down, but then they don't scale further down anymore with the window width. I would need an option like "xx % of physical size, and still scaling down if required".
I could also live with having to individually set a maximum scaled-down width in pixels in a script for each of those images, as long as they continue to scale further down with the window width. The images that need to always get scaled down from their physical size should be handled identically throughout the project, if used in more than one topic, so a "central" definition of the maximum widths for the affected images would probably be the best way to do that.
I also tried to resize the images in external image processing programs before inserting them into H&M, but the result—both in the H&M editor and in the published files—are far less convincing then using the scaling from H&M (why is that, by the way?).
I mostly use the WebHelp (Integrated) IFrames Responsive skin. I did not use the V3 PP skins yet, but definitely need to have a closer look at those too.
Thank you very much for your most appreciated support in this matter!
I have screenshots that should be displayed at their full width, if possible, and then scaled down if necessary. I have others that should be displayed at a maximum of e.g. 80 % of their true size, and then scaled down from there if necessary. But whether the maximum size should be 100 % of their physical size or smaller cannot be determined from the true size of the images. So maybe an image with 600 px original width should be displayed at full size, whereas another with a true width of 500 px should be displayed scaled down to 80 % or a maximum width of 400 px, and then eventually scaled further down.
Right now I use a fixed scale factor for the images that need to always be scaled down, but then they don't scale further down anymore with the window width. I would need an option like "xx % of physical size, and still scaling down if required".
I could also live with having to individually set a maximum scaled-down width in pixels in a script for each of those images, as long as they continue to scale further down with the window width. The images that need to always get scaled down from their physical size should be handled identically throughout the project, if used in more than one topic, so a "central" definition of the maximum widths for the affected images would probably be the best way to do that.
I also tried to resize the images in external image processing programs before inserting them into H&M, but the result—both in the H&M editor and in the published files—are far less convincing then using the scaling from H&M (why is that, by the way?).
I mostly use the WebHelp (Integrated) IFrames Responsive skin. I did not use the V3 PP skins yet, but definitely need to have a closer look at those too.
Thank you very much for your most appreciated support in this matter!
Regards,
Rainer
Head of Technical Writing & Knowledge Management
TIG Technische Informationssysteme GmbH, Rankweil, Austria
Rainer
Head of Technical Writing & Knowledge Management
TIG Technische Informationssysteme GmbH, Rankweil, Austria
- Martin Wynne
- Posts: 2656
- Joined: Mon May 12, 2003 3:21 pm
- Location: West of the Severn, UK
Re: Image scaling
Hi Rainer,Rainer Oehry wrote:I have screenshots that should be displayed at their full width, if possible, and then scaled down if necessary. I have others that should be displayed at a maximum of e.g. 80 % of their true size, and then scaled down from there if necessary. But whether the maximum size should be 100 % of their physical size or smaller cannot be determined from the true size of the images. So maybe an image with 600 px original width should be displayed at full size, whereas another with a true width of 500 px should be displayed scaled down to 80 % or a maximum width of 400 px, and then eventually scaled further down.
That's getting complicated, but it is all doable quite easily, once you know exactly what you want.
You need to create some class names, and then apply them to the images as required, in the H&M image dialog:
You can use any names you wish. For example all images with class size80percent might be forced to a maximum of 80% of their natural width, or all images with class size600px might be forced to a maximum of 600 pixels wide. Images with class size67page might be limited to 67% of the page width.
Then the master script would deal with each subset of images separately, to do whatever you want:
Code: Select all
subset = document.getElementsByClassName("size600px");
for (n=0; n<subset.length; n++)
{
subset[n].style.maxWidth = 600 + "px";
subset[n].style.width = (ww - 360) + "px";
}
subset = document.getElementsByClassName("size80percent");
...
...
etc.
Martin.
You do not have the required permissions to view the files attached to this post.
-
- Posts: 102
- Joined: Sun Dec 10, 2017 12:47 pm
Re: Image scaling
Hi Martin,
this sounds VERY promising! I have never used this "HTML class" image feature ever …
Thank you so much!
this sounds VERY promising! I have never used this "HTML class" image feature ever …
Thank you so much!
Regards,
Rainer
Head of Technical Writing & Knowledge Management
TIG Technische Informationssysteme GmbH, Rankweil, Austria
Rainer
Head of Technical Writing & Knowledge Management
TIG Technische Informationssysteme GmbH, Rankweil, Austria