Making pictures in HTML clickable to open bigger pictures

[mdslup]

Let's say I want all the pictures in my manual to be clickable links - clicking the link opens up a larger version of the picture.

I know how to do this - I save 2 versions of the picture, show the small version in the topic, and make that small picture a link whose href is the bigger picture. Easy.

I'm just wondering if Oxygen has, or can have, some kind of native built-in ability to do this, so I don't have to do it for every single image.

[ionela]

Hi,

Could you please specify what transformation scenario do you use in oXygen XML to obtain the output? Do you use the DITA Map WebHelp Responsive transformation scenario?
If yes, for the WebHelp Responsive output improvements were made to image rendering in the output of WebHelp Responsive layouts. The width of images in topic pages automatically adapt to the size of the screen. Also, when you click these images (responsive images) they are shown to the entire browser width.

For example, you can test in oXygen XML v21.1 on our sample flowers.ditamap and the DITA Map WebHelp Responsive scenario to check this behavior.

Regards,
Ionela

[lhsihan]

Hi Ionela,
can default HTML5 transformation scenario support this? How can we configure that?

Thanks a lot.

[mdslup]

Oh wow, I've been manually resizing the pictures all this time for nothing! This is going to save me a lot of time *and* improve functionality!

Thanks!

[Costin]

Hi Ionela,
can default HTML5 transformation scenario support this? How can we configure that?

Thanks a lot.

Hi lhsihan,

No, this is only available in our own transformation scenario (WebHelp Responsive), as the functionality is added by our proprietary WebHelp plugin.
The HTML5 transformation comes as-is from the DITA Open Toolkit.

You could probably make this possible also for the DITA-OT scenarios, through a custom HTML plugin for DITA-OT.
More information on using HTML plugins for DITA OT available even in the DITA-OT user guide.

Regards,
Costin