# Resizing images in docs

**URL:** <https://discourse.julialang.org/t/resizing-images-in-docs/21721>\
**Category:** General Usage\
**Created:** [March 11, 2019, 1:44am UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721 "2019-03-11T01:44:18Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![joa-quim](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/joa-quim/32/227_2.png) [@joa-quim](https://discourse.julialang.org/u/joa-quim)\
**Post date:** [March 11, 2019, 1:44am UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/1 "2019-03-11T01:44:19Z")

</div>

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

I created this [Map projections](http://www.generic-mapping-tools.org/GMT.jl/latest/proj_examples/) example but the images are too big. Found this [page](https://www.xaprb.com/blog/how-to-style-images-with-markdown/) about styling images with Markdown but none of its recipes work.

---

<div class="post-metadata">

**Author:** ![tlienart](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tlienart/32/7640_2.png) [@tlienart](https://discourse.julialang.org/u/tlienart)\
**Post date:** [March 11, 2019, 7:27am UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/2 "2019-03-11T07:27:43Z")

</div>

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

```julia
img { 
width: 75%;
}

```

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

---

<div class="post-metadata">

**Author:** ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)\
**Post date:** [March 11, 2019, 7:57am UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/3 "2019-03-11T07:57:36Z")

</div>

We use CSS in PGFPlotsX:

> <https://github.com/KristofferC/PGFPlotsX.jl/blob/master/docs/src/assets/custom.css>

---

<div class="post-metadata">

**Author:** ![bennedich](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/bennedich/32/4894_2.png) [@bennedich](https://discourse.julialang.org/u/bennedich)\
**Post date:** [March 11, 2019, 8:21am UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/4 "2019-03-11T08:21:32Z")

</div>

This also works:

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

````

---

<div class="post-metadata">

**Author:** ![joa-quim](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/joa-quim/32/227_2.png) [@joa-quim](https://discourse.julialang.org/u/joa-quim)\
**Post date:** [March 11, 2019, 11:57am UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/5 "2019-03-11T11:57:30Z")

</div>

> [@bennedich](#):
>
> `@raw html &lt;img src="path/to/image.png" width="25%"/&gt; ` ⠀

But I have tried that solution too (see the line [above](https://github.com/GenericMappingTools/GMT.jl/blob/master/docs/src/proj_examples.md#equidistant-conic)) this one. It has

````julia
```@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)

---

<div class="post-metadata">

**Author:** ![kristoffer.carlsson](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/kristoffer.carlsson/32/22_2.png) [@kristoffer.carlsson](https://discourse.julialang.org/u/kristoffer.carlsson)\
**Post date:** [March 11, 2019, 12:00pm UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/6 "2019-03-11T12:00:34Z")

</div>

> [@joa-quim](#):
>
> Regarding the CSS. Do I need to have an `assets` directory to put the .css in it? (because I don’t have one)

You can create one.

---

<div class="post-metadata">

**Author:** ![joa-quim](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/joa-quim/32/227_2.png) [@joa-quim](https://discourse.julialang.org/u/joa-quim)\
**Post date:** [March 11, 2019, 12:02pm UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/7 "2019-03-11T12:02:12Z")

</div>

Just did. Added a `custom.css` with

```julia
img { 
width: 75%;
}

```

… and nothing changed.

---

<div class="post-metadata">

**Author:** ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)\
**Post date:** [March 11, 2019, 12:07pm UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/8 "2019-03-11T12:07:46Z")

</div>

> [@joa-quim](#):
>
> … and nothing changed.

You also have to use it, eg

> <https://github.com/KristofferC/PGFPlotsX.jl/blob/ab0e01bceb3026d645960b87f0ab1967b1a13ea6/docs/make.jl#L12>

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.

---

<div class="post-metadata">

**Author:** ![bennedich](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/bennedich/32/4894_2.png) [@bennedich](https://discourse.julialang.org/u/bennedich)\
**Post date:** [March 11, 2019, 12:44pm UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/9 "2019-03-11T12:44:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![joa-quim](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/joa-quim/32/227_2.png) [@joa-quim](https://discourse.julialang.org/u/joa-quim)\
**Post date:** [March 11, 2019, 1:45pm UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/10 "2019-03-11T13:45:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![joa-quim](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/joa-quim/32/227_2.png) [@joa-quim](https://discourse.julialang.org/u/joa-quim)\
**Post date:** [March 11, 2019, 1:48pm UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/11 "2019-03-11T13:48:11Z")

</div>

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

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

```

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

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

````

```julia

```

---

<div class="post-metadata">

**Author:** ![fredrikekre](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fredrikekre/32/1688_2.png) [@fredrikekre](https://discourse.julialang.org/u/fredrikekre)\
**Post date:** [March 11, 2019, 2:29pm UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/12 "2019-03-11T14:29:34Z")

</div>

> [@joa-quim](#):
>
> when using the raw html I have to set the path like this (and then it works)

See [Displaying images via raw html is broken for hosted but not local docs · Issue #921 · JuliaDocs/Documenter.jl · GitHub](https://github.com/JuliaDocs/Documenter.jl/issues/921)

---

<div class="post-metadata">

**Author:** ![joa-quim](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/joa-quim/32/227_2.png) [@joa-quim](https://discourse.julialang.org/u/joa-quim)\
**Post date:** [March 11, 2019, 3:02pm UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/13 "2019-03-11T15:02:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![joa-quim](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/joa-quim/32/227_2.png) [@joa-quim](https://discourse.julialang.org/u/joa-quim)\
**Post date:** [March 11, 2019, 3:21pm UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/14 "2019-03-11T15:21:00Z")

</div>

Sorry, looks like I spoke too soon but this is very confusing too. When I look at the [hosted file](https://github.com/GenericMappingTools/GMT.jl/blob/master/docs/src/proj_examples.md) 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](http://www.generic-mapping-tools.org/GMT.jl/latest/proj_examples/) are scaled correctly. How come?

---

<div class="post-metadata">

**Author:** ![fredrikekre](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fredrikekre/32/1688_2.png) [@fredrikekre](https://discourse.julialang.org/u/fredrikekre)\
**Post date:** [March 11, 2019, 3:23pm UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/15 "2019-03-11T15:23:20Z")

</div>

> [@joa-quim](#):
>
> How come?

See this comment: [Displaying images via raw html is broken for hosted but not local docs · Issue #921 · JuliaDocs/Documenter.jl · GitHub](https://github.com/JuliaDocs/Documenter.jl/issues/921#issuecomment-451032658)

---

<div class="post-metadata">

**Author:** ![joa-quim](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/joa-quim/32/227_2.png) [@joa-quim](https://discourse.julialang.org/u/joa-quim)\
**Post date:** [March 11, 2019, 3:28pm UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/16 "2019-03-11T15:28:39Z")

</div>

I did see. What I don’t understand is that both of the links ([1-no work](https://github.com/GenericMappingTools/GMT.jl/blob/master/docs/src/proj_examples.md) and [2-work](http://www.generic-mapping-tools.org/GMT.jl/latest/proj_examples/)) I provided in my previous post live in Github, one displays the images while the the other doesn’t.

---

<div class="post-metadata">

**Author:** ![fredrikekre](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fredrikekre/32/1688_2.png) [@fredrikekre](https://discourse.julialang.org/u/fredrikekre)\
**Post date:** [March 11, 2019, 3:34pm UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/17 "2019-03-11T15:34:12Z")

</div>

> [@joa-quim](#):
>
> What I don’t understand is that both of the links ([1-no work](https://github.com/GenericMappingTools/GMT.jl/blob/master/docs/src/proj_examples.md) and [2-work](http://www.generic-mapping-tools.org/GMT.jl/latest/proj_examples/)) I provided in my previous post live in Github, one displays the images while the the other doesn’t.

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

---

<div class="post-metadata">

**Author:** ![joa-quim](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/joa-quim/32/227_2.png) [@joa-quim](https://discourse.julialang.org/u/joa-quim)\
**Post date:** [March 11, 2019, 3:48pm UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/18 "2019-03-11T15:48:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![fredrikekre](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fredrikekre/32/1688_2.png) [@fredrikekre](https://discourse.julialang.org/u/fredrikekre)\
**Post date:** [March 11, 2019, 4:09pm UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/19 "2019-03-11T16:09:19Z")

</div>

> [@joa-quim](#):
>
> they are both hoste

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

---

<div class="post-metadata">

**Author:** ![joa-quim](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/joa-quim/32/227_2.png) [@joa-quim](https://discourse.julialang.org/u/joa-quim)\
**Post date:** [March 11, 2019, 7:23pm UTC](https://discourse.julialang.org/t/resizing-images-in-docs/21721/20 "2019-03-11T19:23:55Z")

</div>

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`

```julia
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

```

- Add a `class="center"` to the `@raw html` like in

````julia
```@raw html
<img src="../figures/mapproj/GMT_cassini.png" alt="GMT_cassini" width="400" class="center"/>

````

```julia

```