How to arrange hyperlinked images in Rmarkdown?

Question

I'm trying to make a little HTML file using Rmarkdown. I'm using HTML to set the images into the blocks.

Here is what I currently have.

But my desired goal is do something like this. Where I have two images per block.

I'm not sure if HTML is the best way to do this but I am open to using knitr

Here is my code

---
title: "Landing Page"
output: 
  flexdashboard::flex_dashboard: 
    orientation: columns
    vertical_layout: fill
    runtime: shiny 

---
```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
```


<div style="text-align:center;">
<div style="display:inline-block;">
<div class="wp-block-image" style="display:inline-block;">
<center>
<figure class="aligncenter size-full">
<a href="https://www.idashboards.com/wp-content/uploads/2020/06/IT-Service-Desk.png" target="_blank" rel="noopener">
<img loading="lazy" width="517" height="261" src="https://www.idashboards.com/wp-content/uploads/2020/06/IT-Service-Desk.png" alt="" class="wp-image-5379">
</a>
<br>
<figcaption>
<b><u><font size="+2">
<a href="https://www.idashboards.com/wp-content/uploads/2020/06/IT-Service-Desk.png">Dashboard Example 1</a>
</font size>
</b></u>
</figcaption>
</figure>
</center>
</div>
</div>

score 0 · Answer 1 · answered Sep 09 '21 at 10:20

Adopted from this answer, you can put images in a kable:

---
title: "Fun with flags"
output: html_document
---

```{r results='asis'}    
image_stringer = function(abbr){
  sprintf('![](http://flagpedia.net/data/flags/mini/%s.png)', abbr)
}
dat <- data.frame(
  col1 = c(image_stringer('nl'), image_stringer('de')),
  col2 = c(image_stringer('ch'), image_stringer('be'))
)
library(knitr)
kable(dat,  col.names=NULL)
```

Alternatively, you can put your image in a <table> format (for an example, just inspect the output of the kable block), which gives wider control over formatting.

How to arrange hyperlinked images in Rmarkdown?

1 Answers1