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

[WIP] Add checkbox field to use the attachment's alt or caption values #78

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

[WIP] Add checkbox field to use the attachment's alt or caption values #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
246919f
Add checkbox field to use the attachment's alt or caption values
Sep 7, 2017
2b6d625
Disable alt/caption input fields if using attachment values
Sep 8, 2017
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
26 changes: 24 additions & 2 deletions assets/js/image-shortcake-admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,26 @@ var ImageShortcake = {
} else {
customLinkField.$el.val('').hide();
}
},

attachmentAlt: function( changed, collection, shortcode ) {
var $altField = sui.views.editAttributeField.getField( collection, 'alt' ).$el.find('input');

if ( changed.value ) {
$altField.attr('disabled', 'disabled');
} else {
$altField.removeAttr('disabled');
}
},

attachmentCaption: function( changed, collection, shortcode ) {
var $captionField = sui.views.editAttributeField.getField( collection, 'caption' ).$el.find('input');

if ( changed.value ) {
$captionField.attr('disabled', 'disabled');
} else {
$captionField.removeAttr('disabled');
}
}
}

Expand All @@ -97,7 +117,9 @@ var ImageShortcake = {
*/
if ( typeof wp.shortcake !== 'undefined' && typeof wp.shortcake.hooks !== 'undefined' ) {

wp.shortcake.hooks.addAction( 'img.attachment', ImageShortcake.listeners.attachment );
wp.shortcake.hooks.addAction( 'img.linkto', ImageShortcake.listeners.linkto );
wp.shortcake.hooks.addAction( 'img.attachment', ImageShortcake.listeners.attachment );
wp.shortcake.hooks.addAction( 'img.linkto', ImageShortcake.listeners.linkto );
wp.shortcake.hooks.addAction( 'img.attachment_alt', ImageShortcake.listeners.attachmentAlt );
wp.shortcake.hooks.addAction( 'img.attachment_caption', ImageShortcake.listeners.attachmentCaption );

}
49 changes: 39 additions & 10 deletions inc/class-img-shortcode.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@ public static function get_shortcode_ui_args() {
'attrs' => array(

array(
'label' => esc_html__( 'Choose Attachment', 'image-shortcake' ),
'attr' => 'attachment',
'type' => 'attachment',
'label' => esc_html__( 'Choose Attachment', 'image-shortcake' ),
'attr' => 'attachment',
'type' => 'attachment',
'libraryType' => array( 'image' ),
'addButton' => esc_attr__( 'Select Image', 'image-shortcake' ),
'frameTitle' => esc_attr__( 'Select Image', 'image-shortcake' ),
Expand All @@ -74,6 +74,12 @@ public static function get_shortcode_ui_args() {
'placeholder' => esc_attr__( 'Alt text for the image', 'image-shortcake' ),
),

array(
'label' => esc_html__( 'Use the alt text from the attachment instead of the custom text above?', 'image-shortcake' ),
'attr' => 'attachment_alt',
'type' => 'checkbox',
),

array(
'label' => esc_html__( 'Caption', 'image-shortcake' ),
'attr' => 'caption',
Expand All @@ -82,12 +88,18 @@ public static function get_shortcode_ui_args() {
'placeholder' => esc_attr__( 'Caption for the image', 'image-shortcake' ),
),

array(
'label' => esc_html__( 'Use the caption from the attachment instead of the custom text above?', 'image-shortcake' ),
'attr' => 'attachment_caption',
'type' => 'checkbox',
),

array(
'label' => esc_html__( 'Alignment', 'image-shortcake' ),
'attr' => 'align',
'type' => 'select',
'value' => 'aligncenter',
'options' => array(
'options' => array(
'alignleft' => esc_attr__( 'Left', 'image-shortcake' ),
'aligncenter' => esc_attr__( 'Center', 'image-shortcake' ),
'alignright' => esc_attr__( 'Right', 'image-shortcake' ),
Expand All @@ -100,7 +112,7 @@ public static function get_shortcode_ui_args() {
'attr' => 'linkto',
'type' => 'select',
'value' => get_option( 'image_default_link_type' ),
'options' => array(
'options' => array(
'none' => esc_attr__( 'None (no link)', 'image-shortcake' ),
'attachment' => esc_attr__( 'Link to attachment file', 'image-shortcake' ),
'file' => esc_attr__( 'Link to file', 'image-shortcake' ),
Expand Down Expand Up @@ -188,11 +200,28 @@ public static function callback( $attr, $_null, $shortcode_tag ) {
'class' => trim( implode( ' ', $image_classes ) ),
);

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] );
if ( isset( $attr['attachment'] ) ) {
$attachment_img_src = wp_get_attachment_image_src( (int) $attr['attachment'], $attr['size'] );
$image_attr['src'] = esc_url( $attachment_img_src[0] );
$image_attr['width'] = intval( $attachment_img_src[1] );
$image_attr['height'] = intval( $attachment_img_src[2] );

// Use the attachment alt text if that option is specified
if ( isset( $attr['attachment_alt'] ) && $attr['attachment_alt'] === 'true' ) {
$attachment_alt = get_post_meta( $attr['attachment'], '_wp_attachment_image_alt', true );
if ( ! empty( $attachment_alt ) ) {
$attr['alt'] = $attachment_alt;
$image_attr['alt'] = $attachment_alt;
}
}

// Use the attachment caption if that option is specified
if ( isset( $attr['attachment_caption'] ) && $attr['attachment_caption'] === 'true' ) {
$attachment_caption = get_the_excerpt( $attr['attachment'] );
if ( ! empty( $attachment_caption ) ) {
$attr['caption'] = $attachment_caption;
}
}
} else if ( ! empty( $attr['src'] ) ) {
$image_attr['src'] = esc_url( $attr['src'] );
} else {
Expand Down
26 changes: 18 additions & 8 deletions tests/test-img-shortcode.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ public function setUp() {
'post_date' => '2014-10-01 17:28:00',
'post_status' => 'publish',
'post_type' => 'attachment',
'post_excerpt' => 'Attachment Caption',
)
);

Expand Down Expand Up @@ -58,35 +59,44 @@ function test_img_shortcode_with_src_tag() {
*/
function test_img_shortcode_from_attachment() {
$attachment_id = $this->attachment_id;

$upload_dir = wp_upload_dir();

// Test image src
$content = apply_filters( 'the_content', '[img attachment="' . $attachment_id . '" /]' );

$expected_src_attr = $upload_dir['url'] . '/fusion_image_placeholder_16x9_h2000.png';
$this->assertContains( 'src="' . $expected_src_attr . '"', $content );

// Test image alt text attribute
$alt_text = 'This is the alt text. It should describe an image.';
$content = apply_filters( 'the_content', '[img attachment="' . $attachment_id . '" alt="' . esc_attr( $alt_text ) . '" /]' );
$expected_alt_attr = $alt_text;
$this->assertContains( 'alt="' . $expected_alt_attr . '"', $content );
// Test attachment alt text
$content = apply_filters( 'the_content', '[img attachment="' . $attachment_id . '" alt="' . esc_attr( $alt_text ) . '" attachment_alt="true" /]' );
$expected_alt_attr = get_post_meta( $attachment_id, '_wp_attachment_image_alt', true );
$this->assertContains( 'alt="' . $expected_alt_attr . '"', $content );

// Test link href: linkto="file"
$content = apply_filters( 'the_content', '[img attachment="' . $attachment_id . '" linkto="file" /]' );

$expected_href_attr = $upload_dir['url'] . '/fusion_image_placeholder_16x9_h2000.png';
$this->assertContains( 'href="' . $expected_href_attr . '"', $content );

// Test link href: linkto="attachment"
$content = apply_filters( 'the_content', '[img attachment="' . $attachment_id . '" linkto="attachment" /]' );

$expected_href_attr = get_permalink( $attachment_id );
$this->assertContains( 'href="' . $expected_href_attr . '"', $content );

// Test caption attribute
// Test custom caption attribute
$caption = <<<EOL
This is a "<em>caption</em>". It should contain <abbr>HTML</abbr> and <span class="icon">markup</span>.
This is a custom "<em>caption</em>". It should contain <abbr>HTML</abbr> and <span class="icon">markup</span>.
EOL;
$content = apply_filters( 'the_content', '[img attachment="' . $attachment_id . '" caption="' . esc_attr( $caption ) . '" /]' );

$expected_caption = esc_html( $caption );
$this->assertContains( $expected_caption , $content );
// Test attachment caption
$content = apply_filters( 'the_content', '[img attachment="' . $attachment_id . '" caption="' . esc_attr( $caption ) . '" attachment_caption="true" /]' );
$expected_caption = get_the_excerpt( $attachment_id );
$this->assertContains( $expected_caption , $content );
}


Expand Down Expand Up @@ -208,10 +218,10 @@ private function insert_attachment( $parent_post_id = 0, $image = null, $post_fi

// Save the data
$id = wp_insert_attachment( $attachment, $upload['file'], $parent_post_id );
update_post_meta( $id, '_wp_attachment_image_alt', 'Attachment Alt Text' );
wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $upload['file'] ) );

return $id;
}

}