1

I am trying to add an image to a doxygen .md file. Easy enough.
It needs to have a caption. Easy enough.
It needs to be left aligned. Err. This is where I am struggling.
I can add a caption or left align the image but nothing I have tried allows me to do both. What I have tried 

![Caption](my_image.png "Caption")

Gives me a caption but centered

 <img src="my-image.jpg" align="left">
 <div style="clear: both"></div>

Left aligned but no caption

 <img src="my-image.jpg" align="left" title="Caption">
 <div style="clear: both"></div>

Left aligned, Tooltip, still no caption.

And finally this one gives me a left aligned image with the caption left aligned, but what I really want is the caption centered on the image which are then the whole thing left aligned

<div class="image">
    <img src="Simulation-Client.png" alt="Simulation-Client.png" align="left">
    <div style="clear: both"></div>
</div>
<div class="caption" align="left">Simulation Client Architecture</div>
<div style="clear: both"></div>
<Br />

There really must be an easier way to do what I want.
Note I'm not particularly skilled in html so I don't want a CSS solution.

LarryB
  • 223
  • 1
  • 2
  • 9
  • Which version of doxygen are you using ? Do I understand it correctly that you want to have the image on the left hand side and underneath the image the caption which is centered relative to the image? – albert Feb 23 '23 at 13:04
  • I'm using Doxygen version 1.9.6 and yes caption centered to image which is left aligned – LarryB Feb 23 '23 at 14:24
  • I did some test but didn't find a solution. Although you said "I don't want a CSS solution" the base of the solution probably will be css but like I said I didn't find a solution, maybe that someone with more css skills can give a hint to look into the right direction. – albert Feb 23 '23 at 14:35

1 Answers1

1

This seems to be a bug in Doxygen 1.9.6. Different HTML tags are generated when IMAGE_PATH from topic Input is used. Below is my *.md file for test case only. You'll find a solution using a table in this markdown code (Credits to Bilal Gultekin: https://stackoverflow.com/a/45191209/1981088).

This is a regular paragraph.

![test for image 1](images/help-info_helpware_artLogo.png "Tool Tip Title Caption 1")

![test for image 2][2]

This is another regular paragraph.

## HTMLHelp
### Information about Microsoft HTMLHelp

HTMLHelp, developed by Microsoft, is a help system used to create locally stored technical documentation and help for application software based on Hypertext Markup Language (HTML). The HTMLHelp Workshop is used to compile the content into a compressed help file with the file extension CHM.

This is a regular paragraph.

| ![HTMLHelp Workshop - steps to set default page][1] | 
|:--:| 
| *HTMLHelp Workshop - steps to set default page* |

This is another regular paragraph.

IMAGE_PATH NOT in use

However, this has the disadvantage that the image files have to be copied manually into the target folder of the HTML output from Doxygen. This is resulting in (left align by default):

enter image description here

from this generated HTML:

<p>This is a regular paragraph.</p>
<p><img src="images/help-info_helpware_artLogo.png" alt="test for image 1" title="Tool Tip Title Caption 1" class="inline"/></p>
<p><img src="images/help-info_helpware_artLogo.png" alt="test for image 2" title="Tool Tip Title Caption 2" class="inline"/></p>
<p>This is another regular paragraph.</p>

IMAGE_PATH in use

enter image description here

from this generated HTML:

<p>This is a regular paragraph.</p>
<div class="image">
<img src="help-info_helpware_artLogo.png" alt=""/>
<div class="caption">
Tool Tip Title Caption 1</div></div>
    <div class="image">
<img src="help-info_helpware_artLogo.png" alt=""/>
<div class="caption">
test for image 2</div></div>
    <p>This is another regular paragraph.</p>

You'll need to decide what you want to try for your needs. My images reside in a subfolder images of Doxygens's destination folder.

help-info.de
  • 6,695
  • 16
  • 39
  • 41