Scaling figures

[snirgaz]

Is it possible to "scale" SVG figures?
It would be nice to extend \fig to allow for scaling centering etc.

Thanks!

[tlienart]

Right so I guess the easiest way is to just use CSS for this.

Easy way

In the Markdown

@@im-50
![](/assets/rndimg.jpg)
@@

In the CSS:

.im-50 {text-align: center;}
.im-50 img {
    padding: 0;
    width: 50%;
}

(padding 0 is because you might already have some padding set if you're using one of the default CSS templates)

More complex way

As a partial step towards #62 where you may wish for a latex like:

\begin{figure}
\includegraphics[.5\textwidth]{/assets/rndimg.jpg}
\caption{The caption}
\end{figure}

You could put the following (or a version) in the config:

\newcommand{\figenv}[3]{
~~~
<figure style="text-align:center;">
<img src="!#2" style="padding:0;#3" alt="#1"/>
<figcaption>#1</figcaption>
</figure>
~~~
}

(note the !# is to avoid the insertion of extra whitespaces, this is usually good for paths, not necessary here but good practice if you use latex-like commands for paths in franklin, see the docs on commands).

and you can use this as

\figenv{the caption}{/assets/rndimg.jpg}{width:50%;border: 1px solid red;}

I'm hoping this is reasonably self-explanatory 😄

[tlienart]

PS: of course this works with SVG too, try

\figenv{the caption}{https://upload.wikimedia.org/wikipedia/commons/6/67/Firefox_Logo%2C_2017.svg}{width:50%;border: 1px solid red;}

[snirgaz]

Excellent! Thanks!
The only thing I am missing is LaTeX like labeling (with automatic enumeration).
Your package is amazing BTW!

[tlienart]

Thanks for the positive feedback 😄

Re labeling, there is \label which gives you the possibility to put an anchor. Try this on your page

Some place you will want to point to later \label{anchor name}.

(...)

Here you want to point to ![earlier](#anchor_name).

Actually automatic numbering of (I'm assuming) figures is also possible; you can just imitate how it's done for KaTeX; consider the following CSS for KaTeX numbering:

body { counter-reset: eqnum; }

.katex-display::after {
    counter-increment: eqnum;
    content: "(" counter(eqnum) ")";
    position: relative;
    float: right;
    padding-right: 5px; }

So basically here it starts a counter eqnum and every time it sees an equation it increments it, the rest is just the placement of the counter.

In your case you'd want to add a fignum and every time it sees a figure, it increments it, and then some placement of that counter in figure objects (or possibly figure caption). I actually believe you can even do the latex-like dependent numbering where you get a 1.1, 1.2 then 2.1, 2.2 with this technique. But that may be a bit overkill for a single webpage :-) IMO webpages should not be that long 🤷‍♂

[zlatanvasovic]

Figure from PkgPage allows style, so just implement it?

[tlienart]

I'm more willing to show people how to write commands than maintain a large set of such commands bc people might want to have customised figure environments (e.g. with specific classes depending on the framework etc). So IMO the action point here is to just add these examples as docs

Note: in some future there could be a "FranklinBootrap.jl" which contains specific commands for all the major environments that bootstrap provides and, similarly, you could have "FranklinBulma" and what have you. (this is basically what we did in PkgPage for a restricted set of stuff from bootstrap)

[VLucet]

@tlienart In that case I think it would be helpful to add your post above about figure styling to the docs (from a beginner point of view it took me a long while to find this info or to think about how custom latex command would be useful). I would suggest adding it here or maybe in Tips and Tricks. Would love to contribute but still learning how all of this work.

PS: Awesome package, I especially love how all this integrate with Literate.jl

[tlienart]

@VLucet thanks and yes good suggestion! you could try to edit the file in a PR and I'll gladly help you figure out the smaller details, otherwise yes I'll add a docs label to this issue 😄 it could be a demo too.

[VLucet]

Opened a PR, unsure about the proper headers for code blocks (unsure whether something like ```CSS is warranted and would work.

[tlienart]

I'm closing this since the PR is great and gathers all the elements.