2

I want to add attribute to image tag in order to reference from JavaScript library as below. 

<img src="img/sample.png" data-action="zoom">

However, I only can add alt, width, height as I know as below as outcome from Pelican. 

<img alt="thumbnail" height="250px" src="/images/mech2.jpg">
jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Katsuya Obara
  • 903
  • 3
  • 14
  • 30

1 Answers1

2

If you're using a Markdown (.md) file to create your article, then you can literally just include an image element with any attributes you like:

![This image is in Markdown format]({filename}/images/foo.png)

<img alt="This one is just a literal element" src="{filename}/images/bar.png" data-action="zoom" >

Would become:

<p><img alt="This image is in Markdown format" src="../images/foo.png"></p>
<p><img alt="This one is just a literal element" src="../images/bar.png" data-action="zoom"></p>

For reStructuredText (.rst) articles, you can't do this; per the documentation only a limited set of image options are supported*, and if you just try and include HTML inline it gets rendered out as-is:

.. image:: {filename}/images/foo.png
   :alt: this is an RST image directive

<img alt="This one is just a literal element" src="{filename}/images/bar.png" data-action="zoom">

Becomes:

<img alt="this is an RST image directive" src="../../../images/foo.png">
<p>&lt;img alt="This one is just a literal element" src="{filename}/images/bar.png" data-action="zoom"&gt;</p>

* Specifically: alt, height, width, scale, align, target, class and name.

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
  • Note however that you can include arbitrary html in restructuredText using the "raw" directive: https://stackoverflow.com/questions/8621042/how-to-embed-html-in-restructured-text-file – Trevor Aug 26 '22 at 16:53