In djnavarro/bs4cards: Generate Bootstrap Cards

knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>"
)
library(tibble)

library(bs4cards)

The bs4cards package supports a total eight different layout formats. First, there are two vertical layouts and two horizontal layouts:

• Setting layout = "label-below" places the label below the image (the default)
• Setting layout = "label-above" places the label above the image
• Setting layout = "label-left" places the label to the left of the image
• Setting layout = "label-right" places the label to the right of the image

In addition there are two "singleton" layouts:

• Setting layout = "label-only" includes a label but no image
• Setting layout = "image-only" includes an image but no label

Finally there are two "inset" layouts"

• Setting layout = "inset-top" places the label at the top of the image
• Setting layout = "inset-bottom" places the label at the bottom of the image

Vertical layouts

The vertical label-below layout is the default for bs4cards. Images are placed above the label, with the label title above text. Footers (if present) appear under the label, and the header (if present) is shown above:

galleries %>% 
  cards(
    title = long_name,
    link = gallery_url,
    image = image_url,
    layout = "label-below"
  )

The label-above layout reverses the positions of label and image:

galleries %>% 
  cards(
    title = long_name,
    link = gallery_url,
    image = image_url,
    layout = "label-above"
  )

Horizontal layouts

Horizontal card layouts are also supported in bs4cards, by setting layout = "label-left" or layout = "label-right". Here's an example:

galleries %>% 
  cards(
    title = long_name,
    link = gallery_url,
    image = image_url,
    text = blurb,
    footer = date,
    layout = "label-right",
    width = 4
  )

Horizontal layouts tend to need more horizontal space, especially when the label includes text as well as a title. In the code above I set width = 4 to provide a little more room. You can also adjust the location of the breakpoint separating the image and the label. The breakpoint argument should be an integer between 1 and 5.

galleries[1,] %>% 
  cards(
    title = long_name, 
    image = image_url, 
    text = blurb,
    layout = "label-left", 
    breakpoint = 1, 
    width = 4
  )

galleries[1,] %>% 
  cards(
    title = long_name, 
    image = image_url, 
    text = blurb,
    layout = "label-left", 
    breakpoint = 5, 
    width = 4
  )

Image-only layout

In some cases there is no label to accompany the image, in which case setting layout = "image-only" is appropriate:

galleries[1:3, ] %>% 
  cards(
    link = gallery_url,
    image = image_url,
    layout = "image-only"
  )

It is still possible to add headers and footers, however:

galleries[1:3, ] %>% 
  cards(
    link = gallery_url,
    image = image_url,
    footer = long_name,
    layout = "image-only"
  )

Label-only layout

The inversion of the image-only layout is the label-only layout, which is appropriate whenever no image is included. This is not the most visually exciting layout, but there are situations where it may be handy:

galleries %>% 
  cards(
    link = gallery_url,
    title = long_name,
    text = blurb,
    layout = "label-only"
  )

Inset layouts

The remaining two layout types are "inset" types, in which the label is displayed as an overlay on top of the image.

galleries %>% 
  cards(
    title = long_name,
    text = blurb,
    link = gallery_url,
    image = image_url,
    layout = "inset-top"
  )

Like horizontal cards, inset cards use the breakpoint argument to specify the amount of space occupied by the label. The inset occupies a fixed proportion of the image height, so a little care is required. The smallest size (breakpoint = 1) is generally tall enough to accommodate a single line title:

galleries[1,] %>% 
  cards(title = long_name, image = image_url,
        layout = "inset-top", breakpoint = 1)

The largest size is breakpoint = 5 and is large enough to fit a modest caption:

galleries[1,] %>% 
  cards(title = long_name, image = image_url, text = blurb,
        layout = "inset-top", breakpoint = 5)

djnavarro/bs4cards documentation built on Dec. 20, 2021, 12:04 a.m.