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).
library(pixture)
paths <- 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")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.
pixgallery(paths)Captions
Optionally, captions can be added to the images which are visible when viewed in the lightbox.
pixgallery(paths,caption=c("night", "forest", "shark", "coconut trees", "flowers", "field", "misty", "leaves", "sunset", "mountains", "swamp", "rainstorm", "leaves", "beach", "leopard", "sunflower"))Images without captions can be set as NA.
pixgallery(paths[1:4], caption=c("night", "forest", NA, "coconut trees"))
pixgallery(paths[1], caption="night")Dimension
The argument dim is used to adjust the dimension of
images in the grid. This value is a string in any valid css unit.
pixgallery(paths, dim="50px")
pixgallery(paths, dim="200px")Gap
The argument gap is used to control spacing between
images in the grid. This value is a string in any valid css unit.
pixgallery(paths[1:4], gap="20px")
pixgallery(paths, gap="0px", dim="40px")Shuffle
Randomly shuffle images around.
pixgallery(paths, dim="50px", shuffle=TRUE)
pixgallery(paths, dim="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/html file in a directory named images and that you copy these assets if the Rmd/html is relocated.
paths <- list.files("images",full.names=TRUE)
paths## [1] "images/pexels-photo-3126574.jpg" "images/pexels-photo-4210900.jpg"
## [3] "images/pexels-photo-4666748.jpg" "images/pexels-photo-4932184.jpg"
## [5] "images/pexels-photo-572897.jpg" "images/pexels-photo-7604425.jpg"
pixgallery(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.
paths <- list.files(system.file("extdata/images", package="pixture"), full=TRUE)
paths
pixgallery(paths)Shiny app
This is an example of a shiny app using
pixgallery().
To try out a demo app, run pixture::runPixgallery(). Use
shiny helper functions pixgalleryOutput() and
renderPixgallery(). The shiny code is given below:
library(shiny)
library(pixture)
ids <- c("572897",
"7604425",
"4666748",
"4932184",
"4210900",
"3126574",
"167699",
"1376201",
"2437291",
"1679772",
"1183099",
"1813513",
"931018",
"267074",
"4622893")
caption <- c("night;forest;shark;coconut trees;flowers;field;misty;leaves;mountains;swamp;rainstorm;leaves;beach;leopard;sunflower")
ui <- fluidPage(
titlePanel("Pixgallery Demo"),
sidebarLayout(
sidebarPanel(width=3,
selectInput("ids", "Image IDs", choices=ids, selected=ids, multiple=TRUE),
checkboxInput("caption_check", "Use captions", value=FALSE),
uiOutput("caption_ui"),
textInput("dim", label = "Dim", value="120px"),
textInput("gap", label = "Grid gap", value="4px"),
HTML("Images from <a href='https://www.pexels.com/'>Pexels.</a>")
),
mainPanel(width=9,
pixture::pixgalleryOutput("gallery")
)
)
)
server <- function(input, output) {
output$caption_ui <- renderUI({
if(input$caption_check) {
textInput("caption", "Caption", value=caption)
}
})
output$gallery <- pixture::renderPixgallery({
paths <- paste0("https://images.pexels.com/photos/", input$ids, "/pexels-photo-", input$ids, ".jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940")
if(input$caption_check){
if(!is.null(input$caption)){
cpt <- unlist(strsplit(input$caption, ";"))
if(length(cpt)!=length(paths)) stop("Number of captions do not match number of images.")
pixture::pixgallery(paths, caption=cpt, dim = input$dim, gap = input$gap)
}
}else{
pixture::pixgallery(paths, dim = input$dim, gap = input$gap)
}
})
}
shinyApp(ui = ui, server = server)To use local images in Shiny, the images can be added to the
www directory and the paths are relative. For example; an
image at app/www/images/image.jpg is referenced in the app
as images/image.jpg.