How can I increase the width of graphics exported in Responsive HTML5?

Report · Jul 19, 2023

I have some graphics in my FrameMaker document which need to fit the width of the page.

When I export the document to HTML5 they seem to be fixed to exactly 642.52px

I would like them to be 800px wide however there doesn't seem to be anywhere to set this.

I looked in the Publish Settings > Edit > Style Mapping > Image Setttings and also

Publish Settings > Edit > Style Mapping > General Settings

but there seems to be no way to adjust the pixel value of the 'full-width' HTML output.

Is there any way to do this other than manually editing the <object width="xxxx"> tag in the HTML?

Report · Jul 19, 2023

I don't.... think... you can, actually. I ended up having two pictures. One for mobile output and one for desktop. I gave each version a condition and used the conditions for output to print pdf/html5. I may be wrong here though and if you come up with a better solution I would really like to know 🙂

Bjørn Smalbro - FrameMaker.dk

Report · Aug 02, 2023

Yes, it seems that way. Whatever I do the maximum width of any exported graphics (or tables) is 640 pixels.

I assume this is to cater for old VGA website layouts but it does seem a bit archaic these days.
The conditional idea won't work as there just doesn't seem to be any way to specify the maximum output width of the page for objects - 640pixels seems to be hard coded!

I will submit this as a bug/feature request.

If they can't fix this we'll have to find another application to produce HTML manuals I think.

Report · Aug 02, 2023

What point version of FM are you using? I don't think you mentioned that.

Report · Aug 02, 2023

I'm using version 17.0.2.431 - the issue also existed in version 16

Report · Aug 02, 2023

Hm. I just created a file with the FrameMaker default template and created a table with a single row and a single cell. There I inserted one of my EPS files (that was just the first one which I found). Then I scaled the table to the width of the text frame and the graphic to the width of the table (minus 0.05 cm). Then I exported everything to HTML5 (with the FrameMaker default sts file). The resulting PNG files have a width of 4729 px. The same px without table.

Possibly this depends on the source format. What's yours?

Report · Aug 02, 2023

Most of the source images are PNGs - typically 1920pixels wide (or 3840). The actual images are copied unaltered to the destination directory in the generated web site, but the tags in the HTML set the width to about 640px (but not excactly for some reason) - height is auto.
It doesn't matter if I use an image directly in an anchored frame or if I put a frame inside a single-cell table. The image only ever gets a maximum width of 640px.

I have not tried a vector source image - I could try that but it wouldn't help with my screengrabs.

Report · Aug 02, 2023

I just did another test - one graphic is a simple png in an anchored frame, the other has some callouts added in FrameMaker. Both fill the width of the frame which is the full width of the page in FrameMaker.
The first is converted into a standard <img> element whereas the second becomes an SVG object. However in both cases the image is still limited to a fixed width of ~640px:

Report · Aug 02, 2023

Are you using Object Styles for your graphics? Maybe the answer is being set in there?

Report · Aug 02, 2023

OK. I understand. I had just checked the width of the resulting PNG file and not the width in the HTML code.

I will see, if I can find something, but not today.