modify html output of htlatex

Question

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"

Answer 1

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>