# 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) {}
      )
    }