testing images

_posts/2024-01-01-test.md

@@ -10,52 +10,54 @@ Text after header appears in new line.
 At the end of the line above, add two blank spaces to make next sentence appear on a new line.
 
 ### Link types
-- Visible link uses angle brackets <http://google.com>
+- Visible link uses angle brackets <https://www.fabriziomusacchio.com/blog/2021-08-11-Minimal_Mistakes_Cheat_Sheet/#via-markdown>
 - [Embedded link: place text in brackets, URL in parentheses](http://google.com)
-- But an embedded link to an internal page or post on this site requires the full URL
+- Note: embedded link to an internal page or post on this site requires the full URL <https://jackdougherty.org/...>
 
 ### Code snippets
-Use single tic marks for short one-line `code` snippets
-
-For multi-line code snippets, use 3 tics and add 4 spaces after each line break
+- Single tic marks for short one-line `code` snippets
+- Use 3 tics and add 4 spaces after each line for multi-line code snippets
 ```
 ![sample](/images/sample-300x200.jpg)    
 <!-- for multi-line code, add four spaces after each line break -->
 ```
 
 ### Markdown formatted full-size image without caption
 pre-slash pathname; no baseurl because custom domain  
-
 ![sample](/images/sample-300x200.jpg)
 
-### Markdown with kramdown align and resize, optional text wrap, but too small on mobile
-![left-sample](/images/sample-300x200.jpg){: .align-left style="width:20%;"} Place text one space after the image and it will nicely wrap around. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-### TESTING revised more Markdown with kramdown
-[![styled-image](/images/2024/thank-you-lisa-from-jack.jpg){: .align-center style="width: 25%;"}](/images/2024/thank-you-lisa-from-jack.jpg "Title shown in gallery view")
-Styled caption with [link](https://handsondataviz.org).
-{: .align-center}
 
-### TESTING REVISED simpler version of above
+### TESTING Markdown with kramdown and css styling at 50 percent
 ![styled-image](/images/2024/thank-you-lisa-from-jack.jpg){: .align-center style="width: 50%;"}
-Styled caption with [link](https://handsondataviz.org).{: .align-center}
+Styled caption with [link](https://handsondataviz.org).{: .text-center}
+
+## above with wide jpg
+![styled-image](/images/sample-800x600.jpg){: .align-center style="width: 50%;"}
+Styled caption with [link](https://handsondataviz.org).{: .text-center}
+
+## above with wide png
+![styled-image](/images/sample-800x600.png){: .align-center style="width: 50%;"}
+Styled caption with [link](https://handsondataviz.org).{: .text-center}
+
+## above with wide 72 res png
+![styled-image](/images/sample-1000-res72.png){: .align-center style="width: 50%;"}
+Styled caption with [link](https://handsondataviz.org).{: .text-center}
 
-### NEW TEST Liquid image with align center, style 50%, caption, no slash  
-{% include figure image_path="images/sample-300x200.jpg" alt="sample image" caption="here's the caption" %}{: .align-center style="width:50%;"}
+## above with wide 144 res png
+![styled-image](/images/sample-1000-res144.png){: .align-center style="width: 50%;"}
+Styled caption with [link](https://handsondataviz.org).{: .text-center}
 
-### TESTING Liquid image with main.scss, align center, img-75, caption, no slash  
-{% include figure image_path="images/sample-300x200.jpg" alt="sample image" caption="here's the caption" %}{: .align-center .img-75}
+### TESTING Liquid with kramdown and css styling at 50 percent
+{% include figure image_path="images/2024/thank-you-lisa-from-jack.jpg" alt="sample image" caption="here's the caption" %}{: .align-center style="width:50%;"}
 
-### TESTING Liquid image aligned-right with caption, img-50, no slash, text wrap
-{% include figure image_path="images/sample-300x200.jpg" alt="sample image" caption="sample caption" %}{: .align-right .img-50} Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+## above with wide jpg
+{% include figure image_path="images/sample-800x600.jpg" alt="sample image" caption="here's the caption" %}{: .align-center style="width:50%;"}
 
+## above with wide png
+{% include figure image_path="images/sample-800x600.png" alt="sample image" caption="here's the caption" %}{: .align-center style="width:50%;"}
 
-### Read more
-<https://www.fabriziomusacchio.com/blog/2021-08-11-Minimal_Mistakes_Cheat_Sheet/#via-markdown>
+## above with wide 72 res png
+{% include figure image_path="images/sample-1000-res72.png" alt="sample image" caption="here's the caption" %}{: .align-center style="width:50%;"}
 
-### HTML styled clickable image with caption
-<figure style="width: 150px" class="align-center">
-  <a href="/images/sample-300x200.jpg" alt="sample image">
-  <img src="/images/sample-300x200.jpg" alt=""></a>
-  <figcaption>Image caption.</figcaption>
-</figure>
+## above with wide 144 res png
+{% include figure image_path="images/sample-1000-res144.png" alt="sample image" caption="here's the caption" %}{: .align-center style="width:50%;"}