applying html classes to the "figure div on HTML export

applying html classes to the "figure div on HTML export

[Matt Price]

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

Re: applying html classes to the "figure div on HTML export

[Matt Price]

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

Re: applying html classes to the "figure div on HTML export

[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