investigate the possibility of styling markdown images
Our lektor-based webpages have their canonical address (for example: https://support.torproject.org/ ) but they can be redeployed on other addresses.
This is an interesting feature when we think about censorship circumvention. For example, maybe our website is blocked, but if our documentation is built in gitlab pages as well, the censor will also have to block gitlab.
We also use this feature to deploy our websites on the https://review.torproject.net/tpo/web/ service, where we can review merge requests and see if the break the website, before merging.
But if we add images, for example, as /static/images/whatever.png, and link to them with an absolute link, i.e. '/static/images/whatever.png', this alternative versions of our website will not work anymore.
That is why we should always add a relative link when writing content.
But what about images?
How can we add images and be sure that they are relative in the code?
Adding with markdown
This is the preferred way.
If we add images in lektor with ![alt text](/static/image/whatever.png)
, lektor will convert that link into a relative link, and it will also adapt it when needed for localization (the translations from the main page, /, are in subdomains like /es/ or /fr/).
The problem with this solution is that it does not allow for styling of the images.
So, to allow contributors to use markdown while adding style to the images (a most prominent style was width=100%), we can use a technique like the one expressed on this website:
With this system, you could add an image for example with:
![alt](/static/image/whatever.png#fullwidth)
and have fullwidth to be a class on our CSS style sheet.
The trick is to define a style in the CSS using the selector *=
, and the src attribute that standard Markdown supports:
img[src*="#fullwidth"] {
width:150px;
height:100px;
}