This is a demo of the function pixgallery(). This creates an interactive gallery of images. The mandatory input required is one or more paths/URLs to image(s).
Code
library(pixture)
paths_a <- c(
"https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/7604425/pexels-photo-7604425.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/4666748/pexels-photo-4666748.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/4932184/pexels-photo-4932184.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/4210900/pexels-photo-4210900.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/3126574/pexels-photo-3126574.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/167699/pexels-photo-167699.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/1376201/pexels-photo-1376201.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/7919/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/2437291/pexels-photo-2437291.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/1679772/pexels-photo-1679772.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/1183099/pexels-photo-1183099.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/1813513/pexels-photo-1813513.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/931018/pexels-photo-931018.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/267074/pexels-photo-267074.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/4622893/pexels-photo-4622893.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
)
paths_b <- c(
"https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/7604425/pexels-photo-7604425.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/4666748/pexels-photo-4666748.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/4932184/pexels-photo-4932184.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/4210900/pexels-photo-4210900.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/3126574/pexels-photo-3126574.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/167699/pexels-photo-167699.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/1376201/pexels-photo-1376201.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/7919/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/2437291/pexels-photo-2437291.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/1679772/pexels-photo-1679772.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/1183099/pexels-photo-1183099.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/1813513/pexels-photo-1813513.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/931018/pexels-photo-931018.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/267074/pexels-photo-267074.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/4622893/pexels-photo-4622893.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/1624600/pexels-photo-1624600.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/851023/pexels-photo-851023.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/1694631/pexels-photo-1694631.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/2325447/pexels-photo-2325447.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/2743287/pexels-photo-2743287.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/189349/pexels-photo-189349.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
)
Clicking on the thumbnail opens up the full image in a lightbox. The whole gallery can be browsed through the lightbox using left or right arrow keys. To customize the lightbox, see the lightbox vignette.
Caption
Optionally, captions can be added to the images which are visible when viewed in the lightbox.
captions <- c(
"night",
"forest",
"shark",
"coconut trees",
"flowers",
"field",
"misty",
"leaves",
"sunset",
"mountains",
"swamp",
"rainstorm",
"leaves",
"beach",
"leopard",
"sunflower"
)
pixgallery(paths_a, caption = captions)
Code
captions_long <- c(
"The night sky blanketed the quiet village as stars twinkled in the peaceful darkness.",
"A stroll through the forest reveals nature's hidden gems and the call of wild creatures.",
"Snorkeling with a shark is an unforgettable experience for adventure seekers and marine life lovers.",
"Sipping coconut water on a hammock under swaying palms is pure tropical bliss.",
"Blooming flowers in the meadow create a splash of color and a perfect photo opportunity.",
"Children laughed and played in the vast field of golden wheat under the summer sun.",
"Misty mornings in the valley offer a surreal, almost dreamlike atmosphere to early risers.",
"Lush green leaves glisten in the rain, showcasing nature's resilience and beauty.",
"A breathtaking sunset paints the sky in hues of orange, pink, and purple.",
"Snow-capped mountains tower majestically over the valley below, inviting explorers to their icy peaks.",
"The dense swamp is teeming with life, from croaking frogs to towering mangroves.",
"Caught in a rainstorm, we sought shelter under an old oak tree on the path.",
"The thick canopy of leaves shields forest walkers from the midday sun's strong rays.",
"Crystal-clear waters and white sands define the idyllic, unspoiled beach destination of your dreams.",
"A leopard stealthily navigates the snowy terrain, its spotted coat blending with the winter landscape.",
"Sunflowers turn their faces to the sun, creating a sea of yellow that stretches to the horizon."
)
Images without captions can be set as NA.
pixgallery(paths_a[1:4], caption = c("night", "forest", NA, "coconut trees"))
Caption parameters
Captions have further properties caption_valign and caption_halign which allows for captions to be displayed on the thumbnails.
caption_valign options are top, center, bottom or below.
pixgallery(paths_a[1:4], caption = captions[1:4], caption_valign = "top")
pixgallery(paths_a[1:4], caption = captions[1:4], caption_valign = "center")
pixgallery(paths_a[1:4], caption = captions[1:4], caption_valign = "bottom")
pixgallery(paths_a[1:4], caption = captions[1:4], caption_valign = "below")
caption_halign options are left, center or right.
pixgallery(
paths_a[1:4],
caption = captions[1:4],
caption_valign = "center",
caption_halign = "center"
)
pixgallery(
paths_a[1:4],
caption = captions[1:4],
caption_valign = "below",
caption_halign = "right"
)
With long captions.
pixgallery(paths_a[1:4], caption = captions_long[1:4], caption_valign = "top")
pixgallery(paths_a[1:4], caption = captions_long[1:4], caption_valign = "below")
Link
The default is TRUE, which means that clicking on the thumbnail opens the image in a lightbox. Setting this to FALSE turns off links.
By setting this to a character vector, you can add custom links.
pixgallery(
paths_a[1:4],
link = c(
"https://en.wikipedia.org/wiki/Milky_Way",
"https://en.wikipedia.org/wiki/Rainforest",
"https://en.wikipedia.org/wiki/Shark",
"https://en.wikipedia.org/wiki/Hawaii"
)
)
Custom links with captions.
pixgallery(
paths_a[1:4],
caption = captions[1:4],
link = c(
"https://en.wikipedia.org/wiki/Milky_Way",
"https://en.wikipedia.org/wiki/Rainforest",
"https://en.wikipedia.org/wiki/Shark",
"https://en.wikipedia.org/wiki/Hawaii"
)
)
Lightbox caption
By default, the caption shown in the lightbox is the same as the caption shown below the image (caption_lightbox=TRUE). Setting this to FALSE will remove captions from the lightbox.
pixgallery(
paths_a[1:4],
caption = captions[1:4],
caption_lightbox = FALSE
)
By providing a character vector, you can set custom captions for the lightbox.
pixgallery(
paths_a[1:4],
caption = captions[1:4],
caption_lightbox = c(
"The night sky over the mountains",
"Through the dense rainforest",
"Swimming with a shark",
"Relaxing in Hawaii"
)
)
You could also provide only the captions for the lightbox.
pixgallery(
paths_a[1:4],
caption_lightbox = c(
"The night sky over the mountains",
"Through the dense rainforest",
"Swimming with a shark",
"Relaxing in Hawaii"
)
)
Dimension
The parameters h and w is used to adjust the dimension of images in the grid. This value is a string in any valid CSS unit.
Gap
The parameter gap is used to control spacing between images in the grid. This value is a string in any valid css unit.
Border radius
Adjust the corner radius of image thumbnails.
pixgallery(paths_a, w = "100px", border_radius = "10px")
Shuffle
Randomly shuffle images around.
Shuffle with captions.
pixgallery(
paths_a,
w = "50px",
shuffle = TRUE,
caption = c(
"night",
"forest",
"shark",
"coconut trees",
"flowers",
"field",
"misty",
"leaves",
"sunset",
"mountains",
"swamp",
"rainstorm",
"leaves",
"beach",
"leopard",
"sunflower"
)
)
Shuffle with captions and custom lightbox captions.
pixgallery(
paths_a[1:6],
shuffle = TRUE,
caption = captions[1:6],
caption_lightbox = captions_long[1:6]
)
Shuffle with links.
pixgallery(
paths_a[1:6],
shuffle = TRUE,
link = c(
"https://en.wikipedia.org/wiki/Milky_Way",
"https://en.wikipedia.org/wiki/Rainforest",
"https://en.wikipedia.org/wiki/Shark",
"https://en.wikipedia.org/wiki/Hawaii",
"https://en.wikipedia.org/wiki/Flower",
"https://en.wikipedia.org/wiki/Field"
)
)
Layout
You can set different layouts using the layout parameter, with the default being layout="grid" for a responsive grid design.
Fixed
With the default ‘grid’ layout, the height is fixed and the width is mostly fixed, but has some flexibility such that the whole gallery takes up the entire width of available parent space. In ‘fixed’ layout, the thumbnail dimensions are strictly fixed. Adjust the width of the page to see the difference in responsiveness compared to ‘grid’ layout.
With customization.
pixgallery(
paths_a[1:8],
layout = "fixed",
caption = captions[1:8],
caption_valign = "center",
caption_halign = "center",
border_radius = "50%",
gap = "10px"
)
With long captions.
pixgallery(
paths_a[1:8],
layout = "fixed",
caption = captions_long[1:8],
caption_valign = "top"
)
pixgallery(
paths_a[1:8],
layout = "fixed",
caption = captions_long[1:8],
caption_valign = "below"
)
Mosaic
Similar to grid layout but with some mixed size cells.
With customization.
pixgallery(
paths_a,
layout = "mosaic",
caption = captions,
caption_valign = "bottom",
h = "100px",
w = "100px"
)
pixgallery(
paths_a,
layout = "mosaic",
caption = captions,
caption_valign = "below",
h = "100px",
w = "100px",
border_radius = "5px",
shuffle = TRUE
)
With long captions.
pixgallery(
paths_a[1:8],
layout = "mosaic",
caption = captions_long[1:8],
caption_valign = "top"
)
pixgallery(
paths_a[1:8],
layout = "mosaic",
caption = captions_long[1:8],
caption_valign = "below"
)
Masonry
Column-wise layout with free height. The thumbnail width can be adjusted. This works best for a set of images with mixed aspect ratios, for example; a mix of portrait and landscape images.
With customization.
pixgallery(
paths_a,
layout = "masonry",
caption = captions,
caption_valign = "bottom",
w = "100px"
)
pixgallery(
paths_a,
layout = "masonry",
caption = captions,
caption_valign = "below",
w = "100px",
border_radius = "5px",
shuffle = TRUE
)
With long captions.
pixgallery(
paths_a[1:8],
layout = "masonry",
caption = captions_long[1:8],
caption_valign = "top"
)
pixgallery(
paths_a[1:8],
layout = "masonry",
caption = captions_long[1:8],
caption_valign = "below"
)
Justified
Row-wise layout with free width. The thumbnail height can be adjusted. This works best for a set of images with mixed aspect ratios, for example; a mix of portrait and landscape images.
With customization.
pixgallery(
paths_a,
layout = "justified",
caption = captions,
caption_valign = "bottom",
h = "100px"
)
pixgallery(
paths_a,
layout = "justified",
caption = captions,
caption_valign = "below",
h = "100px",
border_radius = "5px",
shuffle = TRUE
)
With long captions.
pixgallery(
paths_a[1:8],
layout = "justified",
caption = captions_long[1:8],
caption_valign = "top"
)
pixgallery(
paths_a[1:8],
layout = "justified",
caption = captions_long[1:8],
caption_valign = "below"
)
Single row layout with horizontal scrolling.
With customization.
pixgallery(
paths_a,
layout = "scroll",
caption = captions,
caption_valign = "bottom",
h = "100px"
)
pixgallery(
paths_a,
layout = "scroll",
caption = captions,
caption_valign = "below",
h = "100px",
w = "150px",
border_radius = "5px",
shuffle = TRUE
)
With long captions.
pixgallery(
paths_a[1:8],
layout = "scroll",
caption = captions_long[1:8],
caption_valign = "top"
)
pixgallery(
paths_a[1:8],
layout = "scroll",
caption = captions_long[1:8],
caption_valign = "below"
)
Elastic
Single row gallery where images expand on hover. h sets the height of the gallery. gap adjusts spacing between thumbnails. caption_valign and caption_halign are disabled.
With customization.
pixgallery(paths_a, layout = "elastic", gap = "0", h = "50px")
pixgallery(
paths_a,
layout = "elastic",
border_radius = "5px",
caption = captions
)
Works better when there are more than a handful of images.
Rhombus
Thumbnails are diamond shaped. Options caption_valign = "below" and w are disabled.
With customization.
pixgallery(
paths_a[1:6],
layout = "rhombus",
gap = "2px",
caption = captions[1:6],
caption_valign = "center",
caption_halign = "center",
border_radius = "8px",
h = "250px",
shuffle = TRUE
)
With long captions.
pixgallery(
paths_a[1:6],
layout = "rhombus",
gap = "2px",
caption = captions_long[1:6],
caption_valign = "center",
caption_halign = "center"
)
Hexagon
Thumbnails are hexagon shaped. Options caption_valign = "below" and w are disabled.
With customization.
pixgallery(
paths_a[1:6],
layout = "hexagon",
gap = "2px",
caption = captions[1:6],
caption_valign = "center",
caption_halign = "center",
border_radius = "8px",
h = "100px",
shuffle = TRUE
)
With long captions.
pixgallery(
paths_a[1:6],
layout = "hexagon",
gap = "2px",
caption = captions_long[1:6],
caption_valign = "center",
caption_halign = "center"
)
Compatibility
All parameters are not applicable to every layout. The table below indicates which parameters are active for each layout type.
| caption |
|
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
| caption_valign |
over1
|
🟩 |
🟡 |
🟩 |
🟩 |
🟡 |
🔴 |
🟡 |
🟡 |
🟡 |
|
below |
🟩 |
🟩 |
🟠 |
🟩 |
🟠 |
🔴 |
🟩 |
🔴 |
🔴 |
| caption_halign |
|
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🔴 |
🟩 |
🟩 |
🟩 |
| link |
|
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
| h |
|
🔵 |
🟩 |
🔵 |
🔴 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
| w |
|
🟩 |
🟩 |
🟩 |
🟩 |
🔴 |
🔴 |
🟩 |
🔴 |
🔴 |
| gap |
|
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
| border_radius |
|
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
| shuffle |
|
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
🟩 |
1 top/center/bottom
🟩 Functional
🟡/🟠/🔵 Known issues
🔴 Inactive/Disabled
🟡 Long captions may extend beyond the images and/or clipped. Set height/width manually (h="300px", h="100%" etc)
🟠 Long captions force images to be stretched
🔵 Height cannot be adjusted when captions are displayed
Local images
Local images (not on the internet) can be provided as relative or absolute paths. The images do not show up in the RStudio notebook preview, but they should work in a rendered HTML document.
Pixture does not move, copy or embed images. The images must be in their final intended destination. It is left to the user to handle images as assets. Images are not embedded into self contained documents.
Relative path
This example assumes your images are available next to the Rmd/qmd/HTML file in a directory named images and that you copy these assets if the Rmd/qmd/HTML is relocated.
paths <- list.files("images", full.names = TRUE)
paths
Absolute path
Here is an example using sample images from the package. These should work locally, but may not work if the rendered HTML is relocated.
[1] "/opt/homebrew/Caskroom/miniforge/envs/r-4.5-arm/lib/R/library/pixture/extdata/images/pexels-photo-3126574.jpg"
[2] "/opt/homebrew/Caskroom/miniforge/envs/r-4.5-arm/lib/R/library/pixture/extdata/images/pexels-photo-4210900.jpg"
[3] "/opt/homebrew/Caskroom/miniforge/envs/r-4.5-arm/lib/R/library/pixture/extdata/images/pexels-photo-4666748.jpg"
[4] "/opt/homebrew/Caskroom/miniforge/envs/r-4.5-arm/lib/R/library/pixture/extdata/images/pexels-photo-4932184.jpg"
[5] "/opt/homebrew/Caskroom/miniforge/envs/r-4.5-arm/lib/R/library/pixture/extdata/images/pexels-photo-572897.jpg"
[6] "/opt/homebrew/Caskroom/miniforge/envs/r-4.5-arm/lib/R/library/pixture/extdata/images/pexels-photo-7604425.jpg"
Session
R version 4.5.1 (2025-06-13)
Platform: aarch64-apple-darwin20.0.0
Running under: macOS Sequoia 15.7.1
Matrix products: default
BLAS/LAPACK: /opt/homebrew/Caskroom/miniforge/envs/r-4.5-arm/lib/libopenblas.0.dylib; LAPACK version 3.12.0
locale:
[1] en_GB.UTF-8/en_GB.UTF-8/en_GB.UTF-8/C/en_GB.UTF-8/en_GB.UTF-8
time zone: Europe/Stockholm
tzcode source: system (macOS)
attached base packages:
[1] stats graphics grDevices utils datasets methods base
other attached packages:
[1] pixture_0.2.1
loaded via a namespace (and not attached):
[1] digest_0.6.37 later_1.4.4 R6_2.6.1 httpuv_1.6.16
[5] fastmap_1.2.0 xfun_0.54 magrittr_2.0.4 shiny_1.11.1
[9] knitr_1.50 htmltools_0.5.8.1 rmarkdown_2.30 lifecycle_1.0.4
[13] promises_1.5.0 cli_3.6.5 xtable_1.8-4 compiler_4.5.1
[17] tools_4.5.1 mime_0.13 evaluate_1.0.5 Rcpp_1.1.0
[21] yaml_2.3.10 otel_0.2.0 rlang_1.1.6 jsonlite_2.0.0
[25] htmlwidgets_1.6.4