[orgmode] image directives

[frankieliu]

in ReST https://getnikola.com/quickstart.html image directives are taken .. image:: /images/nikola.png :height: 100 :width: 200 :scale: 50 :alt: alternate text

Would it be possible add something similar

;; Export images with custom link type (defun org-custom-link-img-url-export (path desc format) (cond ((eq format 'html) (format "<img src="%s" alt="%s"/>" path desc)))) (org-add-link-type "img-url" nil 'org-custom-link-img-url-export)

I can't seem to find any reference as to what the above defun is overriding.

[frankieliu]

I decided that I wanted the extra CAPTION and ATTR_HTML that comes with org mode, so I opted to do the normal image link export in org-mode with the #+ATTR_HTML etc. and just create a corresponding symbolic link pointing to a folder in the files/ directory. This seems to work fairly well. I have documented it here:

click here

[Kwpolska]

I’m not sure what you’re trying to do here. I’m not an orgmode user myself, but (1) we can’t reasonably support having images displayed in Emacs due to path stuff, (2) for the best results, make your HTML output at least this:

<a class="image-reference" href="images/tesla.jpg"><img src="images/tesla.thumbnail.jpg"></a>

cf. https://getnikola.com/handbook.html#thumbnails

[Kwpolska]

(Also note that this requires using the images folder and not files/images)

[frankieliu]

Hi Chris, thanks for replying back.

Basically if you take a look at how images are handled in the plugin:

1. it looks for links of the form img-url and processes these to a simple element, that is, it bypasses ox-html (that comes with org-mode) for images (if you so choose).

2. The ox-html parser actually handles adding attributes such as width, etc. This gets added to the element

3. The problem comes in matching the output image locations wrt to the source file locations. In order to resolve this inconsistency, I opted to point the image location relative to the final post location, in this case ../../images in the org-file.

4. So that this actually points an equivalent source file, I created a symbolic link from files/images to ../../images relative to the source location, so that both the final output and the source location would match.

So for now, I have a working solution without asking for any modification.

If you could point to me where the ReST translation happens, i.e. which python file, maybe I could understand the approach you have taken.

Thanks.

[Kwpolska]

reST does not perform any translation. When using images in reST, you are supposed to provide a path, starting with a slash, relative to the output/ folder. The path may be made into a relative path as part of our standard HTML processing (which also applies to orgmode, and in fact any HTML output from Nikola) — but reST just blindly takes /images/tesla.png and puts it directly in <img src="">.

The issue with orgmode is that it wants to display images in the Emacs window. Which works fine when you work with local paths to images, but breaks down the moment you need references that work everywhere, including with websites. A better approach would be to disable said image output.

[jwhendy]

Is there a definitive answer to this? This used to work for me (circa 2018), but in revisiting nikola, it's not any longer.

When I use the following:

#+attr_latex: :width 500
[[img-url:/path/to/image.png]]

I get this in the output page source:

<p width="500">
<img src="../../path/to/image.png" alt="nil"></p>

Is this something in my setup that causes the width to be applied to <p> instead of <img>? @frankieliu 's link above is down, so I'm not sure what the proposal was. If I ditch img-url: or try file:, width is not applied at all. Do I have to move to native export blocks and write the html by hand?

[jwhendy]

Bump. Just ran into this again. I could open a new issue, but it's identical...