4

This is my first post to SO and I'm hoping my question is specific enough.

I have written a blog post using servr::jekyll() [Thanks, Yihui], but the images don't size up correctly on the blog post - they are enormous! When I don't specify the image size, the images show up a little blurry on the post. I've been using this code in my setup chunk of the post:

knitr::opts_chunk$set(
    echo    = TRUE,
    warning = FALSE,
    error   = FALSE,
    message = FALSE,
    device  = 'png',
    fig.width = 6,
    fig.height = 6,
    dpi = 300
)

The blog post is here and the repository is here.

So what I want is the images to be the same width as the text, and to have good resolution. Any help is very much appreciated!

Please let me know if you require more information.

Yihui Xie
  • 28,913
  • 23
  • 193
  • 419
Nick Tierney
  • 192
  • 1
  • 8

1 Answers1

2

To make the images of the same width as the text, you may add a max-with constraint to img in CSS, e.g.

img {
  max-width: 100%;
}

If you really desire resolution, you may consider vector graphics, e.g. use the svg device instead of png (or consider the svglite device in the svglite package).

Yihui Xie
  • 28,913
  • 23
  • 193
  • 419
  • Thank you for your response! I updated the [css in poole.css](https://github.com/tierneyn/tierneyn.github.io/blob/master/public/css/poole.css) and this has made the image resize appropriately. – Nick Tierney Nov 13 '15 at 04:57
  • As a note about svglite - I have not had luck getting it to work, but `svg` works fine. You can see svglite broken images in the post [here](http://www.njtierney.com/r/missing%20data/2015/11/12/ggplot-missing-data/), source code [here](https://github.com/tierneyn/tierneyn.github.io/blob/master/_source/2015-11-12-ggplot-missing-data.Rmd). I was following advice from [this tweet](https://twitter.com/hrbrmstr/status/662708164597563392), but adding ".svg" seems to add an extra "." in the image path. Apologies if this is offtopic. – Nick Tierney Nov 13 '15 at 05:19
  • 1
    Since svglite is not on CRAN yet, I have not considered supporting it in knitr, but I can certainly fix this issue before the CRAN release of svglite. You may file an issue to https://github.com/yihui/knitr/issues so I won't forget it. Thanks! – Yihui Xie Nov 13 '15 at 06:01
  • OK awesome. New to all this, so hopefull [this](https://github.com/yihui/knitr/issues/1129) is ok? Thanks so much! – Nick Tierney Nov 13 '15 at 06:50
  • Yes, that is perfect. Thanks! – Yihui Xie Nov 14 '15 at 04:52
  • how to we implement this svglite approach? I tried adding: ``library(svglite) knitr::opts_chunk$set( dev = "svglite", fig.ext = ".svg" )`` to each chunk but it didnt make a difference! – Cyrus Mohammadian Aug 12 '16 at 21:36