3

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:

example 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.

Improve this question

2 Answers 2

Reset to default
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) ```

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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
I am facing similar difficulties when knitting to PDF (simple table with text and images, no thumbnails involved). Please see my related post here: stackoverflow.com/questions/58204272/… Any help is greatly appreciated
0

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:

enter image description here

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.