R markdown: simplify creating tables of figures and text

Question

For R markdown Rmd web pages I want to generate tables containing in the first column thumbnail images (that link to a larger image or a web site) and descriptive text in the 2nd column. One example is the following image:

I know I can create this manually in raw HTML, but that is very fiddly and time-consuming. There must be some easier way.

On a different page, I tried a markdown / pandoc table, but that didn't work, and I reverted to manual coding of HTML

icon                                              | title
--------------------------------------------------+--------------------------
<img src="images/books/R-Graphics.jpg" height=50> |Paul Murrell, *R Graphics*, 2nd Ed.
<img src="images/books/R-graphics-cookbook.jpg" height=50> | Winston Chang, R Graphics Cookbook
<img src="images/books/lattice.png" height=50> | Deepayan Sarkar, *lattice*
<img src="images/books/ggplot2.jpg" height=50> | Hadley Wickham, *ggplot2*

Perhaps the htmltools package would be useful here, but I can't quite see how to use it in my Rmd files for this application.

Martin Schmelzer · Answer 1 · 2017-12-17T22:41:24.983

3

Probably forgot escaping quotes? This works fine for me:

---
title: "The Mighty Doge"
output: html_document
---

```{r}
library(knitr)
create_thumbnail <- function(file) {
  paste0("<a href=\"", file, "\"><img src=\"", file, "\" style=\"width: 50px;\"/></a>")
}
df <- data.frame(Image       = rep("unnamed.png", 5), 
                 Description = rep("Doge", 5))

df$Image <- create_thumbnail(df$Image)
kable(df)
```

edited Dec 17 '17 at 22:41

answered Dec 17 '17 at 22:33

Martin Schmelzer

23,283
6
73
98

That is helpful. I hadn't tried a `data.frame` & `kable`. Of course, then the challenge becomes getting the information for my examples into a data.frame – user101089 Dec 17 '17 at 22:40
I am facing similar difficulties when knitting to PDF (simple table with text and images, no thumbnails involved). Please see my related post here: https://stackoverflow.com/questions/58204272/r-markdown-how-to-create-a-table-with-images-and-text-which-should-be-knitted-a Any help is greatly appreciated – mavericks Oct 02 '19 at 15:21

score 0 · Answer 2 · answered Dec 18 '17 at 15:31

Here is an approach that uses htmltools and seems much more flexible, in that I can control the details somewhat more easily.

I'm not familiar with bootstrap <div> constructs, so I used HTML table constructs. I had to define functions for tr(), td() etc.

```{r html-setup, echo=FALSE}
library(htmltools)
# table tags
tab <- function (...)
tags$table(...)

td <- function (...) 
    tags$td(...)
tr <- function (...) 
    tags$tr(...)

# an <a> tag with href as the text to be displayed
aself <- function (href, ...)
    a(href, href=href, ...)

```

Then functions to construct my table entries the way I wanted:

```{r table-functions, echo=FALSE}
# thumnail figure with href in a table column
tabfig <- function(name, img, href, width) {
        td(
      a(class = "thumbnail", title = name, href = href,
        img(src = img, width=width)
       )
    )
}
tabtxt <- function(text, ...) {
        td(text, ...)
}
```

Finally, use them to input the entries:

## Blogs

```{r do-blogs, echo=FALSE}
width="160px"
tab(
  tr(
    tabfig("FlowingData", "images/blogs/flowingdata.png", "http://flowingdata.com/", width=width),
    tabtxt("Nathan Yau,", aself("flowingdata.com/"),
           "A large number of blog posts illustrating data visualization methods with tutorials on how do do these with R and other software.")
    ),

  tr(
    tabfig("Junk Charts", "images/blogs/junkcharts.png", "http://junkcharts.typepad.com/", width=width),
    tabtxt("Kaiser Fung,", aself("http://junkcharts.typepad.com/"),
           "Fung discusses a variety of data displays and how they can be improved.")
    ),

  tr(
    tabfig("Data Stories", "images/blogs/datastories.png", "http://datastori.es/", width=width),
    tabtxt("A podcast on data visualization with Enrico Bertini and Moritz Stefaner,",
           aself("http://datastori.es/"), 
           "Interviews with over 100 graphic designers & developers.")
    )
)
```

I still need to tweak the padding, but this gives me more or less what I was after:

R markdown: simplify creating tables of figures and text

2 Answers2