diff --git a/functions-images.php b/functions-images.php index 79b77fc..baabbe6 100644 --- a/functions-images.php +++ b/functions-images.php @@ -239,8 +239,8 @@ function get_timber_picture_fallback_image( $timber_image, $size ) { * get_timber_image_responsive_src() for a list of args * that can be used. * - * @return string|false Image srcset, sizes, alt and title attributes. False if image can’t be - * found. + * @return string|false Image srcset, sizes, width, height and alt attributes. False if image can’t + * be found. */ function get_timber_image_responsive( $timber_image, $size, $args = array() ) { $image = Timmy::get_image( $timber_image, $size ); diff --git a/lib/Image.php b/lib/Image.php index a5d421b..6456186 100644 --- a/lib/Image.php +++ b/lib/Image.php @@ -235,6 +235,26 @@ public function src( $args = [] ) { return $src; } + /** + * Get srcset and size for the image. + * + * @return string Image srcset, sizes, width, height alt attributes. + */ + public function responsive_src( array $args = [] ) : string { + return Helper::get_attribute_html( $this->responsive_attributes( $args ) ); + } + + /** + * Get the responsive markup for the image. + * + * @return string Image srcset, sizes, width, height alt attributes. + */ + public function responsive( array $args = [] ) : string { + return Helper::get_attribute_html( array_merge( $this->responsive_attributes( $args ), [ + 'alt' => $this->alt(), + ] ) ); + } + /** * Gets the HTML markup for a responsive picture. * @@ -599,6 +619,8 @@ public function width() { if ( empty( $dimensions ) ) { return false; } + + // SVG image can scale, so we can always return the requested width. } else { list( $width ) = Helper::get_dimensions_upscale( $width, $height, [ 'upscale' => $this->upscale, @@ -634,18 +656,18 @@ public function height() { $height = Helper::get_height_from_width( $width, $dimensions['width'], $dimensions['height'] ); } } else { - $max_width = $this->max_width(); - $max_height = $this->max_height(); - - // Only calculate new height if height and width metadata was loaded. - if ( $max_width > 0 && $max_height > 0 ) { - $height = Helper::maybe_fix_height( $height, $width, $max_width, $max_height ); - list( , $height ) = Helper::get_dimensions_upscale( $width, $height, [ - 'upscale' => $this->upscale, - 'max_width' => $max_width, - 'max_height' => $max_height, - ] ); - } + $max_width = $this->max_width(); + $max_height = $this->max_height(); + + // Only calculate new height if height and width metadata was loaded. + if ( $max_width > 0 && $max_height > 0 ) { + $height = Helper::maybe_fix_height( $height, $width, $max_width, $max_height ); + list( , $height ) = Helper::get_dimensions_upscale( $width, $height, [ + 'upscale' => $this->upscale, + 'max_width' => $max_width, + 'max_height' => $max_height, + ] ); + } } return $height; diff --git a/tests/assets/sveegee.svg b/tests/assets/sveegee.svg index 852d15e..567f86e 100644 --- a/tests/assets/sveegee.svg +++ b/tests/assets/sveegee.svg @@ -1 +1 @@ -Zeichenfläche 1 \ No newline at end of file +SVG diff --git a/tests/assets/svg-without-viewbox-width-height.svg b/tests/assets/svg-without-viewbox-width-height.svg new file mode 100644 index 0000000..792fb73 --- /dev/null +++ b/tests/assets/svg-without-viewbox-width-height.svg @@ -0,0 +1 @@ +SVG diff --git a/tests/assets/svg-without-viewbox.svg b/tests/assets/svg-without-viewbox.svg index 6d8e7c0..7caa99f 100644 --- a/tests/assets/svg-without-viewbox.svg +++ b/tests/assets/svg-without-viewbox.svg @@ -1 +1 @@ -Zeichenfläche 1 +SVG diff --git a/tests/test-functions.php b/tests/test-functions.php index 366c29b..09d92dd 100644 --- a/tests/test-functions.php +++ b/tests/test-functions.php @@ -160,6 +160,23 @@ public function test_get_timber_image_responsive() { $this->assertEquals( $expected, $result ); } + public function test_get_timber_image_responsive_apiv1() { + $alt_text = 'Burrito Wrap'; + $attachment = $this->create_image( [ + 'alt' => $alt_text, + 'description' => 'Burritolino', + ] ); + + $image = Timmy::get_image( $attachment, 'large' ); + $result = $image->responsive(); + + $expected = sprintf( + ' srcset="%1$s/test-560x0-c-default.jpg 560w, %1$s/test-1400x0-c-default.jpg 1400w" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" sizes="100vw" width="1400" height="933" loading="lazy" alt="Burrito Wrap"', $this->get_upload_url() + ); + + $this->assertEquals( $expected, $result ); + } + public function test_get_timber_image_responsive_without_metadata() { $alt_text = 'Burrito Wrap'; $attachment = $this->create_image( [ @@ -279,6 +296,23 @@ public function test_get_timber_image_responsive_src_loading_false() { $this->assertEquals( $expected, $result ); } + public function test_get_timber_image_responsive_src_loading_false_apiv1() { + $attachment = $this->create_image(); + + $image = Timmy::get_image( $attachment, 'large' ); + + $result = $image->responsive_src( [ + 'loading' => false, + ] ); + + $expected = sprintf( + ' srcset="%1$s/test-560x0-c-default.jpg 560w, %1$s/test-1400x0-c-default.jpg 1400w" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" sizes="100vw" width="1400" height="933"', + $this->get_upload_url() + ); + + $this->assertEquals( $expected, $result ); + } + public function test_get_timber_image_full_with_gif() { $attachment = $this->create_image( [ 'file' => 'logo-small.gif' ] ); $result = get_timber_image( $attachment, 'full' ); @@ -363,6 +397,20 @@ public function test_get_timber_image_srcset_x_descriptors() { $this->assertEquals( $expected, $result ); } + public function test_get_timber_image_srcset_x_descriptors_apiv1() { + $attachment = $this->create_image(); + + $image = Timmy::get_image( $attachment, 'large-x-descriptors' ); + $result = $image->srcset(); + + $expected = sprintf( + '%1$s/test-560x0-c-default.jpg 560w, %1$s/test-1400x0-c-default.jpg 1x, %1$s/test-2100x0-c-default.jpg 1.5x', + $this->get_upload_url() + ); + + $this->assertEquals( $expected, $result ); + } + public function test_get_timber_image_width() { $attachment = $this->create_image(); diff --git a/tests/test-svg.php b/tests/test-svg.php index 10d11d9..d8439fd 100644 --- a/tests/test-svg.php +++ b/tests/test-svg.php @@ -55,4 +55,26 @@ public function test_svg_responsive_rect_without_viewbox() { $this->assertEquals( $image, $result ); } + + public function test_svg_responsive_rect_without_viewbox_responsive() { + $attachment = $this->create_image( [ 'file' => 'svg-without-viewbox.svg' ] ); + + $image = \Timmy\Timmy::get_image( $attachment, 'large' ); + $result = $image->responsive(); + + $image = ' src="' . $this->get_upload_url() . '/svg-without-viewbox.svg" loading="lazy" alt=""'; + + $this->assertEquals( $image, $result ); + } + + public function test_svg_responsive_rect_without_viewbox_but_width_and_height_responsive() { + $attachment = $this->create_image( [ 'file' => 'svg-without-viewbox-width-height.svg' ] ); + + $image = \Timmy\Timmy::get_image( $attachment, 'large' ); + $result = $image->responsive(); + + $image = ' src="' . $this->get_upload_url() . '/svg-without-viewbox-width-height.svg" width="1400" height="1400" loading="lazy" alt=""'; + + $this->assertEquals( $image, $result ); + } }