Skip to content

Commit

Permalink
Add responsive_src() and responsive() methods
Browse files Browse the repository at this point in the history
  • Loading branch information
@gchtr
gchtr committed Apr 6, 2023
1 parent c238af2 commit 4449628
Show file tree
Hide file tree
Showing 7 changed files with 109 additions and 16 deletions.
4 changes: 2 additions & 2 deletions functions-images.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
46 changes: 34 additions & 12 deletions lib/Image.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion tests/assets/sveegee.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions tests/assets/svg-without-viewbox-width-height.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion tests/assets/svg-without-viewbox.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 48 additions & 0 deletions tests/test-functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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( [
Expand Down Expand Up @@ -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' );
Expand Down Expand Up @@ -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();

Expand Down
22 changes: 22 additions & 0 deletions tests/test-svg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
}
}

0 comments on commit 4449628

Please sign in to comment.