I would like to make the image smaller using width and heigth. But when I change this, the images place is complete different while specifying top right with top and right. Here is a reproducible example without change size:
---
title: "test"
format: revealjs
editor: visual
---
## Slide
When you click the **Render** button a document will be generated that includes:
- Content authored with markdown
- Output from executable code
- Another point
![](R_logo.svg.png){.absolute top=0 right=0}
Output:
And with changing size:
---
title: "test"
format: revealjs
editor: visual
---
## Slide
When you click the **Render** button a document will be generated that includes:
- Content authored with markdown
- Output from executable code
- Another point
![](R_logo.svg.png){.absolute top=0 right=0 width = "100" height = "100"}
Output:
As you can see the image is now at the bottom which is not what I want. So I was wondering if anyone knows how to fix this?
When specifying style using key=val inline, do not put space before and after the equal sign (=),
![](Rlogo_svg.png){.absolute top=0 right=0 width=100 height=100}
Related
I am learning R markdown and currently trying to add an image as per this excellent site https://www.earthdatascience.org/courses/earth-analytics/document-your-science/add-images-to-rmarkdown-report/
I have saved the example dog image but am having problems importing it into the simplest R markdown file. I have tried several ways (not just the way described on the site). I use knitr in Rstudio.
The first way that doesnt work is this where I give the subfolder under my working directory (I have also tried it without the slash before "images" and by giving the full path name).
---
title: "myImage"
output: html_document
---
This is a markdown to display an image
![an image caption Source: Ultimate Funny Dog Videos Compilation 2013.](/images/silly-dog.png)
I have also tried this but this doesnt work either
---
title: "myImage"
output: html_document
---
This is a markdown to display an image
```{r}
knitr::include_graphics("C:/Users/myname/Documents/Programs//R/images/silly-dog.png")
```
In both cases R says it can't find the image file "File /images/silly-dog.png not found in resource path" (but it is there - in the images subfolder)
many thanks for any tips
my apologies I have found the problem and it is a silly one.
When I right clicked on my image in the folder and copied the path I discovered the file was actually called silly-dog.png.jpg
this now works
![an image caption Source: Ultimate Funny Dog Videos Compilation 2013.](/Users/berna/Documents/Programs/R/images/silly-dog.png.jpg)
sorry to have taken your time
I am considering making my presentations using markdown in RStudio rather than beamer. In beamer I often use incremental appearance of the content, with the option "highly dynamic", which makes the next item to appear show in light gray before appearing fully. Apart from looking nice, this helps me present as it prevents me from being surprised if I forget the next point on the slide.
My question is: Is there any way to achieve a similar effect if I make my slides in RStudio, for instance as an R presentation, or rmarkdown presentation using ioslides, or Slidy?
I am aware that I can set incremental: true in R presentations, but this only gives incremental appearance, not the "highly dynamic" effect.
There are several different ways to produce slides in RMarkdown: ioslides, slidy, revealjs, xaringan, etc. I tend to use ioslides, and this method works there. I have added a couple of other
variations below.
What you need to do is to change the CSS for the selector .build .to-build so that instead of making items transparent, it only makes them partially transparent. You can do this by creating a file containing this:
.build .to-build {
opacity: 0.1
}
If you call that file incremental.css, then in your YAML for the presentation, you have this:
output:
ioslides_presentation:
incremental: true
css: incremental.css
Then you will see something like this when you display the sample presentation after showing the first bullet:
Edited to add:
Here's the CSS to use if you're using slidy_presentation instead of ioslides_presentation:
body.single_slide .invisible {
opacity: 0.1;
visibility: visible;
}
And here's what to use for revealjs::revealjs_presentation:
.reveal .slides section .fragment {
opacity: 0.1;
visibility: visible;
}
You can probably put all three recipes into the incremental.css file, and then switch between the formats until you find which one you like best.
If you are making beamer presentations from Rmarkdown, this works:
---
output:
beamer_presentation:
incremental: true
header-includes:
- \setbeamercovered{highly dynamic}
---
- one
- two
- three
I was trying to make some slides through reveal.js and Rmarkdown in RStudio. I run into a problem with vertical slides. Whenever I set the next slide with "###", the next slide would be embedded into the last slide. What's the right syntax to set the next slide as a vertical slide (downward)?
---
title: "Slide"
output:
revealjs::revealjs_presentation:
center: true
---
## R Markdown
This is an R Markdown presentation. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.
When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document.
### Slide with Bullets
- Bullet 1
- Bullet 2
- Bullet 3
Just use one hash less. Documented here.
---
title: "Slide"
output:
revealjs::revealjs_presentation:
center: true
---
# R Markdown
This is an R Markdown presentation. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.
When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document.
## Slide with Bullets
- Bullet 1
- Bullet 2
- Bullet 3
I need some help!!!!!
I have following legend in a line graph in Matlab:
--- Esme
--- Manta
--- Senchu
with their respectives lines --- , but I want to have a extra text in the top of the legend like:
SOURCES
--- Esme
--- Manta
--- Senchu
How can I add such text?
Thank you very much!!!
If you are using a MATLAB version prior to 2014b, you can use the method detailed here:
hLeg = legend('Esme','Manta','Senchu'); %// Create the legend and get a handle to it.
hTitle = get(hLeg,'Title'); %// Get a handle to the legend's Title.
set(hTitle,'String','SOURCES'); %// Set the desired title.
For newer versions of MATLAB (or handle graphics, to be precise) the above is no longer an option (as mentioned here), in which case you can use this File Exchange submission to get the desired result. This method works by obtaining the Position of the legend, creating an axes at the same coordinates and then set its Title to something.
Please also refer to this UndocumentedMatlab post which discusses your exact question.
I have a local image that I would like to include in an .Rmd file which I will then knit and convert to HTML slides with Pandoc. Per this post, this will insert the local image :
![Image Title](path/to/your/image)
Is there a way to modify this code to also set the image size?
The question is old, but still receives a lot of attention. As the existing answers are outdated, here a more up-to-date solution:
Resizing local images
As of knitr 1.12, there is the function include_graphics. From ?include_graphics (emphasis mine):
The major advantage of using this function is that it is portable in the sense that it works for all document formats that knitr supports, so you do not need to think if you have to use, for example, LaTeX or Markdown syntax, to embed an external image. Chunk options related to graphics output that work for normal R plots also work for these images, such as out.width and out.height.
Example:
```{r, out.width = "400px"}
knitr::include_graphics("path/to/image.png")
```
Advantages:
Over agastudy's answer: No need for external libraries or for re-rastering the image.
Over Shruti Kapoor's answer: No need to manually write HTML. Besides, the image is included in the self-contained version of the file.
Including generated images
To compose the path to a plot that is generated in a chunk (but not included), the chunk options opts_current$get("fig.path") (path to figure directory) as well as opts_current$get("label") (label of current chunk) may be useful. The following example uses fig.path to include the second of two images which were generated (but not displayed) in the first chunk:
```{r generate_figures, fig.show = "hide"}
library(knitr)
plot(1:10, col = "green")
plot(1:10, col = "red")
```
```{r}
include_graphics(sprintf("%sgenerate_figures-2.png", opts_current$get("fig.path")))
```
The general pattern of figure paths is [fig.path]/[chunklabel]-[i].[ext], where chunklabel is the label of the chunk where the plot has been generated, i is the plot index (within this chunk) and ext is the file extension (by default png in RMarkdown documents).
Un updated answer: in knitr 1.17 you can simply use
![Image Title](path/to/your/image){width=250px}
edit as per comment from #jsb
Note this works only without spaces, e.g. {width=250px} not {width = 250px}
You can also read the image using png package for example and plot it like a regular plot using grid.raster from the grid package.
```{r fig.width=1, fig.height=10,echo=FALSE}
library(png)
library(grid)
img <- readPNG("path/to/your/image")
grid.raster(img)
```
With this method you have full control of the size of you image.
Here's some options that keep the file self-contained without retastering the image:
Wrap the image in div tags
<div style="width:300px; height:200px">
![Image](path/to/image)
</div>
Use a stylesheet
test.Rmd
---
title: test
output: html_document
css: test.css
---
## Page with an image {#myImagePage}
![Image](path/to/image)
test.css
#myImagePage img {
width: 400px;
height: 200px;
}
If you have more than one image you might need to use the nth-child pseudo-selector for this second option.
If you are converting to HTML, you can set the size of the image using HTML syntax using:
<img src="path/to/image" height="400px" width="300px" />
or whatever height and width you would want to give.
Had the same issue today and found another option with knitr 1.16 when knitting to PDF (which requires that you have pandoc installed):
![Image Title](path/to/your/image){width=70%}
This method may require that you do a bit of trial and error to find the size that works for you. It is especially convenient because it makes putting two images side by side a prettier process. For example:
![Image 1](path/to/image1){width=70%}![Image 2](path/to/image2){width=30%}
You can get creative and stack a couple of these side by side and size them as you see fit. See https://rpubs.com/RatherBit/90926 for more ideas and examples.
Another option that worked for me is playing with the dpi option of knitr::include_graphics() like this:
```{r}
knitr::include_graphics("path/to/image.png", dpi = 100)
```
... which sure (unless you do the math) is trial and error compared to defining dimensions in the chunk, but maybe it will help somebody.
The knitr::include_graphics solution worked well for resizing the figures, but I was unable to figure out how to use it to produce side-by-side resized figures. I found this post useful for doing so.