0

I'm trying to add web images cropped using {cropcircle} to a reactable table. I've found the method for adding images straight from the web, and an example to graph the edited images with ggplot, but nothing for embedding them in a table. Any help would be greatly appreciated!

Needed libraries

library(ggplot2)
library(dplyr)
library(cropcircles)
library(tibble)
library(magick)
library(ggimage)
library(reactable)

Loading images & creating dataframe

images <- c(
"https://openpsychometrics.org/tests/characters/test-resources/pics/BB/1.jpg",
"https://openpsychometrics.org/tests/characters/test-resources/pics/BB/3.jpg",
"https://openpsychometrics.org/tests/characters/test-resources/pics/BB/9.jpg",
"https://openpsychometrics.org/tests/characters/test-resources/pics/BB/8.jpg")

df <- tibble(y = 1:4, images = images) |>
mutate(images_cropped = circle_crop(images)) # where the magic happens

Graphing Images works

df |>
ggplot() +
geom_image(aes(1.5, y, image = images), size = 0.15) +
geom_image(aes(3.5, y, image = images_cropped), size = 0.15) +
xlim(0, 5) +
ylim(0, 5) +
coord_fixed()

Attempt at making table renders web images only

df %>%
reactable(.,
        theme = fivethirtyeight(centered = TRUE, header_font_size = 11),
        columns = list(
          images = colDef(
            name = "",
            maxWidth = 50,
            sortable = FALSE,
            # render team logos from their image address and increase their size
            style = background_img(height = "200%", width = "125%"))))

Attempt at adding cropped images = error message

df %>%
reactable(.,
        theme = fivethirtyeight(centered = TRUE, header_font_size = 11),
        columns = list(
          images = colDef(
            name = "",
            maxWidth = 50,
            sortable = FALSE,
            # render team logos from their image address and increase their size
            style = background_img(height = "200%", width = "125%")),
          images_cropped = colDef(
            name = "",
            maxWidth = 50,
            sortable = FALSE, 
            style = background_img())))
camille
  • 16,432
  • 18
  • 38
  • 60
thoel
  • 1
  • 1
  • I'm not familiar with cropcircles, and haven't used reactable in a while. What type of object does cropcircles return? – camille Feb 28 '23 at 19:38
  • @camille, it returns an image cropped into a circle shape. I think the problem is that once the web images get run through circle_crop(), they're no longer treated as web images which work just fine in reactable – thoel Feb 28 '23 at 20:13
  • No but what _class of object_ is it? Like once you have an image and you call `class` on it, what is it? A string path, a `gg` or `grob` object, `magick-image`, a matrix of pixel values, etc? – camille Mar 01 '23 at 01:59
  • @camille sorry for the confusion. its a magick-image. I ended up getting it to work by saving the images locally within a subfolder of my directory and using knitr::image_uri to match the .png file name with the cell contents, e.g. "Ben" returns "Ben.png". However, I would ultimately like the images to be in their own column, separate from the names. is that something thats possible? Thanks for your help so far! – thoel Mar 01 '23 at 13:43

0 Answers0