emacs-orgmode@gnu.org archives
 help / color / mirror / code / Atom feed

* resize multiple image within a row or paragraph
@ 2014-09-18 15:13 alban bernard
  2014-09-20  7:23 ` alban bernard
  0 siblings, 1 reply; 8+ messages in thread
From: alban bernard @ 2014-09-18 15:13 UTC (permalink / raw)
  To: emacs-orgmode@gnu.org

[-- Attachment #1: Type: text/plain, Size: 1689 bytes --]

Hi Folks,

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.

I tested all of this with the following version combos:
Debian Jessie/Emacs 24.3.1/Orgmode 8.2.5h-1 (debian)
Debian Jessie/Emacs 24.3.1/Orgmode latest git

Thanks for any hint that could help.

~Alban.

PS: the "Show the source" button of http://orgmode.org/worg/org-tutorials/images-and-xhtml-export.html
redirects to:
http://orgmode.org/worg/org-tutorials/images-and-xorg.html-export.org.html
rather than:
http://orgmode.org/worg/org-tutorials/images-and-xhtml-export.org.html

[-- Attachment #2: Type: text/html, Size: 2362 bytes --]

^ permalink raw reply	[flat|nested] 8+ messages in thread

• * Re: resize multiple image within a row or paragraph
    2014-09-18 15:13 resize multiple image within a row or paragraph alban bernard
  @ 2014-09-20  7:23 ` alban bernard
    2014-09-20 12:08   ` Nicolas Goaziou
    0 siblings, 1 reply; 8+ messages in thread
  From: alban bernard @ 2014-09-20  7:23 UTC (permalink / raw)
    To: emacs-orgmode@gnu.org
  
  [-- Attachment #1: Type: text/plain, Size: 1815 bytes --]
  
  Any thought on this?
  
  ~Alban.
  
  
  
  On Thursday, September 18, 2014 5:14 PM, alban bernard <alban.bernard@yahoo.fr> wrote:
   
  
  
  Hi Folks,
  
  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.
  
  I tested all of this with the following version combos:
  Debian Jessie/Emacs 24.3.1/Orgmode 8.2.5h-1 (debian)
  Debian Jessie/Emacs 24.3.1/Orgmode latest git
  
  Thanks for any hint that could help.
  
  ~Alban.
  
  PS: the "Show the source"
   button of http://orgmode.org/worg/org-tutorials/images-and-xhtml-export.html
  redirects to:
  http://orgmode.org/worg/org-tutorials/images-and-xorg.html-export.org.html
  rather than:
  http://orgmode.org/worg/org-tutorials/images-and-xhtml-export.org.html
  
  [-- Attachment #2: Type: text/html, Size: 3598 bytes --]
  
  ^ permalink raw reply	[flat|nested] 8+ messages in thread

• • * Re: resize multiple image within a row or paragraph
      2014-09-20  7:23 ` alban bernard
    @ 2014-09-20 12:08   ` Nicolas Goaziou
      2014-09-21 13:22     ` alban bernard
      0 siblings, 1 reply; 8+ messages in thread
    From: Nicolas Goaziou @ 2014-09-20 12:08 UTC (permalink / raw)
      To: alban bernard; +Cc: emacs-orgmode@gnu.org
    
    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
    
    ^ permalink raw reply	[flat|nested] 8+ messages in thread

  • • * Re: resize multiple image within a row or paragraph
        2014-09-20 12:08   ` Nicolas Goaziou
      @ 2014-09-21 13:22     ` alban bernard
        2014-09-21 18:08       ` Christian Moe
        0 siblings, 1 reply; 8+ messages in thread
      From: alban bernard @ 2014-09-21 13:22 UTC (permalink / raw)
        To: Nicolas Goaziou; +Cc: emacs-orgmode@gnu.org
      
      Wow. Thanks for your reply. I will stop googling and worg-ing for a solution. I will rather dig into your suggestion. As I understood, there is some hackery involved here .. :)
      
      Thanks again.
      
      ~Alban Bernard
      
      
      On Saturday, September 20, 2014 2:08 PM, Nicolas Goaziou <mail@nicolasgoaziou.fr> wrote:
      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
      
      ^ permalink raw reply	[flat|nested] 8+ messages in thread

    • • * Re: resize multiple image within a row or paragraph
          2014-09-21 13:22     ` alban bernard
        @ 2014-09-21 18:08       ` Christian Moe
          2014-09-21 19:02         ` alban bernard
          2014-09-22 15:56         ` Nicolas Goaziou
          0 siblings, 2 replies; 8+ messages in thread
        From: Christian Moe @ 2014-09-21 18:08 UTC (permalink / raw)
          To: alban bernard; +Cc: emacs-orgmode@gnu.org, Nicolas Goaziou
        
        
        Hi,
        
        Here's a simple CSS workaround that might or might not work well for
        you, and won't work for non-HTML backends, but at least requires minimal
        hacking: 
        
        Wrap the sentence in a DIV element and define a class for it to force
        child paragraphs to display as inline instead of blocks. 
        
        You can set up the style sheets in various ways, but by way of
        demonstration, add the style definition with HTML_HEAD export keyword:
        
        #+HTML_HEAD: <style>.inlineparas p {display: inline;} </style>
        
        Then you can do things like  this:
        
        #+html: <div class="inlineparas">
        This is a phrase with
        #+ATTR_HTML: :width 50%
        [[./image1.png]]
        and
        #+ATTR_HTML: :width 50%
        [[./image2.png]]
        inline images.
        #+end_inlineparas
        #+html: </div>
        
        The generic #+begin_{block} syntax lets you do this in a more org-like
        and less cluttered way:
        
        #+begin_inlineparas
        This is a phrase with
        #+ATTR_HTML: :width 50%
        [[./image1.png]]
        and
        #+ATTR_HTML: :width 50%
        [[./image2.png]]
        inline images.
        #+end_inlineparas
        
        Yours,
        Christian
        
        alban bernard writes:
        
        > Wow. Thanks for your reply. I will stop googling and worg-ing for a solution. I will rather dig into your suggestion. As I understood, there is some hackery involved here .. :)
        >
        > Thanks again.
        >
        > ~Alban Bernard
        >
        >
        > On Saturday, September 20, 2014 2:08 PM, Nicolas Goaziou <mail@nicolasgoaziou.fr> wrote:
        > Hello,
        >
        >
        > alban bernard <alban.bernard@yahoo.fr> writes:
        >
        >
        >> (...)
        >> 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.
        >> 
        >> (...) 
        >> 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. 
        > (...)
        
        ^ permalink raw reply	[flat|nested] 8+ messages in thread

      • • * Re: resize multiple image within a row or paragraph
            2014-09-21 18:08       ` Christian Moe
          @ 2014-09-21 19:02         ` alban bernard
            2014-09-22 15:56         ` Nicolas Goaziou
            1 sibling, 0 replies; 8+ messages in thread
          From: alban bernard @ 2014-09-21 19:02 UTC (permalink / raw)
            To: Christian Moe; +Cc: emacs-orgmode@gnu.org, Nicolas Goaziou
          
          I will test this workaround pronto. For other backends, that's not a problem as I render pdf from html through phantomjs and I don't use neither latex nor odt for the moment. 
          
          
          Big thanks to you both.
          ~Alban Bernard.
          
          
          
          On Sunday, September 21, 2014 8:07 PM, Christian Moe <mail@christianmoe.com> wrote:
          
          Hi,
          
          Here's a simple CSS workaround that might or might not work well for
          you, and won't work for non-HTML backends, but at least requires minimal
          hacking: 
          
          Wrap the sentence in a DIV element and define a class for it to force
          child paragraphs to display as inline instead of blocks. 
          
          You can set up the style sheets in various ways, but by way of
          demonstration, add the style definition with HTML_HEAD export keyword:
          
          #+HTML_HEAD: <style>.inlineparas p {display: inline;} </style>
          
          Then you can do things like  this:
          
          #+html: <div class="inlineparas">
          This is a phrase with
          #+ATTR_HTML: :width 50%
          [[./image1.png]]
          and
          #+ATTR_HTML: :width 50%
          [[./image2.png]]
          inline images.
          #+end_inlineparas
          #+html: </div>
          
          The generic #+begin_{block} syntax lets you do this in a more org-like
          and less cluttered way:
          
          #+begin_inlineparas
          This is a phrase with
          #+ATTR_HTML: :width 50%
          [[./image1.png]]
          and
          #+ATTR_HTML: :width 50%
          [[./image2.png]]
          inline images.
          #+end_inlineparas
          
          Yours,
          Christian
          
          
          
          
          alban bernard writes:
          
          > Wow. Thanks for your reply. I will stop googling and worg-ing for a solution. I will rather dig into your suggestion. As I understood, there is some hackery involved here .. :)
          >
          > Thanks again.
          >
          > ~Alban Bernard
          >
          >
          > On Saturday, September 20, 2014 2:08 PM, Nicolas Goaziou <mail@nicolasgoaziou.fr> wrote:
          > Hello,
          >
          >
          > alban bernard <alban.bernard@yahoo.fr> writes:
          >
          >
          >> (...)
          >> 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.
          >> 
          >> (...) 
          >> 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. 
          > (...)
          
          ^ permalink raw reply	[flat|nested] 8+ messages in thread

        • * Re: resize multiple image within a row or paragraph
            2014-09-21 18:08       ` Christian Moe
            2014-09-21 19:02         ` alban bernard
          @ 2014-09-22 15:56         ` Nicolas Goaziou
            2014-09-24 13:37           ` Christian Moe
            1 sibling, 1 reply; 8+ messages in thread
          From: Nicolas Goaziou @ 2014-09-22 15:56 UTC (permalink / raw)
            To: Christian Moe; +Cc: alban bernard, emacs-orgmode@gnu.org
          
          Hello,
          
          Christian Moe <mail@christianmoe.com> writes:
          
          > Here's a simple CSS workaround that might or might not work well for
          > you, and won't work for non-HTML backends, but at least requires minimal
          > hacking: 
          
          [...]
          
          Good to know.
          
          Anyhow, does my proposal make sense?
          
          
          Regards,
          
          -- 
          Nicolas Goaziou
          
          ^ permalink raw reply	[flat|nested] 8+ messages in thread

        • • * Re: resize multiple image within a row or paragraph
              2014-09-22 15:56         ` Nicolas Goaziou
            @ 2014-09-24 13:37           ` Christian Moe
              0 siblings, 0 replies; 8+ messages in thread
            From: Christian Moe @ 2014-09-24 13:37 UTC (permalink / raw)
              To: Nicolas Goaziou; +Cc: alban bernard, emacs-orgmode@gnu.org
            
            
            Nicolas Goaziou writes:
            > Hello,
            >
            > Christian Moe <mail@christianmoe.com> writes:
            >
            >> Here's a simple CSS workaround that might or might not work well for
            >> you, and won't work for non-HTML backends, but at least requires minimal
            >> hacking: 
            >
            > [...]
            >
            > Good to know.
            >
            > Anyhow, does my proposal make sense?
            >
            >
            > Regards,
            
            Hi,
            
            Sorry, catching up on mail. Also, I misunderstood your proposal when you
            wrote it -- I thought it was a suggestion for what the user could
            do. But now I realize it's a proposed change to the HTML backend
            itself. You wrote:
            
            > `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.
            
            I'm no expert either. But FWIW, it does make sense to me, and seems
            intuitive from an HTML-centric view, since IMG elements
            in HTML are basically inline. I think users would expect to have to put
            blank lines around an image if they want it wrapped in a paragraph, and
            should expect to get in trouble if they did not put blank lines around a
            captioned figure.
            
            Yours,
            Christian
            
            ^ permalink raw reply	[flat|nested] 8+ messages in thread

end of thread, other threads:[~2014-09-24 13:35 UTC | newest]

Thread overview: 8+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2014-09-18 15:13 resize multiple image within a row or paragraph alban bernard
2014-09-20  7:23 ` alban bernard
2014-09-20 12:08   ` Nicolas Goaziou
2014-09-21 13:22     ` alban bernard
2014-09-21 18:08       ` Christian Moe
2014-09-21 19:02         ` alban bernard
2014-09-22 15:56         ` Nicolas Goaziou
2014-09-24 13:37           ` Christian Moe

Code repositories for project(s) associated with this public inbox

	https://git.savannah.gnu.org/cgit/emacs/org-mode.git

This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).