Skin resizing images - how to turn off

[QW Cat Ward]

I have all images in my file set to Display size: 100.00 Physical image size (100%).

This worked perfectly with a classic skin we were using and all my images display as expected.

We are looking to move to a newer Premium Pack skin because of the direct URL feature in v3+ skins. When using Minimalist_Blue_Diamond_WebHelp, the skin is forcing a rem width & height directly to the image element, and for the life of me I cannot figure out how to turn it off.
I tried searching through the JS files that are part of the baggage to see if I could find it and ended up down a rabbit hole.

If there is a different v3.48 skin that won't do this, let me know and I'll switch to customizing a different one. Note: I am not looking for my images to be responsive on mobile devices\etc. The only reason we are switching to a newer skin is for the URL capabilities. If not for that we'd stick with the classic skin we are currently using.

[Tim Green]

You can't turn off rem sizing in these skins because the entire design is based on relative units and depends on it. Also, setting images to 100% of physical width is now bad practice and should be avoided, because it will break your layout in many situations, particularly on mobile devices. Instead, you should always size images as % of page width, maximum is physical width (in tables the "page width" actually refers to the cell in which the image is). That will create the responsive images that you need for the current Internet.

And by the way: You may think that your images are displaying correctly, but that is only on your computer, which probably has a low-resolution legacy display. On more recent displays, your current settings will make your images look worse than they would with proper responsive sizing.

[Tim Green]

PS: There is a small glitch in these older versions of the skins that are no longer under development that prevents the clearest display of images on legacy monitors. To fix this, edit the hm_pageprescript.js file in the baggage and locate this piece of code (the code in these older versions is still minified, so you won't see single lines):

Code: Select all

hmDevice.baseFontSize=95;

Change it to:

Code: Select all

hmDevice.baseFontSize=100;

Be careful not to change anything else. When you save and republish with this change the default display sizing will be at 100%, instead of slightly smaller, which will prevent the slight lack of clarity on legacy displays. Modern displays with subpixel antialiasing are not affected, because they handle these things much better.

However: As soon as the user changes the zoom setting with the text size control in the hamburger menu, everything will still be resized, including the images.

[QW Cat Ward]

If I inspect the documentation at https://www.helpandmanual.com/help/hm_w ... story.html for example, and look at the image there, it does not have REM settings, it has a width and max-width. If this is simply because skins in the newer premium pack have changed to no longer force the rem, then we will purchase a newer premium pack. Can you please advise how to achieve the same thing that is being done in Help + Manual's own documentation?

Thank you.

[Tim Green]

If I inspect the documentation at https://www.helpandmanual.com/help/hm_w ... story.html for example, and look at the image there, it does not have REM settings, it has a width and max-width.

Yes, and you will notice that the width is a percentage value, not a value in pixels. This is what you get when you use the correct responsive settings for your images (% of page width, maximum is physical width) instead of the obsolete absolute width.

I strongly recommend using both this and making the small correction to your hm_pageprescript.js file that I recommended above. this will give you the best results. If your images are so small that they always use the 100% value, and it sounds as if they are, then you will get the results that you are looking for. (Note that HM will save the page width value as 99.90% in the XML in this case for internal reasons.) However, this will not give you the better display on high-resolution monitors that you would get if you used oversized images and adjust them to a percentage of the page width.

[QW Cat Ward]

Ok, so I need to go in and manually change thousands of images to have this different setting now. I guess I better get to work.

Thank you.

[Tim Green]

Hi Cat,

Ok, so I need to go in and manually change thousands of images to have this different setting now. I guess I better get to work.

You should be able to manage this quite quickly, because the difference in the XML source code is quite minor. Here is a before and after example:

Code: Select all

<image src="img-20230222140748.png" imagestyleclass="Default" scale="100.00%" styleclass="Image Caption" figurelistinclude="0"></image>
<image src="img-20230222140748.png" imagestyleclass="Default" scale="-99.90%" styleclass="Image Caption" figurelistinclude="0"></image>

All that needs to change is from scale="100.00%" to scale="-99.90%". You can do this on the XML topic files in the \Topics folder of your project, using any editor with a multi-file search and replace function, like the excellent free Notepad++.

If you're using the single-file HMXZ format you will need to re-save in the uncompressed HMXP format to access the topic files like this. Just select Save As... in the File menu and choose an empty folder as the target. I recommend using HMXP for ongoing work anyway, because it is more robust and efficient and supports more functions.

After the save in a new folder you will need to go to Configuration > Common > Project Search Path and change the references to the locations of your image files. This would also be a good time to move them all to folders inside your new project folder. Then you can move around the entire project along with all its images without changing the search path references, because the internal paths are relative.

[QW Cat Ward]

Thanks, that is super helpful!!!!