* applying html classes to the "figure div on HTML export
@ 2013-09-19 18:14 Matt Price
[not found] ` <m2bo3oiqd3.fsf@uio.no>
0 siblings, 1 reply; 3+ messages in thread
From: Matt Price @ 2013-09-19 18:14 UTC (permalink / raw)
To: Org Mode
Hi,
Is there a way to apply an HTML class to the the <div class="figure">
element which is generated around an image link on HTML export? I am
making a presentation using org--> deck.js (ox-deck.el), and I want
most of my images to be centred, but in cases where I have more than
one image, I want them to display in rows using the float:left
property. If I just float the images using
#+ATTR_HTML: :style float:left
then their captions do not display consistently above or below them.
I can use CSS to addres every div.figure, but that forces ALL images
to be aligned to the left-hand side of the slide, which is not what I
want. I think I could also write some javascript to add the class
dynamically when there's more than one div.figure in a div.slide, but
I odn't understand deck well enough to be sure how to do that. Any
suggestions?
Thanks!
Matt
^ permalink raw reply [flat|nested] 3+ messages in thread
* Re: applying html classes to the "figure div on HTML export
[not found] ` <m2bo3oiqd3.fsf@uio.no>
@ 2013-09-19 20:10 ` Matt Price
2013-09-19 21:06 ` Christian Moe
0 siblings, 1 reply; 3+ messages in thread
From: Matt Price @ 2013-09-19 20:10 UTC (permalink / raw)
To: Christian Moe, Org Mode
On Thu, Sep 19, 2013 at 3:05 PM, Christian Moe <mail@christianmoe.com> wrote:
>
> Matt Price writes:
>
>> Hi,
>>
>> Is there a way to apply an HTML class to the the <div class="figure">
>> element which is generated around an image link on HTML export?
>
> I don't think there is...?
>
> What you /can/ do is wrap the image in a special block/custom div of your own, e.g. as
> follows (the "myfloat" name is arbitrary):
>
> #+begin_myfloat
> [[./picture.png]]
> #+end_myfloat
>
> This results in:
>
> <div class="myfloat">
>
> <div class="figure">
> <p><img src="./picture.png" alt="picture.png" />
> </p>
> </div>
>
> </div>
>
> Then you style the div.myfloat class with CSS.
>
> If I understand your problem correctly, you can also wrap all the images
> that should go in a row in a single special block/custom div, e.g.
>
> #+begin_myfloat
> [[./picture1.png]]
>
> [[./picture2.png]]
>
> [[./picture3.png]]
> #+end_myfloat
>
> Then style the figure children of such divs with
>
> div.myfloat div.figure { ... }
>
> Does this work for you?
ah, that's cool. I had just figured out another workaround, which was to add
:PROPERTIES:
:HTML_CONTAINER_CLASS: multi-image
:END:
to the containing headline, and then add
.multi-image div.figure {float:left;}
to the CSS. It seems to have worked for me so far. But the syntax
you describe is easier and more flexible. I'll try it out soon
thanks!
Matt
>
> Yours,
> Christian
^ permalink raw reply [flat|nested] 3+ messages in thread
* Re: applying html classes to the "figure div on HTML export
2013-09-19 20:10 ` Matt Price
@ 2013-09-19 21:06 ` Christian Moe
0 siblings, 0 replies; 3+ messages in thread
From: Christian Moe @ 2013-09-19 21:06 UTC (permalink / raw)
To: Matt Price; +Cc: Org Mode, Christian Moe
Matt Price writes:
I had just figured out another workaround, which was to add
> :PROPERTIES:
> :HTML_CONTAINER_CLASS: multi-image
> :END:
>
> to the containing headline, and then add
>
> .multi-image div.figure {float:left;}
>
> to the CSS.
Right, that should be flexible enough for slides. I don't suppose you'll
want to have both floated and non-floated images on the same slide. I
was reaching for a more general solution -- there might be documents
where you do want to have both under the same heading.
Yours,
Christian
^ permalink raw reply [flat|nested] 3+ messages in thread
end of thread, other threads:[~2013-09-19 21:03 UTC | newest]
Thread overview: 3+ messages (download: mbox.gz follow: Atom feed
-- links below jump to the message on this page --
2013-09-19 18:14 applying html classes to the "figure div on HTML export Matt Price
[not found] ` <m2bo3oiqd3.fsf@uio.no>
2013-09-19 20:10 ` Matt Price
2013-09-19 21:06 ` 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).