Resizing images in docs

#1

Is there a way to control the image size of images in documentation made with Documenter?

I created this Map projections example but the images are too big. Found this page about styling images with Markdown but none of its recipes work.

0 Likes

#2

One possible approach would be to play with the CSS maybe.

You can add a custom CSS file in your assets/ folder and mention it in the make.jl file using assets=[“assets/custom.css”]

Using something like

img { 
width: 75%;
}

(Note that with this approach, all images are scaled which may not be what you want)

0 Likes

#3

We use CSS in PGFPlotsX:

1 Like

#4

This also works:

```@raw html
<img src="path/to/image.png" width="25%"/>
``` ⠀
2 Likes

#5

But I have tried that solution too (see the line above) this one. It has

```@raw html
<img src="figures/mapproj/GMT_albers.png" alt="" title="Albers equal-area conic map projection" width="150" height="100"/>

and nothing shows up.

Regarding the CSS. Do I need to have an assets directory to put the .css in it? (because I don’t have one)

0 Likes

#6

You can create one.

0 Likes

#7

Just did. Added a custom.css with

img { 
width: 75%;
}

… and nothing changed.

0 Likes

#8

You also have to use it, eg

You can use a browser to debug this. Eg in Firefox, Ctrl-U can be used to view the page source (to see if the relevant CSS was included), and Q to inspect styling.

0 Likes

#9

Well, that line is supposed to work, and it works for me in Documenter. Are you by any chance using an old version of Documenter? Or something must differ in your setup.

0 Likes

#10

Ah, I was wondering if something like that was not necessary. Thanks.

0 Likes

#11

Found it. It’s a path issue. While for the normal way the path is set like this

!["GMT_Albers"](figures/mapproj/GMT_albers.png)

when using the raw html I have to set the path like this (and then it works)

```@raw html
<img src="../figures/mapproj/GMT_albers.png" alt="" title="Albers equal-area conic map projection" width="150" height="100"/>
1 Like

#12

See https://github.com/JuliaDocs/Documenter.jl/issues/921

2 Likes

#13

Yes, not it works locally but not on host. So, I’m back to beginning.

0 Likes

#14

Sorry, looks like I spoke too soon but this is very confusing too. When I look at the hosted file the images that I changed the syntax to raw are gone. But when I point to the gh branch, which is what users are looking at, I see that the images are scaled correctly. How come?

0 Likes

#15

See this comment: https://github.com/JuliaDocs/Documenter.jl/issues/921#issuecomment-451032658

0 Likes

#16

I did see. What I don’t understand is that both of the links (1-no work and 2-work) I provided in my previous post live in Github, one displays the images while the the other doesn’t.

0 Likes

#17

Yea, this is exactly what Morten’s comment I linked explain.

0 Likes

#18

Yes, but the comment talks about hosted vs local builds whilst in the case I’m pointing they are both hosted. But I think I get the idea why it also fails in one of the hosted case.

0 Likes

#19

No, the hosted docs are located at the gh-pages branch as html files.

0 Likes

#20

To end up this issue and for future memory. After the resizing I also wanted to have the images centered. Another struggle but ended up with this solution:

  • Add this to custom.css
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
  • Add a class="center" to the @raw html like in
```@raw html
<img src="../figures/mapproj/GMT_cassini.png" alt="GMT_cassini" width="400" class="center"/>
0 Likes