There are many existing blog posts and help pages explaining how to build a Hugo site using blogdown, the best of which is Creating Websites with R Markdown by Yihui Xie, Amber Thomas, and Alison Presmanes Hill. But, as when learning anything new, I found myself asking questions about Hugo site formatting and functionality that were not answered by the “how-to” guides. Here, I’ve collected links and code snippets addressing questions about how to toggle features and change the appearance of blogdown site elements. For sure, there are better ways to implement the changes I describe, and my mixed use of markdown syntax with HTML can be considered hacky at best. But, for those like me who are unfamiliar with CSS, I hope this is useful.
Note: some of the directory structures and file names mentioned herein are specific to the hyde-hyde theme, though the edits should be applicable to the analogous files from other Hugo flavors.
How to scale images and format image captions
When creating a blogdown post, standard image markdown can be used to insert pictures with captions.
While simple and functional, I think the aesthetics can be improved. First, by default, images are scaled to 100% of the page width, but I think some flanking whitespace looks nice. RStudio IDE supports Pandoc notation, so you can simply include a percent width parameter in brackets after the image. Adding center tags aligns the picture in the center of the page, but newlines between the tags and the image text are needed in order to render the caption.
# This:
<center>
{ width=50% }
</center>
# Not this:
<center>
{ width=50% }
</center>Second, I found the default caption text to be too similar to the text in the post body. To remedy this, I include the style tag with attributes for p.caption in the body of my Rmarkdown posts, specifying the size, color, alignment, and left/right margins of the caption as a percent of page width.
<style>
p.caption {
font-size: 0.9em;
text-align: center;
color: #7f1cad;
margin-right: 5%;
margin-left: 5%;
}
</style>Altogether, these code snippets make for nicely scaled images with captions that stand out from the main text.
<center>
{ width=50% }
</center>
So regal. Such panache.