# Add a css class to graphics in tex4ht

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>?

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>

• Had to be you @michal.h21, you're amazing, thanks Jan 31, 2016 at 21:42
• @Claudiordgz you are welcome :) Jan 31, 2016 at 21:49
• @michal.h21 I'd like to get rid of the <p> tag wrapping <img>, but I can't see how to modify \Configure{IMG} in order to obtain that. Let me know if you think I should ask a new question on this regard.
– mmj
Sep 9, 2016 at 14:43
• @michal.h21 Update: adding \IgnorePar\EndPat beginning of 1st argument of \Configure{IMG} I managed to make tex4ht close the <p> tag before the <img...> tag, but now I have an annoying empty HTML paragraph <p></p> before <img...>`.
– mmj
Sep 9, 2016 at 16:01
• @mmj this might be worth it's own question :) Sep 9, 2016 at 19:19