Add a css class to graphics in tex4ht

Question

So I have this

\includegraphics[width=0.5\linewidth]{./src/images/screenshot--superman.png}

And using make4ht (tex4ht) it generates the following markup (I'm pasting it as outputed):

<p>   <img 
src="./src/images/screenshot--superman.png" alt="PIC"  
 />
<a 
 id="x1-2038r1"></a>
</p> 

But It would be pretty awesome to add classes to that image using LaTeX with some kind of hack.

<img class="my-class" src="./src/images/screenshot--superman.png" alt="PIC" />

Is that doable through LaTeX itself, or should I set up some tex4ht hooks to add an enclosing <div class="my-class"> <img> </div>?

Answer 1

You can use \Configure{IMG}:

\Preamble{xhtml}
\begin{document}
\Configure{IMG}{\HCode{<img class="my-class" src="}}{\HCode{" alt="}}{}{\HCode{"}}{\HCode{ />}}

\EndPreamble

This produces

<p class="noindent" ><img class="my-class" src="./src/images/screenshot--superman.png" alt="PIC" /> </p> 

if you want to preserve the image dimensions, you need to create .xbb file, which holds image dimensions. It can be created using `ebb command:

ebb -x src/img/*.png

the dimensions are now calculated:

<p class="noindent" ><img class="my-class" src="./src/images/screenshot--superman.png" alt="PIC"        
width="172.5pt" height="56.58652pt"  /> </p>