# modify html output of htlatex

When latex figures are converted to html, htlatex generates markup as follows:

 <a id="x3-3021r4"></a>
<p class="noindent" >
<img src="sampleImage.png" alt="PIC"/>
</p>
<div class="caption">
<span class="id">Abbildung&#x00A0;7:</span>
<span class="content">Sample Image</span>
</div>


Is it possible, e.g. through hooks and parameters in the config file, to change the output in such a way, that the resulting markup code looks like below?

<a id="x3-3021r4" href="/sampleImage.png" title="Sample Image">
<img src="/sampleImage.png" alt="PIC"/>
</a>
</p>
<div class="caption">
<span class="id">Abbildung&#x00A0;7:</span>
<span class="content">Sample Image</span>
</div>


Regards, Chris

Edit: Added an MWE and modified needed output (anchor should also contain a 'title' attribute with the caption's content and the image path should be relative with a leading slash)

\documentclass{article}
\usepackage[ngerman]{babel}
\usepackage[latin1]{inputenc}
\usepackage[T1]{fontenc}
\usepackage[final]{graphicx}
\begin{document}
\begin{figure}
\centering
\includegraphics{sampleImage.png}
\caption{My sample image}
\label{fig:mysampleimage}
\end{figure}
\end{document}


The code is compiled with:

htlatex.bat src.tex "html"

-
could you please make MWE? – michal.h21 Feb 26 '14 at 12:30
Sorry for the late response. I've edited the post. Chris – user46726 Feb 26 '14 at 21:59

This issue is more complex than it seems. It seems that label in inserted by figure environment, but I was not able to find how to configure it in the way you want. In this case I would recommend to use make4ht filter functionality. make4ht is simple build tool which simplify use of tex4ht.

Filters are lua functions that modify the output. In your case, it could be such make file, src.mk4:

local filter = require "make4ht-filter"

local atoim = function(s)
local id = nil
return s:gsub("<([%a/]+)(%s*)([^>]-)>", function(tag, space, par)
if tag == "a" then
id = par:match("^id=[\"']([^\"^']+)[\"']")
if id then return '' end
elseif tag=='/a' and id then
return ''
elseif id then
par = 'id="'..id..'"'
id = nil
end
return '<'..tag ..space .. par..'>'
end
)
end
local process = filter{"cleanspan", "fixligatures", "hruletohr", atoim}
Make:htlatex()
Make:htlatex()
Make:match("html$",process)  now you can compile your document with make4ht src  all tags are processed with atoim function, <a id="something"></a> are discarded and id value is saved, the id is then inserted in a following element. Generated html then looks like: <!--l. 10--><p id="x1-21"><img src="sampleImage.png" alt="PIC" /> <br /> </p>  note that id attribute can be put on any element and it will provide target for hyperlinks, it is not necessary to use <a id. edit for your use case, more complicated function must be used. maybe someone with knowledge of xslt would find more elegant solution :-). local filter = require "make4ht-filter" local atoim = function(s) local id = nil local used_id = {} local captions = {} local tag_patt = "<([%a/]+)(%s*)([^>]-)>" local attr_pat = "%s*=%s*[\"']([^\"^']+)[\"']" s:gsub('<span class="content">(.-)</span></div><%!%-%-tex4ht%:label%?: (.-) %-%->', function(caption,id) captions[id]=caption end) local r1 = s:gsub(tag_patt, function(tag, space, par) if tag == "a" then id = par:match("^id"..attr_pat)--=[\"']([^\"^']+)[\"']") elseif id and tag == "img" then used_id[id] = true local src = par:match("src"..attr_pat) local name = captions[id] or "" local img = string.format('<a href="%s" id="%s" title="%s"><img %s></a>', src, id, name, par) id = nil return img end return '<'..tag ..space .. par..'>' end ) local a = false return r1:gsub(tag_patt, function(tag, space, par) if tag == "a" then local id = par:match("id"..attr_pat) if id and used_id[id] then used_id[id] = nil a = true return "" end elseif tag == "/a" and a then a = false return "" end return '<'..tag ..space .. par..'>' end ) end local process = filter{"cleanspan", "fixligatures", "hruletohr", atoim} Make:htlatex() Make:htlatex() Make:match("html$",process)


Three pass method is used, in first pass we find captions for given id, in the second pass label id and create <a> element around img, in the last pass, we remove old <a> element

Generated html:

<!--l. 9--><p class="noindent" ><a href="sampleImage.png" id="x1-21" title="My sample image"><img src="sampleImage.png" alt="PIC"
/></a>
<br /> </p>

-
First of all thank you very much for your effort, I really appreciate it. The problem with this output is - and I'm sorry for not mentioning it before - that I want to use jQuery's fencybox link with the generated code. This plugin requires images to be in the format <a id="imageId" href="imagelocation" title="imageName"><img src="imagelocation"/></a> and will otherwise not work. But I will try to understand the lua function of your .mk4 file and change it according to my requirements. – user46726 Feb 27 '14 at 15:35
@user46726 I think I have found the solution. It is little bit complex, I hope it will work for you – michal.h21 Feb 27 '14 at 20:57
Wow, awesome! Thank you very much for your help. Best regards, Chris – user46726 Feb 27 '14 at 21:59
@user46726 you are welcome. it was interesting exercise in what could be done with filters – michal.h21 Feb 27 '14 at 22:21