Problem: Given a directory of image files that is located in an project root, create a lightbox gallery in quarto.
Let’s start by getting a list of jpg files.
file_list <- list.files("images", pattern = "*.jpg")
file_list[1] “4-3.jpg” “data_scientist.jpg” “ml_over_time.jpg”
[4] “one_does_not.jpg” “perfect_date.jpg” “useR.jpg”
We can also create some captions in a text file and load these as a variable. Then we need to match the File value with the file name.
captions <- read.table("images/captions.txt", header = TRUE, sep=",")
captions File Caption
1 data_scientist.jpg These are fighting words.
2 ml_over_time.jpg A rose is a rose is a rose...
3 4-3.jpg See no evil.
4 one_does_not.jpg Regression learning.
5 perfect_date.jpg YYYY-MM-DD is best.
6 useR.jpg This is a useR caption!The %in% operator will test if the file name string is present. We can see that the caption file names are all in the file list.
captions$File %in% file_list[1] TRUE TRUE TRUE TRUE TRUE TRUEWe can use match() to find the index locations. Doing so we see that things are not in order. In captions.txt, there is a caption for each file, but the order is different than file_list.
match(captions$File, file_list)[1] 2 3 1 4 5 6The order() function can solve that.
captions <- captions[order(captions$File),]Great, now they are in order.
match(captions$File, file_list)[1] 1 2 3 4 5 6Now once properly ordered, we’ll build the string that we need to construct the gallery.
file_list <- paste0("![", captions$Caption , "](images/", file_list, "){group=\"my-gallery\"}\n\n")In the paste0() function above, I noticed that lightbox did not work with just \n but does work with \n\n.
With the string in place we’ll output the text and pipe it through a fenced div to get columns.
This isn’t perfect because if there is a file without a caption it will not show. Need to figure out how to put a blank string into any image that lacks a caption.
@online{craig2024,
author = {Craig, Nathan},
title = {Gallery from {Listing}},
date = {2024-03-22},
url = {https://ncraig.netlify.app/posts/2024-03-22-gallery-from-listing/index.html},
langid = {en}
}