Add alt text to my image in the about page and make it scale with content width

content/about/index.md

@@ -2,9 +2,13 @@
 title: "Hi! 👋🏻"
 date: 2022-09-03T12:14:32-07:00
 draft: true
+resources:
+  - name: me
+    src: me.jpeg
 ---
 
-{{< circular_image name=me.jpeg class=float-right width=200 >}}
+{{< circular_image id=me name=me class="float-right" width=200
+  alt="A photo of me, wearing a hat, standing in front of a stone background">}}
 
 I'm Eryn. My pronouns are [she/her][p]. I'm a queer trans woman. I live in San
 Francisco, CA, on the unceded ancestral lands of the Ramaytush Ohlone people,

content/about/style.css

@@ -0,0 +1,4 @@
+
+img#me {
+    width: min(200px, 25%);
+}

layouts/shortcodes/circular_image.html

@@ -1,5 +1,12 @@
-{{ $img := (.Page.Resources.GetMatch (.Get "name")) }}
+{{- $img := (.Page.Resources.GetMatch (.Get "name")) -}}
-{{ $classes := .Get "class" }}
+{{- $id := .Get "id" -}}
-{{ $width := .Get "width" }}
+{{- $classes := .Get "class" -}}
-{{ $resized_img := $img.Resize (printf "%dx%d" $width $width) }}
+{{- $alt := .Get "alt" -}}
-<img class="circular {{ $classes }}" src="{{ $img.RelPermalink }}" width="{{ $width }}" height="{{ $width }}">
+{{- $width := .Get "width" -}}
+{{- $resized_img := $img.Resize (printf "%dx%d" $width $width) -}}
+<img
+  {{ with $id }}id="{{ . }}"{{ end }}
+  class="circular{{ with $classes }} {{ . }}{{ end }}"
+  src="{{ $img.RelPermalink }}"
+  {{ with $alt }}alt="{{ . }}"{{ end }}
+  width="{{ $width }}" height="{{ $width }}">