PavoDive <[email protected]> writes:
> This FR was derived from a BUG (rough summary: it's difficult to have
> side-by-side images exported to different backends). The thread has been
> inactive for 3 years now.
>
> I still can reproduce the behavior described by the OP
[...]
> Jean Luois proposed a solution, but my skills are too basic to try to
> implement them in a patch.
As I read it, Jean Louis was not outlining a patch to Org, he was
outlining a toolchain and workflow that could let a user get the desired
result *without* changes to Org.
> Ihor: what should we do with this thread and with the alternative
> proposed by Jean Louis?
My 10 cents is, leave it open for the time being to collect more
suggestions, either for patches or for workflows to document on Worg.
Here is one: It's easy to get the OP's desired behavior in HTML with
CSS!
>From the OP:
(Works, but can't control height for both images.)
#+ATTR_HTML: :align center :height 300
[[/tmp/a.png]]
[[/tmp/b.png]]
CSS solution: Define a class to wrap the images in, e.g. "imgstrip", and
make it a flex box.
#+begin_src css
.imgstrip {display: flex;
justify-content: center;
align-items: stretch;}
#+end_src
This can e.g. be added to the Org document as follows (on a single line):
#+HTML_HEAD_EXTRA: <style>.imgstrip {display: flex; justify-content:
center; align-items: stretch;}</style>
Now, by wrapping the images in a =#+BEGIN_imgstrip= block, you can
control height for each image separately, and they will still be shown
side by side, because the figure divs containing the images will be flex
items.
#+BEGIN_imgstrip
#+attr_html: :height 300px
[[/tmp/a.png]]
#+attr_html: :height 300px
[[/tmp/b.png]]
#+END_imgstrip
This solution can be combined with the OP's first LaTeX solution
(the imgstrip block must go /inside/ the CENTER block).
Alternatively, if the side-by-side images should always be the same
height and don't need to be controlled separately, one can arrange
things so the height property only needs to be set on the imgstrip
block. Just add this to the above CSS:
#+begin_src css
.imgstrip p, img {height: 100%;}
#+end_src
Now you can do
#+attr_html: :style height: 300px;
#+BEGIN_imgstrip
[[/tmp/a.png]]
[[/tmp/b.png]]
#+END_imgstrip
Regards,
Christian
