* 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
[parent not found: <m2bo3oiqd3.fsf@uio.no>]
* 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 external index https://git.savannah.gnu.org/cgit/emacs.git https://git.savannah.gnu.org/cgit/emacs/org-mode.git This is an external index of several public inboxes, see mirroring instructions on how to clone and mirror all data and code used by this external index.