2

This question is something of a follow-up to tex4ht: customize \includegraphics conversion to HTML and also to When generating html, how do you specify image size?

background

In my .tex file I specify images to be included as follows:

\includegraphics[alt={alt tags, information}]{example-image-a}

and have theimg element wrapped in its own container:

<div class="figure"><!--l. 7-->
<p class="noindent"></p>
<div class="my-box"><img src="mwe0x.png" alt="PIC" class=
"my-class" /></div>
<!--l. 8-->
<p class="indent"></p>
</div>

I use the following cmh.cfg:

\Preamble{html5}
\makeatletter
\define@key{Gin}{alt}{}
\Configure{GraphicsAlt}{my alt text}
\Configure{graphics}
  {\HCode{<div class="my-box">}%
   \Picture+[PIC]{ class="my-class"}}
  {\EndPicture \HCode{</div>}}
\begin{document}
\EndPreamble

and produce the html output above using the call:

make4ht -u -f html5 -c cmh.cfg mwe.tex

goal

I'd like to have the ALT tag updated from the includegraphics call.

I've tried the following modification to cmh.cfg

\Picture+[\a:GraphicsAlt]{ class="my-class"}}

but this results in

Missing $ inserted

the question

How can I change my cmh.cfg file so that the img element receives custom alt tags and my custom class?

mwe.tex

\documentclass{article}
\usepackage{graphicx}
\begin{document}

here is some text
\begin{figure}
  \includegraphics[alt={descriptions,info}]{example-image-a}
\end{figure}
\end{document}

cmh.cfg

\Preamble{html5}
\makeatletter
\define@key{Gin}{alt}{}
\Configure{GraphicsAlt}{my alt text}
\Configure{graphics}
  {\HCode{<div class="my-box">}%
   \Picture+[PIC]{ class="my-class"}}
  {\EndPicture \HCode{</div>}}
\begin{document}
\EndPreamble

call

make4ht -u -f html5 -c cmh.cfg mwe.tex
cmhughes
  • 100,947

1 Answers1

4

I would use a following configuration file:

\Preamble{xhtml}
\makeatletter
\DeclareGraphicsExtensions{.png,.jpg,.svg}
\define@key{Gin}{alt}{\Configure{GraphicsAlt}{#1}}
\def\mygraphics{{\Configure{Needs}{File: \Gin@base\Gin@ext}\Needs{}}%
   \ifvmode\IgnorePar\fi\EndP\HCode{<div class="my-box">}\Picture[\csname a:GraphicsAlt\endcsname]{{\Gin@base\Gin@ext} \csname a:Gin-dim\endcsname class="my-class" 
}\HCode{</div>}\ShowPar}
\Configure{graphics*}
   {png}
   {\mygraphics}
\Configure{graphics*}
   {jpg}
   {\mygraphics}
\Configure{graphics*}
   {jpeg}
   {\mygraphics}
\Configure{graphics*}
   {svg}
   {\mygraphics}

\begin{document}

\EndPreamble

The \DeclareGraphicsExtension is used to declare graphics filetypes supported in HTML. The \mygraphics macro contains common code inserted for graphics, especially dimensions, alt and class. It is then used in configurations for supported graphics types, so we can save some repetition. The alt text is declared by \define@key{Gin}{alt}{\Configure{GraphicsAlt}{#1}}.

You also need to copy the example-image-a.png file to the current directory and save its dimensions using ebb -x example-image-a.png command.

The result:

<!--l. 8--><p class="noindent" >here is some text </p><figure class="figure"> 



<!--l. 10--><p class="noindent" ></p><div class="my-box"><img 
src="example-image-a.png" alt="descriptions,info"  
width="401" height="301" class="my-class"  /></div>

   </figure>
michal.h21
  • 50,697