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.
Captions
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)
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 = "center")
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"))
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.
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"))
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 the HTML if you use self_contained: true.
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 another example using sample images from the package. These should work locally, but may not work if the rendered HTML is relocated.
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.
pixgallery(paths_a[1:8], layout = "fixed", caption = captions[1:8], caption_valign = "center", caption_halign = "center", border_radius = "50%", gap = "10px")
Mosaic
Similar to grid layout but with some mixed size cells.
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)
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.
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)
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.
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)
Elastic
Single row gallery where images expand on hover. h sets the height of the gallery. gap adjusts spacing between thumbnails.
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. gap sets spacing between thumbnails. Thumbnail dimensions and number of items per row are fixed for now. This is a completely non-responsive layout.
pixgallery(paths_a, layout = "rhombus", gap = "0px", caption = captions, shuffle = TRUE)
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
This may not be complete. This is work in progress.
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/base/envs/r-4.4/lib/R/library/pixture/extdata/images/pexels-photo-3126574.jpg"
[2] "/opt/homebrew/Caskroom/miniforge/base/envs/r-4.4/lib/R/library/pixture/extdata/images/pexels-photo-4210900.jpg"
[3] "/opt/homebrew/Caskroom/miniforge/base/envs/r-4.4/lib/R/library/pixture/extdata/images/pexels-photo-4666748.jpg"
[4] "/opt/homebrew/Caskroom/miniforge/base/envs/r-4.4/lib/R/library/pixture/extdata/images/pexels-photo-4932184.jpg"
[5] "/opt/homebrew/Caskroom/miniforge/base/envs/r-4.4/lib/R/library/pixture/extdata/images/pexels-photo-572897.jpg"
[6] "/opt/homebrew/Caskroom/miniforge/base/envs/r-4.4/lib/R/library/pixture/extdata/images/pexels-photo-7604425.jpg"
Session
R version 4.4.1 (2024-06-14)
Platform: x86_64-apple-darwin13.4.0
Running under: macOS Big Sur ... 10.16
Matrix products: default
BLAS/LAPACK: /opt/homebrew/Caskroom/miniforge/base/envs/r-4.4/lib/libopenblasp-r0.3.21.dylib; LAPACK version 3.9.0
locale:
[1] sv_SE.UTF-8/sv_SE.UTF-8/sv_SE.UTF-8/C/sv_SE.UTF-8/sv_SE.UTF-8
time zone: Europe/Stockholm
tzcode source: internal
attached base packages:
[1] stats graphics grDevices utils datasets methods base
other attached packages:
[1] pixture_0.1.0
loaded via a namespace (and not attached):
[1] digest_0.6.36 later_1.3.2 R6_2.5.1 httpuv_1.6.15
[5] fastmap_1.2.0 xfun_0.45 magrittr_2.0.3 shiny_1.8.1.1
[9] knitr_1.48 htmltools_0.5.8.1 rmarkdown_2.27 lifecycle_1.0.4
[13] promises_1.3.0 cli_3.6.3 xtable_1.8-4 compiler_4.4.1
[17] rstudioapi_0.16.0 tools_4.4.1 mime_0.12 evaluate_0.24.0
[21] Rcpp_1.0.12 yaml_2.3.9 rlang_1.1.4 jsonlite_1.8.8
[25] htmlwidgets_1.6.4