Page 1 of 1
Image zoom broken for some images
Posted: Thu May 11, 2023 11:35 pm
by Katy
Hi, I've recently run into a problem with image zoom in WebHelp Responsive output. All of my images have scale attributes set on the tags, which until now has automatically generated the lightbox effect in the output.
Now this is broken for some images - including those on the same page. There is no obvious difference among the DITA tags, and I have not changed any parameters, CSS, or other settings that would affect this.
It does appear however that different output styles are being applied in the output, and I'm not sure why.
Examples:
This tag, which is working correctly...
<image placement="break" href="../path/to/image.png" scale="75" outputclass="custom-style"/>
...is showing this CSS rule from topic.css--
img.image.zoom:not(img[usemap]) {
cursor: pointer;
transition: .3s;
}
This image tag, which is basically the same (except for the image name) and on the same page, is not showing that the above rule is applied in the browser inspector--
<image placement="break" href="../path/to/image2.png" scale="75" outputclass="custom-style"/>
I'm not sure whether that is the applicable CSS rule, but it is the only difference I could find between the two. Any ideas/suggestions would be much appreciated.
Re: Image zoom broken for some images
Posted: Fri May 12, 2023 1:34 pm
by Katy
Just noting that I found a workaround for this by adding "zoom" to the outputclass in the DITA <image> tag. So: <image placement="break" href="../path/to/image.png" scale="75" outputclass="custom-style zoom"/>
I could be wrong, but my understanding is that "zoom" gets automatically applied to the <img> tag in the WebHelp output -- as long as you place a "scale" attribute on the DITA <image> tag -- and is not necessary for the DITA <image> tag outputclass. Not sure if this is a bug.
Re: Image zoom broken for some images
Posted: Wed May 24, 2023 6:28 pm
by beniamin_savu
Hi,
We had a similar issue regarding the zoom widget not appearing for some images. We managed to fix the problem in our current development stream. The fix will become available in the next maintenance build. I will add your feedback on our internal issue tracker so we will notify this thread when the maintenance build is released.
Please let us know if the problem still persists when the maintenance will be released.
Best regards,
Beniamin Savu
Oxygen WebHelp Team
http://www.oxygenxml.com
Re: Image zoom broken for some images
Posted: Mon Jun 12, 2023 5:47 pm
by Katy
Thanks so much Beniamin! For now, adding a "zoom" outputclass in the DITA file has been a sufficient workaround. I'll keep an eye out for the next build.
Re: Image zoom broken for some images
Posted: Wed Jul 05, 2023 3:01 pm
by beniamin_savu
Hi,
We wanted to let you know that we released a new maintenance build for Oxygen WebHelp 25.1 and it contains a fix for the problem you had with the zoom widget not appearing for some images.
Best regards,
Beniamin Savu
Oxygen WebHelp Team
http://www.oxygenxml.com
Re: Image zoom broken for some images
Posted: Fri Mar 01, 2024 10:52 am
by Naoki Hirai
We met the same issue. Due to the specific reason, we are still using XML WebHelp V21.0.
In my understanding, the root cause of the issue is timing of the JavaScript loading completion. In the HTML generated by V21, external JavaScripts are loaded at the end of the HTML file as shown bellow:
Code: Select all
<script type="text/javascript"
src="./oxygen-webhelp/app/webhelp_responsive_common_kbt.js?buildId=2019072400">
<!---->
</script>
<script type="text/javascript"
src="./oxygen-webhelp/app/webhelp_responsive_topic_kbt.js?buildId=2019072400">
<!---->
</script>
<script data-main="./oxygen-webhelp/app/topic-page.js"
src="./oxygen-webhelp/lib/requirejs/require.js"/>
</body>
</html>
On other hand, V26 generates following HTML in order to load the external JavaScript codes.
Code: Select all
<script defer="defer"
src="./oxygen-webhelp/app/commons.js?buildId=2024012323"/>
<script defer="defer"
src="./oxygen-webhelp/app/topic.js?buildId=2024012323"/>
<link rel="stylesheet"
type="text/css"
href="oxygen-webhelp/template/oxygen.css?buildId=2024012323"/>
<link rel="stylesheet"
type="text/css"
href="oxygen-webhelp/template/notes.css?buildId=2024012323"/>
</head>
I think that it's possible to resolve the issue with V21 by moving the JavaScript loading location and specify 'defer' as same as V26 WebHelp output.
Am I correct?
Thank you in advance for any advices.
Naoki Hirai
Re: Image zoom broken for some images
Posted: Mon Mar 04, 2024 12:05 pm
by Costin
Hi Naoki,
As there were many versions released inbetween v21 and v26 and a lot of changes were implemented the WebHelp implementation with each newer version (if you would need a list of which specific changes were implemented between those versions, you could write us on our official technical support email -
support@oxygenxml.com), unfortunately we could not tell for sure if the fix in v26 would suffice to make that work also in the old version 21.
As you may already be aware of, the version 21 reached
End-Of-Life back in 2021, so we no longer officially support it. That's why we recommend keeping WebHelp up-to-date and always using the latest version of the software.
Regards,
Costin