Improve media embed templates

_includes/image.html

@@ -1,8 +1,24 @@
 <figure class="image">
-  <a href="{{ include.url }}"><img class="image" src="{{ include.thumbnail | default: include.url }}" /></a>
-{% if include.description %}
-  <figcaption><div class="imagecaption" markdown="block">
-  {{ include.description }}
-  </div></figcaption>
-{% endif %}
+{%- assign thumbnail = include.thumbnail | default: include.url -%}
+{%- assign alt = include.alt | default: include.description | normalize_whitespace -%}
+{%- if include.url -%}
+  <a href="{{ include.url }}"
+  {% if alt %}
+    title="{{ alt }}"
+  {% endif %}
+    >
+{%- endif -%}
+    <img class="image" src="{{ thumbnail }}"
+{%- if alt %}
+      alt="{{ alt }}"
+{%- endif -%}
+      />
+{%- if include.url -%}
+  </a>
+{%- endif -%}
+{%- if include.description -%}
+  <figcaption class="image-caption">
+    {{- include.description | markdownify -}}
+  </figcaption>
+{%- endif -%}
 </figure>

_includes/imageheading.html

@@ -1,11 +1,17 @@
 {{ include.separator | default: "<hr />" }}
 <figure class="image">
-  <img src="{{ include.url }}" class="heading"
+{%- if include.heading %}
+  <a name="{{ include.heading | slugify }}">
+{%- endif %}
+    <img src="{{ include.url }}" class="heading"
 {% if include.heading %}
-alt="{{ include.heading }}"
+      alt="{{ include.heading }}"
 {% endif %}
 {% if include.tooltip or include.heading %}
-title="{{ include.tooltip | default: include.heading }}"
+      title="{{ include.tooltip | default: include.heading }}"
 {% endif %}
-/>
+      />
+{%- if include.heading %}
+  </a>
+{%- endif %}
 </figure>

_includes/youtube.html

@@ -1,8 +1,10 @@
-<div class="image">
-  <iframe class="youtube" src="https://www.youtube-nocookie.com/embed/{{ include.video }}"><a href="https://www.youtube.com/watch?v={{ include.video }}">[Watch YouTube video]</a></iframe>
-{% if include.description %}
-  <div class="imagecaption" markdown="block">
-  {{ include.description }}
+<figure class="youtube">
+  <div class="youtube">
+    <iframe class="youtube" src="https://www.youtube-nocookie.com/embed/{{ include.video }}"><a href="https://www.youtube.com/watch?v={{ include.video }}">[Watch YouTube video]</a></iframe>
   </div>
-{% endif %}
-</div>
+{%- if include.description -%}
+  <figcaption class="image-caption">
+    {{- include.description | markdownify -}}
+  </figcaption>
+{%- endif -%}
+</figure>