Skip to content

Commit

Permalink
Merge pull request #54 from mindkomm/1.x-lazy-src-for-picture
Browse files Browse the repository at this point in the history
  • Loading branch information
@gchtr
gchtr authored Jan 6, 2023
2 parents a7f592a + 9eca0dd commit 57ec97c
Show file tree
Hide file tree
Showing 4 changed files with 142 additions and 41 deletions.
5 changes: 4 additions & 1 deletion functions-images.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ function get_timber_image_description( $timber_image ) {
* @param string $size Size key of the image to return the
* attributes for.
* @param array $args Optional. Array of options. See
* get_timber_image_responsive() for possible
* get_timber_image_responsive_src() for possible
* options.
*
* @return bool|array An associative array of HTML attributes. False if image can’t be found.
Expand Down Expand Up @@ -194,6 +194,9 @@ function get_timber_image_attributes_responsive( $timber_image, $size, $args = a
*
* @param int|\Timber\Image $timber_image Instance of Timber\Image or Attachment ID.
* @param string|array $size Timmy image size.
* @param array $args Optional. Array of options. See
* get_timber_image_responsive_src() for possible
* options.
*
* @return false|string
*/
Expand Down
84 changes: 55 additions & 29 deletions lib/Image.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,10 @@ public function picture_responsive( $args = [] ) {
* Default arguments for image markup.
*/
$default_args = [
'loading' => 'lazy',
'loading' => 'lazy',
'lazy_srcset' => false,
'lazy_src' => false,
'lazy_sizes' => false,
];

$args = wp_parse_args( $args, $default_args );
Expand All @@ -232,14 +235,16 @@ public function picture_responsive( $args = [] ) {
'type' => 'image/webp',
];

$source_attributes = array_merge( $source_attributes, $this->responsive_attributes( [
'attr_width' => false,
'attr_height' => false,
'src_default' => false,
'loading' => false,
'webp' => true,
'is_source' => true,
] ) );
$source_attributes = array_merge( $source_attributes, $this->responsive_attributes(
array_merge( $args, [
'attr_width' => false,
'attr_height' => false,
'src_default' => false,
'loading' => false,
'webp' => true,
'is_source' => true,
] )
) );

$html .= '<source' . Helper::get_attribute_html( $source_attributes ) . '>' . PHP_EOL;
}
Expand All @@ -248,14 +253,16 @@ public function picture_responsive( $args = [] ) {
'type' => $mime_type,
];

$source_attributes = array_merge( $source_attributes, $this->responsive_attributes( [
'attr_width' => false,
'attr_height' => false,
'src_default' => false,
'loading' => false,
'webp' => false,
'is_source' => true,
] ) );
$source_attributes = array_merge( $source_attributes, $this->responsive_attributes(
array_merge( $args, [
'attr_width' => false,
'attr_height' => false,
'src_default' => false,
'loading' => false,
'webp' => false,
'is_source' => true,
] )
) );

$html .= '<source' . Helper::get_attribute_html( $source_attributes ) . '>' . PHP_EOL;

Expand Down Expand Up @@ -283,6 +290,8 @@ public function picture_fallback_image( $args = [] ) {
'loading' => $this->loading( $args['loading'] ),
];

$fallback_attributes = $this->add_data_attributes( $fallback_attributes, $args );

return '<img' . Helper::get_attribute_html( $fallback_attributes ) . '>';
}

Expand Down Expand Up @@ -774,9 +783,35 @@ public function responsive_attributes( $args = [] ) {
// Lazy-loading.
$attributes['loading'] = $this->loading( $args['loading'] );

/**
* Maybe rename attributes with "data-" prefixes.
*/
// Maybe update attributes with "data-" prefixes.
$attributes = $this->add_data_attributes( $attributes, $args );

// Maybe rename src attribute to srcset
if ( $args['is_source'] && ! empty( $attributes['src'] ) ) {
$attributes['srcset'] = $attributes['src'];
unset( $attributes['src'] );
}

// Remove any falsy attributes.
$attributes = array_filter( $attributes );

return $attributes;
}

/**
* Adds "data-" attributes for usage with JavaScript lazy loading libraries.
*
* @param array $args Args.
* @param array $attributes Updated attributes.
*
* @return mixed
*/
protected function add_data_attributes( array $attributes, array $args ) {
$args = wp_parse_args( $args, [
'lazy_srcset' => false,
'lazy_src' => false,
'lazy_sizes' => false,
] );

if ( $args['lazy_srcset'] && ! empty( $attributes['srcset'] ) ) {
$attributes['data-srcset'] = $attributes['srcset'];
Expand All @@ -793,15 +828,6 @@ public function responsive_attributes( $args = [] ) {
unset( $attributes['sizes'] );
}

// Maybe rename src attribute to srcset
if ( $args['is_source'] && ! empty( $attributes['src'] ) ) {
$attributes['srcset'] = $attributes['src'];
unset( $attributes['src'] );
}

// Remove any falsy attributes.
$attributes = array_filter( $attributes );

return $attributes;
}

Expand Down
43 changes: 37 additions & 6 deletions tests/test-picture.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,11 @@ public function test_picture() {
] );
$result = get_timber_picture_responsive( $attachment, 'picture' );

$expected = '<source srcset="' . $this->get_upload_url() . '/test-560x0-c-default.jpg 560w, ' . $this->get_upload_url() . '/test-1400x0-c-default.jpg 1400w" sizes="100vw">' . PHP_EOL .
'<img src="' . $this->get_upload_url() . '/test-1400x0-c-default.jpg" width="1400" height="933" alt="Burrito Wrap" loading="lazy">';
$expected = sprintf(
'<source srcset="%1$s/test-560x0-c-default.jpg 560w, %1$s/test-1400x0-c-default.jpg 1400w" sizes="100vw">%2$s<img src="%1$s/test-1400x0-c-default.jpg" width="1400" height="933" alt="Burrito Wrap" loading="lazy">',
$this->get_upload_url(),
PHP_EOL
);

$this->assertEquals( $expected, $result );
}
Expand All @@ -21,8 +24,11 @@ public function test_picture_loading_false() {
$attachment = $this->create_image();
$result = get_timber_picture_responsive( $attachment, 'picture', [ 'loading' => false ] );

$expected = '<source srcset="' . $this->get_upload_url() . '/test-560x0-c-default.jpg 560w, ' . $this->get_upload_url() . '/test-1400x0-c-default.jpg 1400w" sizes="100vw">' . PHP_EOL .
'<img src="' . $this->get_upload_url() . '/test-1400x0-c-default.jpg" width="1400" height="933" alt="">';
$expected = sprintf(
'<source srcset="%1$s/test-560x0-c-default.jpg 560w, %1$s/test-1400x0-c-default.jpg 1400w" sizes="100vw">%2$s<img src="%1$s/test-1400x0-c-default.jpg" width="1400" height="933" alt="">',
$this->get_upload_url(),
PHP_EOL
);

$this->assertEquals( $expected, $result );
}
Expand All @@ -33,8 +39,33 @@ public function test_picture_loading_false_timmy_image() {
$image = Timmy::get_image( $attachment->ID, 'picture' );
$result = $image->picture_responsive( [ 'loading' => false ] );

$expected = '<source srcset="' . $this->get_upload_url() . '/test-560x0-c-default.jpg 560w, ' . $this->get_upload_url() . '/test-1400x0-c-default.jpg 1400w" sizes="100vw">' . PHP_EOL .
'<img src="' . $this->get_upload_url() . '/test-1400x0-c-default.jpg" width="1400" height="933" alt="">';
$expected = sprintf(
'<source srcset="%1$s/test-560x0-c-default.jpg 560w, %1$s/test-1400x0-c-default.jpg 1400w" sizes="100vw">%2$s<img src="%1$s/test-1400x0-c-default.jpg" width="1400" height="933" alt="">',
$this->get_upload_url(),
PHP_EOL
);

$this->assertEquals( $expected, $result );
}

public function test_picture_with_lazy_attributes() {
$alt_text = 'Burrito Wrap';
$attachment = $this->create_image( [
'alt' => $alt_text,
'description' => 'Burritolino',
] );

$result = get_timber_picture_responsive( $attachment, 'picture', [
'lazy_srcset' => true,
'lazy_src' => true,
'lazy_sizes' => true,
] );

$expected = sprintf(
'<source data-srcset="%1$s/test-560x0-c-default.jpg 560w, %1$s/test-1400x0-c-default.jpg 1400w" data-sizes="100vw">%2$s<img width="1400" height="933" alt="Burrito Wrap" loading="lazy" data-src="%1$s/test-1400x0-c-default.jpg">',
$this->get_upload_url(),
PHP_EOL
);

$this->assertEquals( $expected, $result );
}
Expand Down
51 changes: 46 additions & 5 deletions tests/test-webp.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,32 @@ public function test_picture_webp() {
] );
$result = get_timber_picture_responsive( $attachment, 'picture-webp' );

$expected = '<source type="image/webp" srcset="' . $this->get_upload_url() . '/test-560x0-c-default.webp 560w, ' . $this->get_upload_url() . '/test-1400x0-c-default.webp 1400w" sizes="100vw">' . PHP_EOL . '<source type="image/jpeg" srcset="' . $this->get_upload_url() . '/test-560x0-c-default.jpg 560w, ' . $this->get_upload_url() . '/test-1400x0-c-default.jpg 1400w" sizes="100vw">' . PHP_EOL . '<img src="' . $this->get_upload_url() . '/test-1400x0-c-default.jpg" width="1400" height="933" alt="Burrito Wrap" loading="lazy">';
$expected = sprintf(
'<source type="image/webp" srcset="%1$s/test-560x0-c-default.webp 560w, %1$s/test-1400x0-c-default.webp 1400w" sizes="100vw">%2$s<source type="image/jpeg" srcset="%1$s/test-560x0-c-default.jpg 560w, %1$s/test-1400x0-c-default.jpg 1400w" sizes="100vw">%2$s<img src="%1$s/test-1400x0-c-default.jpg" width="1400" height="933" alt="Burrito Wrap" loading="lazy">',
$this->get_upload_url(),
PHP_EOL
);

$this->assertEquals( $expected, $result );
}

public function test_picture_webp_with_lazy_attributes() {
$alt_text = 'Burrito Wrap';
$attachment = $this->create_image( [
'alt' => $alt_text,
'description' => 'Burritolino',
] );
$result = get_timber_picture_responsive( $attachment, 'picture-webp', [
'lazy_srcset' => true,
'lazy_src' => true,
'lazy_sizes' => true,
] );

$expected = sprintf(
'<source type="image/webp" data-srcset="%1$s/test-560x0-c-default.webp 560w, %1$s/test-1400x0-c-default.webp 1400w" data-sizes="100vw">%2$s<source type="image/jpeg" data-srcset="%1$s/test-560x0-c-default.jpg 560w, %1$s/test-1400x0-c-default.jpg 1400w" data-sizes="100vw">%2$s<img width="1400" height="933" alt="Burrito Wrap" loading="lazy" data-src="%1$s/test-1400x0-c-default.jpg">',
$this->get_upload_url(),
PHP_EOL
);

$this->assertEquals( $expected, $result );
}
Expand All @@ -42,7 +67,11 @@ public function test_picture_webp_with_small_image() {
] );
$result = get_timber_picture_responsive( $attachment, 'picture-webp-with-small-image' );

$expected = '<source type="image/webp" srcset="' . $this->get_upload_url() . '/test-200px-200x0-c-default.webp">' . PHP_EOL . '<source type="image/jpeg" srcset="' . $this->get_upload_url() . '/test-200px-200x0-c-default.jpg">' . PHP_EOL . '<img src="' . $this->get_upload_url() . '/test-200px-200x0-c-default.jpg" width="200" height="133" alt="" loading="lazy">';
$expected = sprintf(
'<source type="image/webp" srcset="%1$s/test-200px-200x0-c-default.webp">%2$s<source type="image/jpeg" srcset="%1$s/test-200px-200x0-c-default.jpg">%2$s<img src="%1$s/test-200px-200x0-c-default.jpg" width="200" height="133" alt="" loading="lazy">',
$this->get_upload_url(),
PHP_EOL
);

$this->assertEquals( $expected, $result );
}
Expand All @@ -53,7 +82,11 @@ public function test_picture_webp_with_small_image_square() {
] );
$result = get_timber_picture_responsive( $attachment, 'picture-webp-resize-square' );

$expected = '<source type="image/webp" srcset="' . $this->get_upload_url() . '/test-200px-133x133-c-default.webp">' . PHP_EOL . '<source type="image/jpeg" srcset="' . $this->get_upload_url() . '/test-200px-133x133-c-default.jpg">' . PHP_EOL . '<img src="' . $this->get_upload_url() . '/test-200px-133x133-c-default.jpg" width="133" height="133" alt="" loading="lazy">';
$expected = sprintf(
'<source type="image/webp" srcset="%1$s/test-200px-133x133-c-default.webp">%2$s<source type="image/jpeg" srcset="%1$s/test-200px-133x133-c-default.jpg">%2$s<img src="%1$s/test-200px-133x133-c-default.jpg" width="133" height="133" alt="" loading="lazy">',
$this->get_upload_url(),
PHP_EOL
);

$this->assertEquals( $expected, $result );
}
Expand All @@ -66,7 +99,11 @@ public function test_picture_webp_args_array_with_srcset_descriptors() {
'webp' => true,
] );

$expected = '<source type="image/webp" srcset="' . $this->get_upload_url() . '/test-260x0-c-default.webp 1x, ' . $this->get_upload_url() . '/test-520x0-c-default.webp 2x">' . PHP_EOL . '<source type="image/jpeg" srcset="' . $this->get_upload_url() . '/test-260x0-c-default.jpg 1x, ' . $this->get_upload_url() . '/test-520x0-c-default.jpg 2x">' . PHP_EOL . '<img src="' . $this->get_upload_url() . '/test-260x0-c-default.jpg" width="260" height="173" alt="" loading="lazy">';
$expected = sprintf(
'<source type="image/webp" srcset="%1$s/test-260x0-c-default.webp 1x, %1$s/test-520x0-c-default.webp 2x">%2$s<source type="image/jpeg" srcset="%1$s/test-260x0-c-default.jpg 1x, %1$s/test-520x0-c-default.jpg 2x">%2$s<img src="%1$s/test-260x0-c-default.jpg" width="260" height="173" alt="" loading="lazy">',
$this->get_upload_url(),
PHP_EOL
);

$this->assertEquals( $expected, $result );
}
Expand All @@ -81,7 +118,11 @@ public function test_picture_webp_args_array_with_srcset_descriptors_timmy_image

$result = $image->picture_responsive();

$expected = '<source type="image/webp" srcset="' . $this->get_upload_url() . '/test-260x0-c-default.webp 1x, ' . $this->get_upload_url() . '/test-520x0-c-default.webp 2x">' . PHP_EOL . '<source type="image/jpeg" srcset="' . $this->get_upload_url() . '/test-260x0-c-default.jpg 1x, ' . $this->get_upload_url() . '/test-520x0-c-default.jpg 2x">' . PHP_EOL . '<img src="' . $this->get_upload_url() . '/test-260x0-c-default.jpg" width="260" height="173" alt="" loading="lazy">';
$expected = sprintf(
'<source type="image/webp" srcset="%1$s/test-260x0-c-default.webp 1x, %1$s/test-520x0-c-default.webp 2x">%2$s<source type="image/jpeg" srcset="%1$s/test-260x0-c-default.jpg 1x, %1$s/test-520x0-c-default.jpg 2x">%2$s<img src="%1$s/test-260x0-c-default.jpg" width="260" height="173" alt="" loading="lazy">',
$this->get_upload_url(),
PHP_EOL
);

$this->assertEquals( $expected, $result );
}
Expand Down

0 comments on commit 57ec97c

Please sign in to comment.