org-tutorials/images-and-xhtml-export.org

   1 #+TITLE: Images and XHTML export
   2 #+AUTHOR:     Sebastian Rose and the Worg people
   3 #+EMAIL:      sebastian_rose gmx de
   4 #+OPTIONS:    H:3 num:nil toc:t \n:nil ::t |:t ^:t -:t f:t *:t tex:t d:(HIDE) tags:not-in-toc
   5 #+STARTUP:    align fold nodlcheck hidestars oddeven lognotestate
   6 #+SEQ_TODO:   TODO(t) INPROGRESS(i) WAITING(w@) | DONE(d) CANCELED(c@)
   7 #+TAGS:       Write(w) Update(u) Fix(f) Check(c)
   8 #+LANGUAGE:   en
   9 #+CATEGORY:   worg-tutorial
  10 #+SETUPFILE:  ../macros.setupfile
  11 #+MACRO: imageurl /img/org-mode-unicorn.png
  12
  13 # This file is released by its authors and contributors under the GNU
  14 # Free Documentation license v1.3 or later, code examples are released
  15 # under the GNU General Public License v3 or later.
  16
  17 [[file:../index.org][{Back to Worg's index}]]
  18
  19 * Image basics
  20
  21   Images are inserted into an Org file in a fashion similar to links:
  22
  23   : [[file:/img/org-mode-unicorn.png]]
  24
  25   The =file:= prefix is optional, as long as a known image type is
  26   used. Org-mode recognizes images by the file name suffix. Recognized
  27   suffixes are all the members of
  28   =org-export-html-inline-image-extensions= which defaults to the list
  29   =("png" "jpeg" "jpg" "gif")=. That said, the images above could as
  30   well be included using this link:
  31
  32   : [[/img/org-mode-unicorn.png]]
  33
  34   The special form
  35
  36   :  [[/img/org-mode-unicorn.png][Monocerus glaucus]]
  37
  38   exports to a link to the image:
  39
  40   #+begin_src html
  41   <a href="/img/org-mode-unicorn.png">Monocerus glaucus</a>
  42   #+end_src
  43
  44   For this tutorial, we assume the variable
  45   =org-export-html-inline-images= is unchanged from its standard
  46   setting, i.e. =maybe=. Images are shown in the exported page this
  47   way. And we will talk about visible images only.
  48
  49   Don't be afraid.  Most of the text in this little tutorial is just
  50   blind text (and in gray color therefor).
  51
  52   Read the basics about images in XHTML export in the Org-mode manual,
  53   [[https://orgmode.org/manual/Images-in-HTML-export.html#Images-in-HTML-export][Section Images]] (e.g. show a thumbnail, that links to a high
  54   resolution image...).
  55
  56 * A simple image
  57
  58   Let's simply put an image inside a paragraph like this
  59
  60   : Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  61   : [[[[/img/org-mode-unicorn.png]]]]
  62   : euismod  tincidunt ut laoreet dolore magna aliquam erat volutpat.
  63
  64   {{{BeginWarningBox}}} Note, that *empty lines are crucial*. The exporter
  65   will start a new paragraph, if you add an empty line before or after
  66   the image. You can easily try that yourself, simply by adding an
  67   empty line before and/or after the image and export
  68   again.{{{EndWarningBox}}}
  69
  70   To see the result, export your Org file to HTML (press =C-x C-e b=)
  71   and see the results. Note, that the image is displayed just where
  72   you placed it.
  73
  74   {{{BeginMiniPage}}}
  75
  76   {{{BeginBlindText}}}
  77
  78   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  79   nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
  80   enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
  81   nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
  82   hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
  83   feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui
  84   blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
  85   facilisi.
  86
  87   {{{EndBlindText}}}
  88
  89   [[/img/org-mode-unicorn.png]]
  90
  91   {{{BeginBlindText}}}
  92
  93   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  94   nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
  95   enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
  96   nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
  97   hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
  98   feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui
  99   blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
 100   facilisi.
 101
 102   {{{EndBlindText}}}
 103
 104   {{{EndMiniPage}}}
 105
 106 * Image attributes
 107
 108   Org-mode allows us to add HTML attributes to the exported
 109   image. There are several useful attributes, some of which are
 110   mandatory, as the =src= and =alt= attributes. Org-mode adds an empty =alt=
 111   attribute for you, if not supplied. You can add additional
 112   attributes using a special syntax. E.g. you could change the value
 113   of the =alt= attribute this way:
 114
 115   : #+ATTR_HTML: :alt My fancy value for the alt attribute
 116   : [[/img/org-mode-unicorn.png]]
 117
 118   You may add more attributes to an =#+ATTR_HTML:= line. More than one
 119   =#+ATTR_HTML:= line is allowed for readability. Example:
 120
 121   : #+ATTR_HTML: :alt Zoomed image.
 122   : #+ATTR_HTML: :width 300 :style border:2px solid black;
 123   : [[/img/org-mode-unicorn.png]]
 124
 125   A full list of valid attributes can be found on
 126   [[http://www.w3schools.com/tags/tag_img.asp]].
 127
 128 * Align images
 129
 130   If you want text to flow around your images, the =style= attribute
 131   comes handy.  To place the image on the left, and let the text flow
 132   around the image on the right, use this code:
 133
 134   : #+ATTR_HTML: :style float:left;
 135
 136   Possible values for the =float:= CSS attribute are =left=, =right= and
 137   =none= (the default). =left= causes the image to show up on the left of
 138   the text succeeding the image, =right= will place the image on the
 139   right side of the text succeeding the image.
 140
 141   You can control the gap between image and surrounding text, using
 142   the =margin:= CSS attribute like so:
 143
 144   : #+ATTR_HTML: :style float:left;margin:20px 20px 20px 0px;
 145
 146   The order of the values given, are the distances in the north east
 147   south, and west.
 148
 149   Again: *Please avoid empty lines before and after* the image, if you
 150   want to achieve the effect shown in this example: one paragraph of
 151   text that flows around two images. The exporter adds a =<p>= element
 152   for empty lines otherwise.
 153
 154   This code shows, how we can add attributes to the =<img ... />= tag in Org-mode:
 155
 156   : #+ATTR_HTML: :style float:right;margin:0px 0px 20px 20px;
 157   : [[/img/org-mode-unicorn.png]]
 158   : Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
 159   : #+ATTR_HTML: :style float:left;margin:20px 20px 20px 0px;
 160   : [[/img/org-mode-unicorn.png]]
 161   : euismod  tincidunt ut laoreet dolore magna aliquam erat volutpat.
 162
 163   {{{BeginInfoBox}}}
 164
 165   *Note:* The =#+ATTR_HTML:= line as well as the image definition have to
 166   be on a single line respectively. Don't put _any_ additional text on
 167   those lines or the attributes will not be added to the image tag on
 168   export!
 169
 170   {{{EndInfoBox}}}
 171
 172   {{{BeginMiniPage}}}
 173
 174   #+ATTR_HTML: :style float:right;margin:0px 0px 20px 20px;
 175   [[/img/org-mode-unicorn.png]]
 176
 177   This text is directly succeeds the first image, which is right
 178   aligned. Because of the alignment, placing the image after the first few
 179   lines would make no difference.
 180
 181   {{{BeginBlindText}}}
 182
 183   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
 184   nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
 185   enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
 186   nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
 187   hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
 188   feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui
 189   blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
 190   facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
 191   nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
 192   volutpat.
 193
 194   {{{EndBlindText}}}
 195
 196   Text before the second image ends here.
 197
 198   #+ATTR_HTML: :style float:left;margin:20px 20px 20px 0px;
 199   [[/img/org-mode-unicorn.png]]
 200
 201   This text is directly following the second image. No empty lines are added.
 202   Neither before, nor after the image. We therefor see one big paragraph with
 203   two images. Note, that browsers will place this second image where ever they
 204   see fit. Browsers will not interrupt the text flow, just to place the image
 205   add the exact point between two words.
 206
 207   {{{BeginBlindText}}}
 208
 209   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
 210   nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
 211   volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
 212   ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
 213   consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
 214   velit esse molestie consequat, vel illum dolore eu feugiat nulla
 215   facilisis at vero et accumsan et iusto odio dignissim qui blandit
 216   praesent luptatum zzril delenit augue duis dolore te feugait nulla
 217   facilisi.
 218
 219   {{{EndBlindText}}}
 220
 221   {{{EndMiniPage}}}
 222
 223 ** Images in a row
 224
 225    And here is how to fill the width of your display with images and let the
 226    lines break automatically. Just add =display:inline;= to the =style= attributes.
 227
 228    : #+ATTR_HTML: :style display:inline;margin:10px;
 229    : [[/img/org-mode-unicorn.png]]
 230    : #+ATTR_HTML: :style display:inline;margin:10px;
 231    : [[/img/org-mode-unicorn.png]]
 232    : #+ATTR_HTML: :style display:inline;margin:10px;
 233    : [[/img/org-mode-unicorn.png]]
 234    : #+ATTR_HTML: :style display:inline;margin:10px;
 235    : [[/img/org-mode-unicorn.png]]
 236
 237    results in:
 238
 239    {{{BeginMiniPage}}}
 240
 241    #+ATTR_HTML: :style display:inline;margin:10px;
 242    [[/img/org-mode-unicorn.png]]
 243    #+ATTR_HTML: :style display:inline;margin:10px;
 244    [[/img/org-mode-unicorn.png]]
 245    #+ATTR_HTML: :style display:inline;margin:10px;
 246    [[/img/org-mode-unicorn.png]]
 247    #+ATTR_HTML: :style display:inline;margin:10px;
 248    [[/img/org-mode-unicorn.png]]
 249    #+ATTR_HTML: :style display:inline;margin:10px;
 250    [[/img/org-mode-unicorn.png]]
 251    #+ATTR_HTML: :style display:inline;margin:10px;
 252    [[/img/org-mode-unicorn.png]]
 253    #+ATTR_HTML: :style display:inline;margin:10px;
 254    [[/img/org-mode-unicorn.png]]
 255    #+ATTR_HTML: :style display:inline;margin:10px;
 256    [[/img/org-mode-unicorn.png]]
 257
 258    {{{EndMiniPage}}}
 259
 260 * Images with Captions
 261
 262   You might want to attach a caption to your images. You can do so using this
 263   code:
 264
 265   : #+CAPTION: Monocerus glaucus
 266   : #+ATTR_HTML: :alt Monocerus glaucus
 267   : [[[[/img/org-mode-unicorn.png]]]]
 268
 269   {{{BeginInfoBox}}}
 270   In this case, empty lines before and after the image make no difference since
 271   the exporter ends paragraphs and restarts them below the image.
 272   {{{EndInfoBox}}}
 273
 274   {{{BeginMiniPage}}}
 275
 276   #+CAPTION: Monocerus glaucus
 277   #+ATTR_HTML: :alt Monocerus glaucus
 278   [[/img/org-mode-unicorn.png]]
 279   {{{BeginBlindText
 280   }}}Lorem ipsum dolor sit amet, consectetuer
 281   adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
 282   magna aliquam erat volutpat.
 283   {{{EndBlindText}}}
 284
 285   {{{EndMiniPage}}}
 286
 287 ** Captions and floating
 288
 289    There is no /figure/ element in XHTML and captions are not supported
 290    at all. But the exporter wraps the =<img..../>= tag in certain
 291    containers to add the caption for you:
 292
 293    #+BEGIN_SRC html
 294     <div class="figure">
 295     <p><img src="path/to/img.png" alt="Monocerus glaucus" /></p>
 296     <p>Monocerus glaucus</p>
 297     </div>
 298    #+END_SRC
 299
 300    To make text flow around your image, you need to adjust the styles
 301    for the special HTML elements that wrap images with captions. The
 302    exporter puts the default styles in the =<head>= section of your
 303    XHTML files. This is, what they look like:
 304
 305    : div.figure { padding: 0.5em; }
 306    : div.figure p { text-align: center; }
 307
 308    To achive the floating, add this to the top of the Org-file:
 309
 310    #+COMMENT: no width necessary, CSS 2.1
 311
 312    : #+STYLE: <style type="text/css">
 313    : #+STYLE:<!--/*--><![CDATA[/*><!--*/
 314    : #+STYLE: div.figure { float:left; }
 315    : #+STYLE: /*]]>*/-->
 316    : #+STYLE: </style>
 317
 318    The crucial attribute is =float:left;=. Choose =float:right;= to place
 319    the images on the right edge of your paragraphs. The styles will
 320    apply to _all_ images with captions in your file.
 321
 322    {{{BeginInfoBox}}}
 323
 324    *Note (again):* In this case, empty lines before and after the image
 325    make no difference since the exporter ends paragraphs and restarts
 326    them below the image. This said, a floating image with a caption
 327    will always sit on the top left/right of the following paragraph.
 328
 329    {{{EndInfoBox}}}
 330
 331    Result:
 332
 333    {{{BeginMiniPage}}}
 334
 335    {{{BeginBlindText}}}
 336
 337    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
 338    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
 339    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
 340    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
 341    consequat.
 342
 343    {{{EndBlindText}}}
 344
 345    This text
 346    directly preceeds the image and ends here.
 347
 348     #+begin_export html
 349 <div class="figure" style="float:left;">
 350 <p><img src="/img/org-mode-unicorn.png" alt="image" hspace="20" vspace="20" /></p>
 351 <p>Equus Unicorn Viridis</p>
 352 </div>
 353    #+end_export
 354
 355    This text directly follows the image. No empty are inserted before or after
 356    the image. Note, that a new paragraph has started nonetheless.
 357
 358    {{{BeginBlindText }}}
 359
 360    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
 361    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
 362    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
 363    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
 364    consequat. Duis autem vel eum iriure dolor in hendrerit in
 365    vulputate velit esse molestie consequat, vel illum dolore eu
 366    feugiat nulla facilisis at vero et accumsan et iusto odio dignissim
 367    qui blandit praesent luptatum zzril delenit augue duis dolore te
 368    feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
 369    adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
 370    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
 371    quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
 372    aliquip ex ea commodo.
 373
 374    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
 375    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
 376    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
 377    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
 378    consequat. Duis autem vel eum iriure dolor in hendrerit in
 379    vulputate velit esse molestie consequat, vel illum dolore eu
 380    feugiat nulla facilisis at vero et accumsan et iusto odio dignissim
 381    qui blandit praesent luptatum zzril delenit augue duis dolore te
 382    feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
 383    adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
 384    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
 385    quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
 386    aliquip ex ea commodo...
 387
 388    {{{EndBlindText}}}
 389
 390    {{{EndMiniPage}}}
 391
 392 *** Problems with captions and float
 393
 394     The =float:left;= style causes following blocks to show up on the right of
 395     your image. So did the following paragraph in the previous example.
 396     Inevitably, this will happen against your will. In that case, put this after
 397     the image:
 398
 399     : #+begin_export html
 400     :  <br style="clear:both;" />
 401     : #+end_export
 402
 403     Or you could use the less obtrusive syntax:
 404
 405     : @<br style="clear:both;" />
 406
 407 ** Captions in a row
 408
 409    In addition, =float:left;= changes the alignment of several images with caption
 410    in a row. They now fill a row on the display, until the screen width is
 411    filled with images. They now behave like simple text.
 412
 413    #+begin_src org
 414      ,#+CAPTION: Michael
 415      ,#+ATTR_HTML::alt image
 416      [[/img/org-mode-unicorn.png]]
 417      ,#+CAPTION: Steve
 418      ,#+ATTR_HTML::alt image
 419      [[/img/org-mode-unicorn.png]]
 420      ,#+CAPTION: Carla
 421      ,#+ATTR_HTML::alt image
 422      [[/img/org-mode-unicorn.png]]
 423      ,#+CAPTION: Pete
 424      ,#+ATTR_HTML::alt image
 425      [[/img/org-mode-unicorn.png]]
 426
 427      ... etc. - many more ...
 428    #+end_src
 429
 430     results in:
 431
 432 #+COMMENT: This has to be HTML, because we cannot include the styles into the head section.
 433 #+COMMENT: Therefor, this has to be reworked if the output of the exporter changes.
 434
 435    {{{BeginMiniPage}}}
 436
 437    #+begin_export html
 438     <div class="figure" style="float:left;">
 439     <p><img src="/img/org-mode-unicorn.png" alt="image" /></p>
 440     <p>Michael</p>
 441     </div>
 442
 443     <div class="figure" style="float:left;">
 444     <p><img src="/img/org-mode-unicorn.png" alt="image" /></p>
 445     <p>Steve</p>
 446     </div>
 447
 448     <div class="figure" style="float:left;">
 449     <p><img src="/img/org-mode-unicorn.png" alt="image" /></p>
 450     <p>Carla</p>
 451     </div>
 452
 453     <div class="figure" style="float:left;">
 454     <p><img src="/img/org-mode-unicorn.png" alt="image" /></p>
 455     <p>Pete</p>
 456     </div>
 457
 458     <div class="figure" style="float:left;">
 459     <p><img src="/img/org-mode-unicorn.png" alt="image" /></p>
 460     <p>Paul</p>
 461     </div>
 462
 463     <div class="figure" style="float:left;">
 464     <p><img src="/img/org-mode-unicorn.png" alt="image" /></p>
 465     <p>Alice</p>
 466     </div>
 467
 468     <div class="figure" style="float:left;">
 469     <p><img src="/img/org-mode-unicorn.png" alt="image" /></p>
 470     <p>Maria</p>
 471     </div>
 472
 473     <div class="figure" style="float:left;">
 474     <p><img src="/img/org-mode-unicorn.png" alt="image" /></p>
 475     <p>Lucien</p>
 476     </div>
 477     <br style="clear:both;" />
 478    #+end_export
 479
 480    {{{EndMiniPage}}}
 481
 482 ** Italic captions
 483
 484    Captions are often printed in italics. To do so, go to the top of your
 485    Org-file again, and edit the styles again:
 486
 487    : #+STYLE: <style type="text/css">
 488    : #+STYLE:<!--/*--><![CDATA[/*><!--*/
 489    : #+STYLE: div.figure p { font-style:italic; }
 490    : #+STYLE: /*]]>*/-->
 491    : #+STYLE: </style>
 492
 493    {{{BeginMiniPage}}}
 494
 495    #+begin_export html
 496     <div class="figure" style="float:right;">
 497     <p><img src="/img/org-mode-unicorn.png" alt="Save the unicorns" /></p>
 498     <p style="font-style:italic;">Save the unicorns</p>
 499     </div>
 500    #+end_export
 501    {{{BeginBlindText}}}
 502
 503    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
 504    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
 505    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
 506    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
 507    consequat. Duis autem vel eum iriure dolor in hendrerit in
 508    vulputate velit esse molestie consequat, vel illum dolore eu
 509    feugiat nulla facilisis at vero et accumsan et iusto odio dignissim
 510    qui blandit praesent luptatum zzril delenit augue duis dolore te
 511    feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
 512    adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
 513    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
 514    quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
 515    aliquip ex ea commodo.  Lorem ipsum dolor sit amet, consectetuer
 516    adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
 517    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
 518    quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
 519    aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
 520    hendrerit in vulputate velit esse molestie consequat, vel illum
 521    dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio
 522    dignissim qui blandit praesent luptatum zzril delenit augue duis
 523    dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
 524    consectetuer adipiscing elit, sed diam nonummy nibh euismod
 525    tincidunt ut laoreet dolore magna aliquam erat volutpat.  Lorem
 526    ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
 527    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
 528    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
 529    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
 530    consequat. Duis autem vel eum iriure dolor in hendrerit in
 531    vulputate velit esse molestie consequat, vel illum dolore eu
 532    feugiat nulla facilisis at vero et accumsan et iusto odio dignissim
 533    qui blandit praesent luptatum zzril delenit augue duis dolore te
 534    feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
 535    adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
 536    dolore magna aliquam erat volutpat.
 537
 538    {{{EndBlindText}}}
 539
 540    {{{EndMiniPage}}}
 541
 542 ** Final captions example
 543
 544    Here is a last weird example of what styles can do for you. Let's
 545    put the caption to the right of an image.
 546
 547    : #+STYLE: <style type="text/css">
 548    : #+STYLE:<!--/*--><![CDATA[/*><!--*/
 549    : #+STYLE: div.figure {
 550    : #+STYLE:  width:235px; /* ensure the same width for each. */
 551    : #+STYLE:  float:left;
 552    : #+STYLE:  margin:5px;
 553    : #+STYLE: }
 554    : #+STYLE: div.figure p {
 555    : #+STYLE:  display:inline;
 556    : #+STYLE:  font-style:italic;
 557    : #+STYLE: }
 558    : #+STYLE: /*]]>*/-->
 559    : #+STYLE: </style>
 560
 561    {{{BeginMiniPage}}}
 562
 563    #+begin_export html
 564     <div class="figure" style="width:235px;float:left;margin:5px;">
 565     <p style="display:inline;"><img src="/img/org-mode-unicorn.png" alt="image" style="vertical-align:middle;" /></p>
 566     <p style="display:inline;font-style:italic;">Michael</p>
 567     </div>
 568
 569     <div class="figure" style="width:235px;float:left;margin:5px;">
 570     <p style="display:inline;"><img src="/img/org-mode-unicorn.png" alt="image" style="vertical-align:middle;" /></p>
 571     <p style="display:inline;font-style:italic;">Steve</p>
 572     </div>
 573
 574     <div class="figure" style="width:235px;float:left;margin:5px;">
 575     <p style="display:inline;"><img src="/img/org-mode-unicorn.png" alt="image" style="vertical-align:middle;" /></p>
 576     <p style="display:inline;font-style:italic;">Carla</p>
 577     </div>
 578     <br style="clear:both;" />
 579     <div class="figure" style="width:235px;float:left;margin:5px;">
 580     <p style="display:inline;"><img src="/img/org-mode-unicorn.png" alt="image" style="vertical-align:middle;" /></p>
 581     <p style="display:inline;font-style:italic;">Pete</p>
 582     </div>
 583
 584     <div class="figure" style="width:235px;float:left;margin:5px;">
 585     <p style="display:inline;"><img src="/img/org-mode-unicorn.png" alt="image" style="vertical-align:middle;" /></p>
 586     <p style="display:inline;font-style:italic;">Paul</p>
 587     </div>
 588    #+end_export
 589
 590    If the sum of three =div.figure='s widths and margins were so wide,
 591    that three Monoceri wouldn't fit in one row, this text would start
 592    on the very top of this mini page.
 593
 594    Let's add another little paragraph here, to show how =float=
 595    works. How to get out of here?
 596
 597    : =@<br style="clear:both;"/>=
 598
 599    ...did the trick. It's advisable, to add this after the third image
 600    above since the first paragraph starts with very short words.
 601
 602    {{{EndMiniPage}}}
 603
 604 * Summary
 605
 606   1. Images are referenced using Org-mode's link syntax.
 607   2. As for simple links, the =file:= prefix is optional, as long as the
 608      suffix is a member of =org-export-html-inline-image-extensions=.
 609   3. We can add HTML attributes to images
 610      - using =#+ATTR_HTML:=
 611      - Both, the =#+ATTR_HTML:= line and the image have to be on their own line.
 612   4. We prefer the =style= attribute to align images. The most important CSS
 613      attributes are =float:= and =margin:=.
 614   5. We can add a caption to images, even though (X)HTML doesn't
 615      support this. We use the special =#+CAPTION:= line to supply a
 616      caption. This has to be on a single line, too.
 617   6. The exporter wraps the image and the caption into a =<div
 618      class=="=figure">= and two =<p>= elements. The first =<p>= element
 619      contains our image, the second one the caption.
 620   7. By adding special styles for those elements to the top of our
 621      Org-file (=#+STYLE:=), we can align images with captions, too.
 622   8. Styles added for images with captions apply to all images with
 623      captions in the file.