sample files from a smithsonian project

templates/media/media--audio.html.twig

@@ -0,0 +1,8 @@
+{% set attributes = attributes.setAttribute('aria-label', name) %}
+
+{% include "@components/media/media--audio.twig" with {
+  audio: content.field_media_audio_file|field_value,
+  thumbnail: content.field_media_image|field_value,
+  modifier_classes: attributes.class|join(' ')|trim,
+  drupal_attributes: attributes|without('class'),
+}%}

templates/media/media--image--gallery.html.twig

@@ -0,0 +1 @@
+{{ content.field_media_image|field_value }}

templates/media/media--image.html.twig

@@ -0,0 +1,7 @@
+{% set attributes = attributes.setAttribute('aria-label', name) %}
+
+{% include "@components/media/media--image.twig" with {
+  image: content.field_media_image|field_value,
+  modifier_classes: attributes.class|join(' ')|trim,
+  drupal_attributes: attributes|without('class'),
+}%}

templates/media/responsive-image.html.twig

@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a responsive image.
+ *
+ * Available variables:
+ * - sources: The attributes of the <source> tags for this <picture> tag.
+ * - img_element: The controlling image, with the fallback image in srcset.
+ * - output_image_tag: Whether or not to output an <img> tag instead of a
+ *   <picture> tag.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_responsive_image()
+ *
+ * @ingroup themeable
+ */
+#}
+{% include "@elements/images/image/responsive-image.twig" %}