Re: resize multiple image within a row or paragraph

[Nicolas Goaziou <mail@nicolasgoaziou.fr>]

Hello,

alban bernard <alban.bernard@yahoo.fr> writes:

> My wife and I use the marvelous org-mode to design a complete set
> of student courses. These courses are first written in org-mode then
> exported to html to ease distribution to students (and save some paper).
>
> We wonder what is the correct way to resize multiple images those links
> are within a single paragraph:
>
> "This is a phrase with [[./image1.png]] and [[./image2.png]] inline images."
>  
> With the following, the only first image is resized (as expected):
>
>  #+ATTR_HTML: :width 50%
>  This is a phrase with [[./image1.png]] and [[./image2.png]] inline images.
>  
> The tutorial about caption in a row shows what is possible while working
> only with
>  images
> http://orgmode.org/worg/org-tutorials/images-and-xhtml-export.html#sec-5-2:
>
>  #+HTML_HEAD: <style type="text/css">
>  #+HTML_HEAD:<!--/*--><![CDATA[/*><!--*/
>  #+HTML_HEAD: div.figure { float:left; }
>  #+HTML_HEAD: /*]]>*/-->
>  #+HTML_HEAD: </style>
>
>  #+CAPTION:
>  #+ATTR_HTML: :width 10%
>  [[./image1.png]]
>  #+CAPTION:
>  #+ATTR_HTML: :width 10%
>  [[./image2.png]]
>
> Here, image1 and image2 are displayed and resized in a single row. 
> But we don't know how to mix text within this block so that all is 
> displayed as a single paragraph with resized images.

This is not possible out of the box. You might use some Babel code to
generate the needed HTML but I guess it wouldn't be particularly easy.

Nevertheless, there's a solution. `html' back-end can redefine what
a paragraph is, instead of following Org's own definition. More
explicitly, an HTML paragraph can be defined as a cluster of elements
not separated by any blank line and containing at least an Org
paragraph. Hence:

  #+attr_html: :width 10%
  [[./img1.png]]
  Paragraph
  #+attr_html: :width 10%
  [[./img2.png]]

consists of two paragraphs in Org, but would be seen as a single
paragraph by HTML, and exported as such.

Implementation is simple using pseudo-elements. `latex' back-ends does
it already for tables and math snippets. However, I'm no HTML
specialist, so there may be drawbacks I cannot foresee.


Regards,

-- 
Nicolas Goaziou