4) Minimal Closeread with Images
In the preceding modules, you got introduced to the main components of a Closeread document using two simple examples containing only text. In this module, we continue our introductory journey with another basic document, this time containing text and images.
Recall that you need to have installed the quarto Closeread extension in your working directory. Run the following command in your Terminal:
Terminal
quarto add qmd-lab/closereadWorking with Images
For our next example, we’ll use a couple of images: the Quarto logo, and the R logo, shown below.
The PNG files with the images of the logos are available in the URLs listed below:
Insert Image. With the URL of the image, you can insert the logo in a quarto document with the following markdown syntax:
Alternatively, you can download the PNG file of the logo into your working directory, and then insert it into a quarto document with a similar syntax, for example:
Adding Caption. Inside the brackets, you can add an optional caption:
Figure Dimensions. Likewise, you can modify the size of the image by appending attributes width and/or height inside curly braces:
{width=50%}
Figure Alignment. You can also change the alignment with the attribute fig-align which takes values "left", "center", and "right"
{width=50% fig-align="center"}To know more about figures in Quarto documents, take a look at: https://quarto.org/docs/authoring/figures.html
Example
Below is an example of a qmd file with some content. Copy and paste it into a qmd document so that you can preview it or render it in all its Closeread glory.
example2.qmd
---
title: My second closeread document
format: closeread-html
---
::::{.cr-section}
What is __Quarto__? What is __R__?
:::{#cr-quarto}
:::
Quarto is an open-source scientific and
technical publishing system. @cr-quarto
Quarto lets you author documents using
plain text markdown in your favorite editor.
You can use quarto documents with R. @cr-rlogo
:::{#cr-rlogo}
:::
R is a free software environment for
statistical computing and graphics.
R is available on Unix, MacOS, and Windows.
::::What’s going on?
Let’s review the content of example2.qmd describing the primary Closeread components:
yaml header format
closeread section
sticky element
trigger action
YAML header format
As you know, in the yaml header we specify the format of the qmd document to closeread-html.
---
title: My second closeread document
format: closeread-html
---Closeread Section
The next thing to notice is the closeread section defined by the four consecutive colons, and the curly braces containing the id .cr-section.
::::{.cr-section}
::::Sticky Elements
Inside the cr-section we are defining two sticky components. Remember that every sticky is surrounded by a div ::: and a label or name.
The first sticky, #cr-quarto, is dedicated to the quarto logo. To be more specific, this sticky corresponds to the markdown element that inserts the png image of Quarto’s logo.
:::{#cr-quarto}
:::The second sticky, #cr-rlogo, is dedicated to the R logo.
:::{#cr-rlogo}
:::Narrative and Triggers
Having established the cr-section as well as the stickies, the next step involves specifying the narrative and the triggers to launch the stickies.
In this example we have 2 triggers, one for each sticky.
The first trigger, @cr-quarto, is the one that will make the Quarto logo to get stuck until the next trigger gets activated. This first trigger is located at the end of the second paragraph:
Quarto is an open-source scientific and
technical publishing system. @cr-quartoThe second trigger, @cr-rlogo, is the one that will make the R logo to get stuck. This trigger is located at the end of the fourth paragraph:
You can use quarto documents with R. @cr-rlogoTake a look
You can take a look at this first example here.