Side by side code chunk and image

[dcossyleon]

• Experiment with using flex grow and similar CSS properties to get both elements side by side, and giving extra space to the image element when possible.

• disable flexbox for mobile

[dcossyleon]

replacing side-by-side selectors with a homemade function in common.R that will use the htmltools package. The advantage is that you can set this up without needing to open up a css file and create new selectors/ classes. Another advantage is that you can flexibly change the width of each of the side-by-side items.

@apreshill, here's what I came up with for two side-by-side images. I'm sure there are more streamlined ways to do this, but it works! :) I'm guessing we can modify this so that it takes a printed yaml object from ymlthis as the first item.

# for side-by-side images. path must be in quotes, width just a #.

side_by_side <- function(path1, width1, path2, width2){
  style2 <- paste0("padding-left: 1rem; width: ", width2, "%;")
  style1 <- paste0("width: ", width1, "%;")

  htmltools::withTags(
    div(style = "display: flex;",
          div(style = style1, 
              htmltools::img(src = path1)), 
          div(style = style2, 
              htmltools::img(src = path2))
    )
  )
}

The only caveat is that for this to look good on mobile, we'd still want to use a CSS media-query to disable display: flex and force the width of both items to be 100% when on mobile. That would probably still need to be added directly to the CSS file.

[apreshill]

This works! I think you could set it up so there are just a few configurations for column width too- like if the left column is 30 you can calculate 100-30=70 for the right column. Here is an example one I did for the stat 545 book, using the glue package:

https://github.com/rstudio-education/stat545-reboot/pull/8/commits/df5594bfcc766619ecafc82b4fc378eaa6e0bac9