Skip to content
This repository was archived by the owner on Apr 2, 2020. It is now read-only.

Proof of concept – using wp_get_attachment_image #71

Open
davisshaver wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Proof of concept – using wp_get_attachment_image #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
eab03d7
Proof of concept – using wp_get_attachment_image
Dec 17, 2015
760bd4d
PHPCS issues
Dec 17, 2015
d098e40
Add basic test for srcset
Dec 17, 2015
d23777b
Updates based on code review
Dec 17, 2015
95c6a26
Add back return if no src or attachment
Dec 17, 2015
2b39fae
Try to remove twenty sixteen filter
Dec 17, 2015
2d75a46
Try forcing Twenty Fifteen
Dec 17, 2015
77efa36
Don't use deprecated `get_current_theme()`
Dec 17, 2015
58e0219
Use array_diff_key instead of unset
Dec 17, 2015
950cacd
Add trailing comma to $attrs_for_removal
Dec 17, 2015
ac6be1c
Try setting theme inline test just for laughs
Dec 17, 2015
b906886
Remove hack which obviously didn't work
Dec 17, 2015
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
59 changes: 34 additions & 25 deletions inc/class-img-shortcode.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,37 +176,44 @@ public static function callback( $attr, $_null, $shortcode_tag ) {
* @param array Shortcode attributes, decoded and merged with defaults.
*/
$attr = apply_filters( 'img_shortcode_attrs', $attr );

$image_html = '<img ';

$image_classes = explode( ' ', $attr['classes'] );
$image_classes[] = 'size-' . $attr['size'];
$image_classes[] = $attr['align'];
$image_classes_string = trim( implode( ' ', $image_classes ) );

if ( isset( $attr['attachment'] ) ) {
$attrs_for_removal = array(
'caption' => null,
'attachment' => null,
'linkto' => null,
'url' => null,
'size' => null,
'align' => null,
'src' => null,
'classes' => null,
);
$attr_for_responsive = array_diff_key( $attr, $attrs_for_removal );
$attr_for_responsive['class'] = $image_classes_string;
$image_html = wp_get_attachment_image( $attr['attachment'], $attr['size'], false, $attr_for_responsive );
} else if ( ! empty( $attr['src'] ) ) {
$image_html = '<img ';

$image_attr = array(
'alt' => $attr['alt'],
'class' => trim( implode( ' ', $image_classes ) ),
);
$image_attr = array(
'alt' => $attr['alt'],
'class' => $image_classes_string,
'src' => esc_url( $attr['src'] ),
);
Copy link
Contributor

@goldenapples goldenapples Dec 17, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the src value is missing from this array...


if ( isset( $attr['attachment'] ) &&
$attachment = wp_get_attachment_image_src( (int) $attr['attachment'], $attr['size'] ) ) {
$image_attr['src'] = esc_url( $attachment[0] );
$image_attr['width'] = intval( $attachment[1] );
$image_attr['height'] = intval( $attachment[2] );
} else if ( ! empty( $attr['src'] ) ) {
$image_attr['src'] = esc_url( $attr['src'] );
foreach ( $image_attr as $attr_name => $attr_value ) {
if ( ! empty( $attr_value ) ) {
$image_html .= sanitize_key( $attr_name ) . '="' . esc_attr( $attr_value ) . '" ';
}
}

$image_html .= '/>';
} else {
return; // An image without a src isn't much of an image
}

foreach ( $image_attr as $attr_name => $attr_value ) {
if ( ! empty( $attr_value ) ) {
$image_html .= sanitize_key( $attr_name ) . '="' . esc_attr( $attr_value ) . '" ';
}
}

$image_html .= '/>';

/**
* Filter the output of the <img> tag before wrapping it in link or caption
*
Expand Down Expand Up @@ -234,8 +241,10 @@ public static function callback( $attr, $_null, $shortcode_tag ) {
if ( ! empty( $attr['caption'] ) ) {

// The WP caption element requires a width defined
if ( empty( $attr['width'] ) ) {
$attr['width'] = $image_attr['width'];
if ( empty( $attr['width'] ) && isset( $attr['attachment'] ) &&
$attachment = wp_get_attachment_image_src( (int) $attr['attachment'], $attr['size'] )
) {
$attr['width'] = intval( $attachment[1] );
}

$image_html = self::captionify( $image_html, $attr );
Expand Down
11 changes: 10 additions & 1 deletion tests/test-img-shortcode.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ class Test_Img_Shortcode extends WP_UnitTestCase {
// @codingStandardsIgnoreStart
public function setUp() {
parent::setUp();
switch_theme('twentyfifteen');

$this->attachment_id = $this->insert_attachment( null,
dirname( __FILE__ ) . '/data/fusion_image_placeholder_16x9_h2000.png',
Expand All @@ -22,7 +23,6 @@ public function setUp() {
);

$upload_dir = wp_upload_dir();

$this->image_src = $upload_dir['url'] . '/fusion_image_placeholder_16x9_h2000.png';
$this->image_path = $upload_dir['path'] . '/fusion_image_placeholder_16x9_h2000.png';
}
Expand All @@ -38,6 +38,10 @@ function test_construct_ui() {
// replace this with some actual testing code
$this->assertTrue( true );
}
function test_theme() {
// replace this with some actual testing code
$this->assertContains( 'Twenty Fifteen', wp_get_theme()->name );
}


/*
Expand Down Expand Up @@ -79,6 +83,11 @@ function test_img_shortcode_from_attachment() {
$expected_href_attr = get_permalink( $attachment_id );
$this->assertContains( 'href="' . $expected_href_attr . '"', $content );

// Test srcset
$content = apply_filters( 'the_content', '[img attachment="' . $attachment_id . '" linkto="attachment" /]' );
$srcset = 'srcset="http://example.org/wp-content/uploads/2015/12/fusion_image_placeholder_16x9_h2000-300x169.png 300w, http://example.org/wp-content/uploads/2015/12/fusion_image_placeholder_16x9_h2000-768x432.png 768w, http://example.org/wp-content/uploads/2015/12/fusion_image_placeholder_16x9_h2000-1024x576.png 1024w" sizes="(max-width: 2000px) 100vw, 2000px"';
$this->assertContains( $srcset, $content );

// Test caption attribute
$caption = <<<EOL
This is a "<em>caption</em>". It should contain <abbr>HTML</abbr> and <span class="icon">markup</span>.
Expand Down