Hello all,
I’d like to discuss with you different proposal regarding the representation of the image styles in XWiki Syntax, and in particular when taking into account the figures.
As a reminder, an image style is a way to provide uniform styling across the images of a wiki by assigning them css classes.
Lat’s start with a simple example, [[image:Sandbox.WebHome@XWikiLogo.png||class="mystyle"]]
produces the following html:
<img src="/xwiki/bin/download/Sandbox/WebHome/XWikiLogo.png?rev=1.1"
class="mystyle wikigeneratedid"
id="ISandbox.WebHome40XWikiLogo.png-4"
alt="XWikiLogo.png">
Then, we can define images with captions. For instance [[XWikiLogo>>image:Sandbox.WebHome@XWikiLogo.png||class="mystyle"]]
produces the following html:
<figure class="image">
<img src="/xwiki/bin/download/Sandbox/WebHome/XWikiLogo.png?rev=1.1"
class="mystyle wikigeneratedid"
id="ISandbox.WebHome40XWikiLogo.png-4"
alt="XWikiLogo.png">
<figcaption><p>XWikiLogo</p></figcaption>
</figure>
In this example, myclass
is only attached to the classes of the img
tag, but the figure
tag is not “styled” with a class.
The problem is that, it is important to be able to also select the figures of a given style when defining the css.
To give a concrete example, let say that we want all the image to be surrounded by a border, and we want this border to wrap the caption too when it exists.
This is not possible without attaching a class to the figure
tag.
Proposal 1
Explicitly add a css class on the figure:
(% class="mystyle-figure" %)
[[XWikiLogo>>image:Sandbox.WebHome@XWikiLogo.png||class="mystyle"]]
And the corresponding html:
<figure class="mystyle-figure image">
<img src="/xwiki/bin/download/Sandbox/WebHome/XWikiLogo.png?rev=1.1"
class="mystyle wikigeneratedid"
id="ISandbox.WebHome40XWikiLogo.png-4"
alt="XWikiLogo.png">
<figcaption><p>XWikiLogo</p></figcaption>
</figure>
- Proposal 1.1: same css class as the image (e.g.,
myfigure
) - Proposal 1.2: same css class as the image, but with a suffix (e.g.,
myfigure-figure
) - Proposal 1.3; another css class that can be configured through the image style UI
Proposal 2
Add a new parameter in the links syntax to attach a css class to the figure, for instance:
[[XWikiLogo>>image:Sandbox.WebHome@XWikiLogo.png||class="mystyle" figure-class="mystyle-figure"]]
(producing the same html as Proposal 1).
Proposal 3
Reuse the css class attached to the image and attach them to the figure too, in this case [[XWikiLogo>>image:Sandbox.WebHome@XWikiLogo.png||class="mystyle"]]
would produce.
<figure class="mystyle image">
<img src="/xwiki/bin/download/Sandbox/WebHome/XWikiLogo.png?rev=1.1"
class="mystyle wikigeneratedid"
id="ISandbox.WebHome40XWikiLogo.png-4"
alt="XWikiLogo.png">
<figcaption><p>XWikiLogo</p></figcaption>
</figure>
Conclusion
I have small preference for Proposal 1 as I feel like it is the less “magic” of the 3 options, and also the one that does not require changes in rendering.
The main cons of Proposal 1 is that the class is duplicated.
I did not find scenarios where using different classes for the figure and the img was important, except for clarity.
WDYT?
PS: I have other questions to discuss regarding how to represent variation points allowed by the image style (e.g., image with a border, or with a specific alignment). But I’d like to have answer for that first.