Bug/all images use flexbox

assets/scripts/prince-print-page.js

@@ -41,6 +41,10 @@ function pmb_continue_image_resizing(){
 
 /**
  * Grabs a "pmb-dynamic-resize" element inside here and resizes it and returns it.
+ * Note: pmb-dynamic-resize CSS class could be on:
+ * * the image itself (ClassicPress image with no caption, regardless of floating)
+ * * the figure wrapping the image (ClassicPress with caption, regardless of floating; Gutenberg not floating)
+ * * the div wrapping the figure wrapping the image (Gutenberg floating)
  * (If none are found, returns null)
  * @param element
  * @return boolean
@@ -55,7 +59,7 @@ function pmb_resize_an_image_inside(element){
     if(typeof a_dynamic_resize_block === 'undefined'){
         return null;
     }
-    // when images are floating, the block had a div (with no height) because its contents are floating
+    // when Gutenberg images are floating, the block had a div (with no height) because its contents are floating
     // in that case we want to resize the figure inside the block. So check if there's a figure inside it
     var figure_is_floating = true;
     var figure_to_resize = a_dynamic_resize_block.getElementsByTagName("figure")[0];
@@ -65,6 +69,15 @@ function pmb_resize_an_image_inside(element){
         figure_to_resize = a_dynamic_resize_block;
         figure_is_floating = false;
     }
+
+    // check the image itself isn't what had pmb-dynamic-resize (like in ClassicPress images with no captions)
+    var figure_image = null;
+    if( figure_to_resize.tagName === 'IMG'){
+        figure_image = figure_to_resize;
+    } else {
+        figure_image = figure_to_resize.getElementsByTagName('img')[0];
+    }
+
     // For floating images we need to also set the block's width (I can't figure out how to get CSS to set the width automatically)
     // so for that we need to figure out how much the image inside the figure got resized (non-trivial if there's a caption).
     var figure_image = figure_to_resize.getElementsByTagName('img')[0];

assets/scripts/print-page-beautifier-functions.js

@@ -26,6 +26,11 @@ function pmb_fix_protocols(){
         element.setAttribute("href", location.protocol + element.getAttribute('href'));
     });
 
+    // wrap the images again in order for flexbox layout to fill the space properly.
+    // especially when the images take up the full page height (the only want to have the contents of a figure
+    // respect the figure's height is with flexbox)
+    jQuery('.wp-block-image img, .wp-caption img').wrap('<div class="pmb-figure-image-wrapper"></div>');
+
     var correct_protocol = window.location.protocol;
     var incorrect_protocol = 'http:';
     if( correct_protocol === 'http:'){
@@ -227,8 +232,6 @@ function pmb_mark_for_dynamic_resize(min_image_size){
         }
     });
 
-    // wrap the images again in order for flexbox layout to fill the space properly.
-    jQuery('.pmb-dynamic-resize img').wrap('<div class="pmb-dynamic-resized-image-wrapper"></div>');
     // tell JetPack to not resize these images, as we may want a bigger size.
     jQuery('.pmb-dynamic-resize img.wp-image-1108[src*="?resize"]').each(function(i,element){var jqe = jQuery(element); jqe.prop('src',jqe.prop('src').substring(0, src.indexOf('?')))})
 }

assets/styles/pmb-pro-pdf.css

@@ -14,25 +14,32 @@ h1,h2,h3,h4,h5,h6{
 .pmb-depth-3:not([id*='/pmb-']) h1.pmb-title{prince-bookmark-level: 4}
 .pmb-depth-4:not([id*='/pmb-']) h1.pmb-title{prince-bookmark-level: 5}
 
+
 .pmb-posts .pmb-dynamic-resize img{
     width:auto;
 }
-figure.pmb-dynamic-resized, .wp-block-image.pmb-dynamic-resized figure{
+figure.wp-block-image, .wp-block-image figure, figure.wp-caption{
     display:flex;
     flex-direction:column;
 }
 
-.pmb-dynamic-resized-image-wrapper{
+.pmb-figure-image-wrapper{
     overflow:auto;
 }
-.pmb-dynamic-resized .pmb-dynamic-resized-image-wrapper img{
+.wp-block-image .pmb-figure-image-wrapper img, .wp-caption .pmb-figure-image-wrapper img{
     height:100%;
     max-height:100%;
     width:auto;
     display:block;
     margin-right:auto;
     margin-left:auto;
 }
+/*
+Don't let image blocks take up more than the max height
+*/
+.wp-block-image, figure{
+    max-height:100vh;
+}
 
 /**
 * Use this style to make images take up the full space and then clip it

inc/design_functions.php

@@ -50,7 +50,7 @@ function pmb_design_styles(\PrintMyBlog\orm\entities\Design $design){
 			$css .= $combined_selector . '{float:prince-snap unless-fit;}';
 			break;
         case 'dynamic-resize':
-            $css .= '.pmb-posts .pmb-dynamic-resize img{height:' . $design->getSetting('dynamic_resize_min') . 'px;}';
+            $css .= '.pmb-posts .pmb-dynamic-resize img, .pmb-posts img.pmb-dynamic-resize{height:' . $design->getSetting('dynamic_resize_min') . 'px !important;}';
 		case 'default':
 		default:
 			// leave alone