The hardware and bandwidth for this mirror is donated by dogado GmbH, the Webhosting and Full Service-Cloud Provider. Check out our Wordpress Tutorial.
If you wish to report a bug, or if you are interested in having us mirror your free-software or open-source project, please feel free to contact us at mirror[@]dogado.de.

Image and Markdown Resizing with r2resize

R Packager

2025-11-11

This vignette demonstrates how to use add.resizer() for enhancing R Markdown documents with resizable images and tables, and shinyExpandImage() for creating interactive image viewers in Shiny applications.

Adding Resizer Toolbars to Markdown with add.resizer()

The add.resizer() function injects a mini-toolbar into your R Markdown output, allowing users to resize images and tables interactively.

# Default settings: adds resizer to both images and tables (at the top)
r2resize::add.resizer()

# Add resizer only to images
r2resize::add.resizer(
  tables = FALSE,
  images = TRUE
)

# Add resizer to tables only, at the bottom of the page
r2resize::add.resizer(
  tables = TRUE,
  images = FALSE,
  position = "bottom"
)

# Customized resizer with specific colors and sizes
r2resize::add.resizer(
  theme.color = "darkred",
  font.size = "13px",
  font.color = "white",
  line.color = "gold",
  line.width = 200,
  line.height = 10,
  default.image.width = "50%"
)

# Example within a Shiny app
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      add.resizer(tables = TRUE, images = TRUE, position = "top"),
      h2("Resizeable Content in Shiny"),
      tags$img(src = "https://r2resize.obi.obianom.com/m/image1.jpg", alt = "Sample Image 1", width = "200px"),
      tags$p("This is some text."),
      tags$img(src = "https://r2resize.obi.obianom.com/m/image2.jpg", alt = "Sample Image 2", width = "150px"),
      tags$br(),
      tags$table(border = "1", style = "width:50%;",
                 tags$tr(tags$th("Header 1"), tags$th("Header 2")),
                 tags$tr(tags$td("Row 1, Col 1"), tags$td("Row 1, Col 2")))
    ),
    server = function(input, output) {}
  )
}

Elegant Image Viewer in Shiny with shinyExpandImage()

The shinyExpandImage() function transforms a simple div containing images into an elegant, expandable image gallery with zoom, navigation, and download features, ideal for Shiny applications.

# Simple image expansion for a single gallery in a Shiny app
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      h2("Interactive Image Gallery"),
      shinyExpandImage(c("my_gallery_id")),
      tags$div(
        id = "my_gallery_id",
        tags$a(
          href = "https://r2resize.obi.obianom.com/m/1b.jpg",
          tags$img(src = "https://r2resize.obi.obianom.com/m/1b.jpg", alt = "Landscape 1", width = "150px")
        ),
        tags$a(
          href = "https://r2resize.obi.obianom.com/m/1.jpg",
          tags$img(src = "https://r2resize.obi.obianom.com/m/1.jpg", alt = "Landscape 2", width = "150px")
        ),
        tags$a(
          href = "https://r2resize.obi.obianom.com/m/image2.jpg",
          tags$img(src = "https://r2resize.obi.obianom.com/m/image2.jpg", alt = "Landscape 3", width = "150px")
        )
      )
    ),
    server = function(input, output) {}
  )
}

# Multiple image galleries on the same Shiny page
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      h2("Multiple Image Galleries"),
      shinyExpandImage(c("gallery_one", "gallery_two")), # Pass multiple IDs
      
      h3("Gallery One"),
      tags$div(
        id = "gallery_one",
        tags$a(
          href = "https://r2resize.obi.obianom.com/m/image1.jpg",
          tags$img(src = "https://r2resize.obi.obianom.com/m/image1.jpg", alt = "Nature 1", width = "100px")
        ),
        tags$a(
          href = "https://r2resize.obi.obianom.com/m/image2.jpg",
          tags$img(src = "https://r2resize.obi.obianom.com/m/image2.jpg", alt = "Nature 2", width = "100px")
        )
      ),
      
      h3("Gallery Two"),
      tags$div(
        id = "gallery_two",
        tags$a(
          href = "https://r2resize.obi.obianom.com/m/1b.jpg",
          tags$img(src = "https://r2resize.obi.obianom.com/m/1b.jpg", alt = "City 1", width = "100px")
        ),
        tags$a(
          href = "https://r2resize.obi.obianom.com/m/1.jpg",
          tags$img(src = "https://r2resize.obi.obianom.com/m/1.jpg", alt = "City 2", width = "100px")
        )
      )
    ),
    server = function(input, output) {}
  )
}

These binaries (installable software) and packages are in development.
They may not be fully stable and should be used with caution. We make no claims about them.
Health stats visible at Monitor.