resize multiple image within a row or paragraph

resize multiple image within a row or paragraph

[alban bernard]

[-- 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 --]

Re: resize multiple image within a row or paragraph

[alban bernard]

[-- 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 --]

Re: resize multiple image within a row or paragraph

[Nicolas Goaziou]

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

Re: resize multiple image within a row or paragraph

[alban bernard]

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

Re: resize multiple image within a row or paragraph

[Christian Moe]

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. 
> (...)

Re: resize multiple image within a row or paragraph

[alban bernard]

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. 
> (...)

Re: resize multiple image within a row or paragraph

[Nicolas Goaziou]

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

Re: resize multiple image within a row or paragraph

[Christian Moe]

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