Merge branch 'main' into DesignPatterns2

README.md

@@ -85,13 +85,46 @@ def add(x, y, z):
 
 Refer to the [code blocks documentation](https://squidfunk.github.io/mkdocs-material/reference/code-blocks/) for more customisations.
 
-#### Customising images
-
-Refer to the [Attribute Lists](https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#attribute-lists) in the Material Theme docs and [MkDocs Caption](https://tobiasah.github.io/mkdocs-caption/) for customising images in your blog post.
-
 #### Rendering mathematical expressions
 
 You can use LaTeX markup to render mathematical expressions, enabled via [Mathjax](https://www.mathjax.org) and [mdx_math](https://github.com/mitya57/python-markdown-math).
 
 - To write an inline expression, wrap the expression in `$` delimiters.
 - To write the expression as a block, delimit the expression with either `$$` or as a [code block](#code-blocks) with the `math` shortcode.
+
+#### Customising images
+
+Images are converted to figures automatically using the [MkDocs Caption](https://tobiasah.github.io/mkdocs-caption/) extension. This extension enables putting captions on tables and lists as well as images, however the most basic behaviour uses the image's Alt Text field to populate the figure caption.
+
+For Example:
+
+``` markdown
+![figure caption](img.jpg)
+```
+
+Will be converted to:
+
+```html
+<p>
+<figure id=_figure-1>
+    <img alt="figure caption" src="img.jpg" />
+    <figcaption>Figure 1: figure caption</figcaption>
+</figure>
+</p>
+```
+
+Which will render as a centred image with the caption "Figure 1: figure caption" and maintain the alt text of the image as "figure caption". MkDocs Caption also provides other ways to define the Figure caption, which allows you to have different text for the figure and alt text.
+
+If you do not want the image to have a caption, you can label it as a `no-caption` class using an [Attribute List](https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#attribute-lists). Reminder, [it is important to include Alt Text](https://www.imperial.ac.uk/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/images/) for accessibility reasons.
+
+``` markdown
+![figure caption](img.jpg) {: .no-caption }
+```
+
+You can then add to the attribute list to further specify the style. A useful one is for centering images:
+
+``` markdown
+![figure caption](img.jpg) {: .no-caption style="display:block;margin:auto;"}
+```
+
+More information on image style options can be found in the [Mozilla Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#styling_with_css).

docs/posts/rslondonsoutheast_2024.md

@@ -22,8 +22,8 @@ tags:
 
 # The RSLondonSouthEast 2024 Workshop
 
-![](images/rslondonsoutheast_2024/ukri_logo.png){: style="height:50%;width:50%"{< mdl-disable "<!-- markdownlint-disable MD045 -->" >}
-![](images/rslondonsoutheast_2024/rse_logo.png){: style="height:10%;width:10%"{< mdl-disable "<!-- markdownlint-disable MD045 -->" >}
+![The UKRI-EPSRC Logo](images/rslondonsoutheast_2024/ukri_logo.png){: .no-caption style="width:79%" } ![The UKRSE Society Logo](images/rslondonsoutheast_2024/rse_logo.png){: .no-caption style="width:19%;"}
+{: style="display:block;margin:auto;width:60%"}
 
 Celebrating its fifth year, [the RSLondonSouthEast workshop] returned to Imperial College London's South Kensington campus. [Imperial's RSE team] was well represented, with the event drawing RSEs and academics from across London and the South East of England. This year's conference was co-chaired by [Jeremy Cohen], from Imperial, and [Ilektra Christidi] from UCL.
 

docs/stylesheets/extra.css

@@ -3,5 +3,7 @@
   }
 .md-content__inner img {
   box-sizing: content-box;
-  max-width: 80%;
+}
+.md-typeset figure img {
+  max-width: 80%
 }

mkdocs.yml

@@ -53,8 +53,9 @@ plugins:
       categories:
         - categories
         - tags
-  - caption
-
+  - caption:
+      figure:
+        ignore_classes: ['no-caption']
 
 markdown_extensions:
   - admonition