The hardware and bandwidth for this mirror is donated by METANET, the Webhosting and Full Service-Cloud Provider.
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[@]metanet.ch.

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.