Place Image Captions Below Images

SunNadimpalli01
Posts: 9
Joined: Thu Mar 05, 2015 11:53 am
Location: Bengaluru, India
Contact:

Place Image Captions Below Images

Post by SunNadimpalli01 » Wed Mar 02, 2016 9:41 am

Hello,

I am using oXygenXML Editor v17.0, build 2015043018.

Code: Select all



<fig id="fig_cxh_nbl_ks">
<title>Image Title</title>
<image href="image-file-name.png"
id="image_dxh_nbl_ks">
<alt>Image Alt</alt>
</image>
</fig>
When I generate a webhelp out, the figure title appears above the image. Is there way to move the image title below the image without editing the dita2htmlImpl.xsl file. I would prefer not edit the default XSL files.

And (Possibly a stupid question) Can this be done using CSS?
_____________________________________________
Sundar Nadimpalli
<http://www.sundarnadimpalli.com/>

bogdan_cercelaru
Posts: 217
Joined: Tue Jul 01, 2014 11:48 am

Re: Place Image Captions Below Images

Post by bogdan_cercelaru » Thu Mar 03, 2016 10:06 am

Hello,

Unfortunately you cannot change the position of the image title without editing the XSL file.
As a workaround you can change the position of the image using the following CSS3 rules in a custom CSS file. Please note that this is not supported in older browsers.

Code: Select all


.fig {
display: flex;
flex-flow: column;
-webkit-flex-flow: column;
-moz-flex-flow: column;
}
.figcap {
order: 2;
}
.image {
order: 1;
}
To use a custom CSS file, set the "args.css" parameter to the path of your custom CSS file. Also, set the "args.copycss" parameter to "yes" to automatically copy your custom CSS in the output folder.
WebHelp System Output / Customizing WebHelp Systems / Customizing WebHelp Output with a Custom CSS

Regards,
Bogdan
Bogdan Cercelaru
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
http://www.oxygenxml.com

SunNadimpalli01
Posts: 9
Joined: Thu Mar 05, 2015 11:53 am
Location: Bengaluru, India
Contact:

Re: Place Image Captions Below Images

Post by SunNadimpalli01 » Thu Mar 03, 2016 1:34 pm

Hello Bogdan,

Thank you, that did make the Figure caption appear below the image and I could see the changed position in IE 11, Chrome and Firefox.

The problem that I faced is that the image gets stretched all the across the width of the screen. From what I read this seems to be a problem with the css3 flex itself.

Do you know of any way to fix the image stretching all the way across the width of the parent element?
_____________________________________________
Sundar Nadimpalli
<http://www.sundarnadimpalli.com/>

bogdan_cercelaru
Posts: 217
Joined: Tue Jul 01, 2014 11:48 am

Re: Place Image Captions Below Images

Post by bogdan_cercelaru » Thu Mar 03, 2016 4:23 pm

Hello,

To keep the image scale you must set the "scale" attribute on the image in DITA topic.

Regards,
Bogdan
Bogdan Cercelaru
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
http://www.oxygenxml.com

Post Reply