This repository has been archived by the owner. It is now read-only.

Gallery Widget #120

Merged
merged 43 commits into from Sep 19, 2017
Commits
Jump to file or symbol
Failed to load files and symbols.
+61 −12
Diff settings

Always

Just for now

Viewing a subset of changes. View all

Add preview for galleries

Very basic, needs much more polish. And styles.
  • Loading branch information...
obenland authored and timmyc committed May 3, 2017
commit 46fe3b43428b26dd7a60a68581867d92bcccf23c
@@ -109,11 +109,23 @@
});
wp.media.frame = mediaFrame; // See wp.media().
// Handle selection of a media item.
mediaFrame.on( 'reset', function onInsert() {
mediaFrame.on( 'update', function onUpdate( selection ) {
var state = mediaFrame.state();
console.log(wp.media.controller.state().get('selection'));
});
selection = selection || state.get( 'selection' );
if ( ! selection ) {
return;
}
// Update widget instance.
control.model.set( {
ids: _.pluck( selection.models, 'id' ).join( ',' ),
attachments: selection.models.map( function( model ) { return model.toJSON(); } )
} );
} );
// Disable syncing of attachment changes back to server. See <https://core.trac.wordpress.org/ticket/40403>.
defaultSync = wp.media.model.Attachment.prototype.sync;
@@ -59,8 +59,8 @@ public function get_instance_schema() {
parent::get_instance_schema(),

This comment has been minimized.

@timmyc

timmyc Aug 17, 2017

Collaborator

get_instance_schema() here will return title, attachment_id, and url. We do need the title, but not attachment_id nor url. Should we even call the parent method here, or just simply add in the title bits directly?

array(
'ids' => array(
'type' => 'array',
'default' => array(),
'type' => 'string',
'default' => '',
),
'columns' => array(
'type' => 'integer',
@@ -71,13 +71,23 @@ public function get_instance_schema() {
'enum' => array_merge( get_intermediate_image_sizes(), array( 'full', 'custom' ) ),
'default' => 'thumbnail',
),
'link' => array(
'link_type' => array(
'type' => 'string',
'default' => '',
'format' => 'uri',
'sanitize_callback' => 'esc_url',
'enum' => array( 'none', 'file', 'post' ),
'default' => 'none',
'media_prop' => 'link',
'should_preview_update' => false,
),
'orderby_random' => array(
'type' => 'boolean',
'default' => false,
'media_prop' => '_orderbyRandom',
'should_preview_update' => false,
),
'attachments' => array(
'type' => 'array',
'default' => array(),
),
)
);
}
@@ -93,10 +103,15 @@ public function get_instance_schema() {
*/
public function render_media( $instance ) {
$instance = array_merge( wp_list_pluck( $this->get_instance_schema(), 'default' ), $instance );
echo gallery_shortcode( array(
$shortcode_atts = array(
'ids' => $instance['ids'],
) );
);
if ( $instance['orderby_random'] ) {
$shortcode_atts['orderby'] = 'rand';
}
echo gallery_shortcode( $shortcode_atts );
}
/**
@@ -155,6 +170,28 @@ public function render_control_template_scripts() {
<div class="notice notice-error notice-alt notice-missing-attachment">
<p><?php echo $this->l10n['missing_attachment']; ?></p>
</div>
<# } else if ( data.attachments.length ) { #>
<div class="gallery gallery-columns-{{ data.columns }}">
<# _.each( data.attachments, function( attachment, index ) { #>

This comment has been minimized.

@timmyc

timmyc Aug 17, 2017

Collaborator

As mentioned in the #120 (comment) I posted, we will likely want to revisit this preview logic and maybe only show the first 2-3 images in a larger gallery.

<dl class="gallery-item">
<dt class="gallery-icon">
<# if ( attachment.sizes.thumbnail ) { #>
<img src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}" alt="" />
<# } else { #>
<img src="{{ attachment.url }}" alt="" />
<# } #>
</dt>
<# if ( attachment.caption ) { #>
<dd class="wp-caption-text gallery-caption">
{{{ data.verifyHTML( attachment.caption ) }}}

This comment has been minimized.

@westonruter

westonruter Sep 8, 2017

Contributor

This line is throwing an error for me: “data.verifyHTML is not a function”. It is undefined. What is this function supposed to do?

This comment has been minimized.

@joemcgill

joemcgill Sep 8, 2017

Collaborator

This may become moot based on the updated widget preview design. See #188.

</dd>
<# } #>
</dl>
<# if ( index % data.columns === data.columns - 1 ) { #>
<br style="clear: both;">
<# } #>
<# } ); #>
</div>
<# } else { #>
<div class="attachment-media-view">
<p class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></p>
ProTip! Use n and p to navigate between commits in a pull request.