Allowing to define class in img tag.

[antoine-morisseau]

Hello everyone,

I want to display image without black border and box-shadow, i saw that every theme have this class available :

.reveal section img.plain {
  border: 0;
  box-shadow: none; }

But when applying the role plain to the asciidoc image it does not do what i need. here is the asciidoc data :

[role=plain]
image:logo_asciidoctor.svg[background, size=cover, role=plain]

You can see in the screenshot the addition of the plain class but not where i need it :

If i apply manually the plain class it do what i need without modifying the existing css :

How could we get a solution on this problem ?

Thanks !

[obilodeau]

Asciidoctor places a lot of intermediary structuring elements (spans and divs). So far we have kept that. Maybe we should remove them. I'm not sure what the cons would be but the pros would be that applying the plain role would work. @mojavelinux thoughts?

But, focusing on the issue you have, a quicker solution would be for you to define a custom CSS that would have the same effect.

In your document header:

= Slidedeck
:customcss: slides.css

Then in slides.css:

.reveal section div.plain span img {
  border: 0;
  box-shadow: none;
}

If you use image blocks (image:: instead of image:) then copy the same css block but with span removed.

Personally, I never find image borders useful or pretty so I disable them globally with CSS.

[mojavelinux]

Asciidoctor places a lot of intermediary structuring elements (spans and divs). So far we have kept that. Maybe we should remove them. I'm not sure what the cons would be but the pros would be that applying the plain role would work. @mojavelinux thoughts?

You should definitely not feel obligated to mimic the HTML that the built-in HTML converter creates. In fact, quite the opposite. You should create HTML the best suits the medium (in this case, slides). And that's exactly what I'm doing in the Bespoke converter.

You still need to preserve the metadata hints from the source document, which sometimes requires more elements than you might use for, say, Markdown, but there's usually a smart way to do this without complicating the CSS selectors.

[ggrossetie]

I think it's a bit late to change the HTML produced. Probably quite a few users are using custom CSS that relies on these structuring elements.

We could roll-out a new semantic converter in a major version but that would require some work. I think we should close this issue and open a new issue to introduce a new semantic converter.

@antoine-morisseau What do you think? Can we close this issue?