Issue #10 - Add attachment template to display full size screenshots

block-template-parts/attachment-image.html

@@ -0,0 +1,11 @@
+<!-- wp:post-title {"level": 1 } /-->
+<!-- wp:html -->
+<div class="featured">
+[bw_field featured]
+</div>
+<!-- /wp:html -->
+
+<!-- wp:html -->
+[bw_fields file_size ]
+[bw_fields dimensions ]
+<!-- /wp:html -->

block-templates/attachment.html

@@ -1,8 +1,23 @@
 <!-- wp:html -->
 <div class="WP_DEBUG">attachment.html</div>
 <!-- /wp:html -->
-<!-- wp:post-featured-image /-->
 
-<!-- wp:post-content /-->
+<!-- wp:template-part {"slug":"attachment-image","theme":"thisis"} /-->
 
-<!-- wp:template-part {"slug":"footer","theme":"thisis","style":{"color":{"background":"#f7f7f7"}},"textColor":"foreground","layout":{"inherit":true}} /-->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:post-title {"backgroundColor":"vivid-cyan-blue","textColor":"background"} /-->
+
+    <!-- wp:heading {"level":3} -->
+    <h3>Caption</h3>
+    <!-- /wp:heading -->
+
+    <!-- wp:post-excerpt /-->
+
+    <!-- wp:heading {"level":3} -->
+    <h3>Description</h3>
+    <!-- /wp:heading -->
+
+    <!-- wp:post-content /--></div>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","theme":"thisis","style":{"color":{"background":"#f7f7f7"}},"textColor":"foreground","layout":{"inherit":true}} /-->

style.css

@@ -85,3 +85,13 @@ div.wp-site-blocks > div.WP_DEBUG:first-of-type:hover {
     color: black;
 
 }
+
+
+.attachment h1.wp-block-post-title { position: absolute; z-index: 100; border: 1px solid green; width: 100%; height: 45px;
+margin: 0px; padding: 35px 0px 19px 30%; opacity: 0.8; background-color: #0693e3; color: #ffffff;
+text-shadow: 1px 1px #333333;}
+
+/**
+ Style the featured image - from [bw_field featured] to max width 100%
+ */
+img.featured { max-width: 100%; border-bottom: 1px solid grey; top: 40px; }