From mboxrd@z Thu Jan 1 00:00:00 1970 From: Alan Schmitt Subject: [HTML export] How to display images side by side? Date: Fri, 11 Oct 2013 15:20:32 +0200 Message-ID: Mime-Version: 1.0 Content-Type: text/plain Return-path: Received: from eggs.gnu.org ([2001:4830:134:3::10]:44104) by lists.gnu.org with esmtp (Exim 4.71) (envelope-from ) id 1VUcdy-0002EF-Dh for emacs-orgmode@gnu.org; Fri, 11 Oct 2013 09:20:43 -0400 Received: from Debian-exim by eggs.gnu.org with spam-scanned (Exim 4.71) (envelope-from ) id 1VUcdt-00052C-1j for emacs-orgmode@gnu.org; Fri, 11 Oct 2013 09:20:38 -0400 Received: from mail2-relais-roc.national.inria.fr ([192.134.164.83]:41140) by eggs.gnu.org with esmtp (Exim 4.71) (envelope-from ) id 1VUcds-00051o-S1 for emacs-orgmode@gnu.org; Fri, 11 Oct 2013 09:20:32 -0400 List-Id: "General discussions about Org-mode." List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Errors-To: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org Sender: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org To: emacs-org list Hello, I'm trying to display a bunch of images side by side, as if they were text (and would reflow when the window is too small). Following this advice http://stackoverflow.com/questions/12923124/tables-in-a-row-or-table-and-image-in-a-row-in-org-mode I tried this (translated to the new exporter) --8<---------------cut here---------------start------------->8--- #+attr_html: :style display:inline; :height 60px [[http://www.google.com/][file:images/Google_Logo.png]] #+attr_html: :style display:inline; :height 70px [[http://www.janestreet.com/][file:images/Jane_Street_Logo.jpeg]] #+attr_html: :style display:inline; :height 50px [[https://research.microsoft.com/][file:images/MSR_Logo.jpg]] --8<---------------cut here---------------end--------------->8--- Unfortunately, I don't get what I want. There is an extra "div" and a "p" around the images, which prevent them from being inline: #+begin_src html

Google_Logo.png

Jane_Street_Logo.jpeg

MSR_Logo.jpg

#+end_src What I want is simply: #+begin_src html Google_Logo.png Jane_Street_Logo.jpeg MSR_Logo.jpg #+end_src I guess my problem comes from using the new exporter, but I could not find how to do this: only apply the attr_html to the image part, and do not generate an extra "p" around the image. Any suggestion as how I could do it? Thanks, Alan From mboxrd@z Thu Jan 1 00:00:00 1970 From: Alan Schmitt Subject: Re: [HTML export] How to display images side by side? Date: Fri, 11 Oct 2013 15:53:49 +0200 Message-ID: References: Mime-Version: 1.0 Content-Type: text/plain Return-path: Received: from eggs.gnu.org ([2001:4830:134:3::10]:51730) by lists.gnu.org with esmtp (Exim 4.71) (envelope-from ) id 1VUdAA-0006jZ-8c for emacs-orgmode@gnu.org; Fri, 11 Oct 2013 09:53:59 -0400 Received: from Debian-exim by eggs.gnu.org with spam-scanned (Exim 4.71) (envelope-from ) id 1VUdA4-0006hA-UQ for emacs-orgmode@gnu.org; Fri, 11 Oct 2013 09:53:54 -0400 Received: from mail2-relais-roc.national.inria.fr ([192.134.164.83]:44715) by eggs.gnu.org with esmtp (Exim 4.71) (envelope-from ) id 1VUdA4-0006gt-Nn for emacs-orgmode@gnu.org; Fri, 11 Oct 2013 09:53:48 -0400 In-reply-to: List-Id: "General discussions about Org-mode." List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Errors-To: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org Sender: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org To: emacs-org list Hello again, alan.schmitt@polytechnique.org writes: > Hello, > > I'm trying to display a bunch of images side by side, as if they were > text (and would reflow when the window is too small). I found a way to do it using CSS. Here is the org file that is exported to html (note that I no longer have the style attribute, and I give the surrounding node to give the context assigning the class). --8<---------------cut here---------------start------------->8--- ** Sponsors :PROPERTIES: :HTML_CONTAINER_CLASS: sponsors :END: The workshop is kindly sponsored by: #+attr_html: :height 60px [[http://www.google.com/][file:images/Google_Logo.png]] #+attr_html: :height 70px [[http://www.janestreet.com/][file:images/Jane_Street_Logo.jpeg]] #+attr_html: :height 50px [[https://research.microsoft.com/][file:images/MSR_Logo.jpg]] --8<---------------cut here---------------end--------------->8--- To get the alignment working properly (with images aligned at the center), I then put the following in my style.css: #+begin_src css .sponsors .figure { display: inline; } .sponsors .figure p { display: inline; } .sponsors .figure img { vertical-align: middle; } #+end_src If you simply want a vertical list of images, you can simply override the setting for .figure p: #+begin_src css .sponsors .figure p { text-align: left; } #+end_src Alan