Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix wide image to contain in content #1281

Merged
merged 3 commits into from
Aug 7, 2018
Merged

Fix wide image to contain in content #1281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
799fba6
Set an inline `width: auto` for <figure> that has `width: fit-content`.
Jul 24, 2018
9d29f52
Test wider image conditions.
Jul 24, 2018
95e33e8
Explicitly indicate nodes as DOMElement instances; de-dupe CSS
westonruter Jul 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 36 additions & 2 deletions includes/sanitizers/class-amp-img-sanitizer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@ private function adjust_and_replace_nodes_in_array_map( $node_lists ) {
/**
* Make final modifications to DOMNode
*
* @param DOMNode $node The DOMNode to adjust and replace.
* @param DOMElement $node The DOMNode to adjust and replace.
*/
private function adjust_and_replace_node( $node ) {

Expand Down Expand Up @@ -257,6 +257,7 @@ private function adjust_and_replace_node( $node ) {
$new_node = AMP_DOM_Utils::create_node( $this->dom, $new_tag, $new_attributes );
$new_node = $this->handle_centering( $new_node );
$node->parentNode->replaceChild( $new_node, $node );
$this->add_auto_width_to_figure( $new_node );
}

/**
Expand All @@ -268,7 +269,7 @@ private function adjust_and_replace_node( $node ) {
*/
private function maybe_add_lightbox_attributes( $attributes, $node ) {
$parent_node = $node->parentNode;
if ( 'figure' !== $parent_node->tagName ) {
if ( ! ( $parent_node instanceof DOMElement ) || 'figure' !== $parent_node->tagName ) {
return $attributes;
}

Expand Down Expand Up @@ -339,4 +340,37 @@ public function handle_centering( $node ) {

return $figure;
}

/**
* Add an inline style to set the `<figure>` element's width to `auto` instead of `fit-content`.
*
* @since 1.0
* @see https://github.com/Automattic/amp-wp/issues/1086
*
* @param DOMElement $node The DOMNode to adjust and replace.
*/
protected function add_auto_width_to_figure( $node ) {
$figure = $node->parentNode;
if ( ! ( $figure instanceof DOMElement ) || 'figure' !== $figure->tagName ) {
return;
}

$class = $figure->getAttribute( 'class' );
// Target only the <figure> with a 'wp-block-image' class attribute.
if ( false === strpos( $class, 'wp-block-image' ) ) {
return;
}

// Target only <figure> without a 'is-resized' class attribute.
if ( false !== strpos( $class, 'is-resized' ) ) {
return;
}

$new_style = 'width: auto;';
if ( $figure->hasAttribute( 'style' ) ) {
$figure->setAttribute( 'style', $new_style . $figure->getAttribute( 'style' ) );
} else {
$figure->setAttribute( 'style', $new_style );
}
}
}
25 changes: 25 additions & 0 deletions tests/test-amp-img-sanitizer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,31 @@ public function get_data() {
'<figure data-amp-lightbox="true"><img src="http://placehold.it/100x100" width="100" height="100" data-foo="bar" role="button" tabindex="0" /></figure>',
'<figure data-amp-lightbox="true"><amp-img src="http://placehold.it/100x100" width="100" height="100" data-foo="bar" role="button" tabindex="0" data-amp-lightbox="" on="tap:amp-image-lightbox" class="amp-wp-enforced-sizes" layout="intrinsic"></amp-img></figure><amp-image-lightbox id="amp-image-lightbox" layout="nodisplay" data-close-button-aria-label="Close"></amp-image-lightbox>',
),

'wide_image' => array(
'<figure class="wp-block-image"><img src="http://placehold.it/580x300" alt="Image Alignment 580x300" class="wp-image-967" /></figure>',
'<figure class="wp-block-image" style="width: auto;"><amp-img src="http://placehold.it/580x300" alt="Image Alignment 580x300" class="wp-image-967 amp-wp-enforced-sizes" width="580" height="300" layout="intrinsic"></amp-img></figure>',
),

'wide_image_center_aligned' => array(
'<figure class="wp-block-image aligncenter"><img src="http://placehold.it/580x300" alt="Image Alignment 580x300" class="wp-image-967" /></figure>',
'<figure class="wp-block-image aligncenter" style="width: auto;"><amp-img src="http://placehold.it/580x300" alt="Image Alignment 580x300" class="wp-image-967 amp-wp-enforced-sizes" width="580" height="300" layout="intrinsic"></amp-img></figure>',
),

'wide_image_left_aligned_custom_style' => array(
'<figure class="wp-block-image alignleft" style="border:solid 1px red;"><img src="http://placehold.it/580x300" alt="Image Alignment 580x300" class="wp-image-967" /></figure>',
'<figure class="wp-block-image alignleft" style="width: auto;border:solid 1px red;"><amp-img src="http://placehold.it/580x300" alt="Image Alignment 580x300" class="wp-image-967 amp-wp-enforced-sizes" width="580" height="300" layout="intrinsic"></amp-img></figure>',
),

'wide_image_right_aligned' => array(
'<figure class="wp-block-image alignright"><img src="http://placehold.it/580x300" alt="Image Alignment 580x300" class="wp-image-967" /></figure>',
'<figure class="wp-block-image alignright" style="width: auto;"><amp-img src="http://placehold.it/580x300" alt="Image Alignment 580x300" class="wp-image-967 amp-wp-enforced-sizes" width="580" height="300" layout="intrinsic"></amp-img></figure>',
),

'wide_image_is_resized' => array(
'<figure class="wp-block-image is-resized"><img src="http://placehold.it/580x300" alt="Image Alignment 580x300" class="wp-image-967" /></figure>',
'<figure class="wp-block-image is-resized"><amp-img src="http://placehold.it/580x300" alt="Image Alignment 580x300" class="wp-image-967 amp-wp-enforced-sizes" width="580" height="300" layout="intrinsic"></amp-img></figure>',
),
);
}

Expand Down