wake-up-neo.net

Schaltfläche an WordPress Image Details modal anhängen

Ich habe jetzt ein paar Tage lang gesucht, damit ich meine Frage so kurz wie möglich halte, um Ihnen aus dem Weg zu gehen.

Was ich versuche, sollte mit jQuery (Anhängen) sehr einfach sein, aber aus irgendeinem seltsamen Grund kann ich es nicht schaffen, während ich .js zum Backend hinzufüge. Auch dieser benutzerdefinierte Hack ist nur vorübergehend, bis der Gutenberg-Editor im Kern veröffentlicht wird und all dies nicht mehr benötigt wird.

Q:

Fügen Sie einfach ein "Hallo Welt!" Zeichenfolge für das Modal "Bilddetails", wobei der rote Text in den Screenshots unten lautet.

-

Die folgenden Screenshots zeigen einen kurzen Überblick über meine Arbeit.

 enter image description here 

Dieses modale Bilddetailsymbol wird angezeigt, wenn Sie auf einem einzelnen Bild, das nicht Teil Ihrer Medienbibliothek ist und keine Post_ID hat, auf Bearbeiten klicken. Zum Beispiel Platzhalterbilder (URLs).

Screenshot Nr. 2. Dieses modale Bilddetail erhalten Sie, wenn Sie auf Bild bearbeiten in einem Bild klicken, das zuvor zu einem Beitrag in der Medienbibliothek hinzugefügt wurde. Die schöne Schaltfläche Ersetzen unter dem Vorschaubild sticht mir in die Augen, ich will ihn, er ist mein Chuck Norris!

 enter image description here 

4
Jack Ottermans

Hier ist eine alternative Technik zur Bearbeitung der Vorlage. Ich habe die unten stehende Lösung aus diesem Beitrag angepasst.

In der folgenden Vorgehensweise wird der Haken print_media_templates, der am Ende von wp-includes/media-template.php ausgelöst wird, verwendet, um JavaScript auszugeben, das die Standardvorlage für das Unterstreichen von Bilddetails (<script type="text/html" id="tmpl-image-details">) entfernt und durch eine duplizierte Version ersetzt, die wir an unsere Bedürfnisse anpassen können .

Ich habe hinzugefügt Hallo, Welt! in der geänderten Vorlage und der Ersetzen Button (mehr dazu in einer Sekunde). Einer der Nachteile dieses Ansatzes ist, dass wenn/wenn der WordPress-Kern aktualisiert wird, unsere gegabelte Vorlage keine Änderungen an dieser bestimmten Medienvorlage widerspiegelt.

Ein weiteres Problem ist, dass das Hinzufügen der Schaltfläche nicht ausreicht. Sie können die Schaltfläche aktivieren, indem Sie die HTML-Kommentare (<!-- und -->) entfernen, in die ich sie eingebunden habe, wenn Sie trotzdem fortfahren möchten. Die Verwendung der Standardschaltfläche Ersetzen für ein Bild, das nicht Teil der Medienbibliothek ist, löst einen Fehler in der Konsole aus, scheint jedoch dennoch zu funktionieren. Idealerweise sollte eine benutzerdefinierte Schaltfläche erstellt oder der JS-Controller implementiert werden, der die Funktionen der Schaltfläche Ersetzen verwaltet (was ich nicht genau weiß).

add_action( 'print_media_templates', 'wpse_print_media_templates' );
function wpse_print_media_templates() { ?>
    <script>
        // Idea via http://unsalkorkmaz.com/wp3-5-media-gallery-edit-modal-change-captions-to-title/
        jQuery( document ).ready( function( $ ){
            jQuery( "script#tmpl-image-details:first" ).remove();
        });
    </script>

    <script type="text/html" id="tmpl-image-details">
        <div class="media-embed">
            <div class="embed-media-settings">
                <div class="column-image">
                    <div class="image">
                        <img src="{{ data.model.url }}" draggable="false" alt="" />

                        <# if ( data.attachment && window.imageEdit ) { #>
                            <div class="actions">
                                <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
                                <input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
                            </div>
                        <# } else if ( ! data.attachment && window.imageEdit ) { #>
                            <!--
                                <div class="actions">
                                    <input type="button" class="replace-attachment button my-theme"  value="<?php esc_attr_e( 'Replace' ); ?>" />
                                </div>
                             -->
                        <# } #>
                        <h1>Hello, world!</h1>
                    </div>
                </div>
                <div class="column-settings">
                    <?php
                    /** This filter is documented in wp-admin/includes/media.php */
                    if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
                        <label class="setting caption">
                            <span><?php _e('Caption'); ?></span>
                            <textarea data-setting="caption">{{ data.model.caption }}</textarea>
                        </label>
                    <?php endif; ?>

                    <label class="setting alt-text">
                        <span><?php _e('Alternative Text'); ?></span>
                        <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
                    </label>

                    <h2><?php _e( 'Display Settings' ); ?></h2>
                    <div class="setting align">
                        <span><?php _e('Align'); ?></span>
                        <div class="button-group button-large" data-setting="align">
                            <button class="button" value="left">
                                <?php esc_html_e( 'Left' ); ?>
                            </button>
                            <button class="button" value="center">
                                <?php esc_html_e( 'Center' ); ?>
                            </button>
                            <button class="button" value="right">
                                <?php esc_html_e( 'Right' ); ?>
                            </button>
                            <button class="button active" value="none">
                                <?php esc_html_e( 'None' ); ?>
                            </button>
                        </div>
                    </div>

                    <# if ( data.attachment ) { #>
                        <# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
                            <label class="setting size">
                                <span><?php _e('Size'); ?></span>
                                <select class="size" name="size"
                                    data-setting="size"
                                    <# if ( data.userSettings ) { #>
                                        data-user-setting="imgsize"
                                    <# } #>>
                                    <?php
                                    /** This filter is documented in wp-admin/includes/media.php */
                                    $sizes = apply_filters( 'image_size_names_choose', array(
                                        'thumbnail' => __('Thumbnail'),
                                        'medium'    => __('Medium'),
                                        'large'     => __('Large'),
                                        'full'      => __('Full Size'),
                                    ) );

                                    foreach ( $sizes as $value => $name ) : ?>
                                        <#
                                        var size = data.sizes['<?php echo esc_js( $value ); ?>'];
                                        if ( size ) { #>
                                            <option value="<?php echo esc_attr( $value ); ?>">
                                                <?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
                                            </option>
                                        <# } #>
                                    <?php endforeach; ?>
                                    <option value="<?php echo esc_attr( 'custom' ); ?>">
                                        <?php _e( 'Custom Size' ); ?>
                                    </option>
                                </select>
                            </label>
                        <# } #>
                            <div class="custom-size<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
                                <label><span><?php _e( 'Width' ); ?> <small>(px)</small></span> <input data-setting="customWidth" type="number" step="1" value="{{ data.model.customWidth }}" /></label><span class="sep">&times;</span><label><span><?php _e( 'Height' ); ?> <small>(px)</small></span><input data-setting="customHeight" type="number" step="1" value="{{ data.model.customHeight }}" /></label>
                            </div>
                    <# } #>

                    <div class="setting link-to">
                        <span><?php _e('Link To'); ?></span>
                        <select data-setting="link">
                        <# if ( data.attachment ) { #>
                            <option value="file">
                                <?php esc_html_e( 'Media File' ); ?>
                            </option>
                            <option value="post">
                                <?php esc_html_e( 'Attachment Page' ); ?>
                            </option>
                        <# } else { #>
                            <option value="file">
                                <?php esc_html_e( 'Image URL' ); ?>
                            </option>
                        <# } #>
                            <option value="custom">
                                <?php esc_html_e( 'Custom URL' ); ?>
                            </option>
                            <option value="none">
                                <?php esc_html_e( 'None' ); ?>
                            </option>
                        </select>
                        <input type="text" class="link-to-custom" data-setting="linkUrl" />
                    </div>
                    <div class="advanced-section">
                        <h2><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h2>
                        <div class="advanced-settings hidden">
                            <div class="advanced-image">
                                <label class="setting title-text">
                                    <span><?php _e('Image Title Attribute'); ?></span>
                                    <input type="text" data-setting="title" value="{{ data.model.title }}" />
                                </label>
                                <label class="setting extra-classes">
                                    <span><?php _e('Image CSS Class'); ?></span>
                                    <input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
                                </label>
                            </div>
                            <div class="advanced-link">
                                <div class="setting link-target">
                                    <label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new tab' ); ?></label>
                                </div>
                                <label class="setting link-rel">
                                    <span><?php _e('Link Rel'); ?></span>
                                    <input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
                                </label>
                                <label class="setting link-class-name">
                                    <span><?php _e('Link CSS Class'); ?></span>
                                    <input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>       
    <?php
}
4
Dave Romsey

Der schöne Ersetzen-Button unter dem Vorschaubild steckt mir in die Augen, ich will ihn, er ist mein Chuck Norris!

"Chuck Norris programmiert nicht mit einer Tastatur. Er starrt den Computer an, bis er tut, was er will" ( src )

Für diejenigen von uns, die die Tastatur zum Programmieren benötigen, gibt es eine Möglichkeit, die Schaltfläche nach dem .image img-Selektor einzufügen, falls sie fehlt:

 replace 

hier erweitern wir die Medienansicht ImageDetails und überschreiben die Methode resetFocus():

add_action( 'print_media_templates', function() { ?> 
   <script>
    jQuery(document).ready( function( $ ) {
        wp.media.view.ImageDetails = wp.media.view.ImageDetails.extend({
            resetFocus: function() {
               this.$( '.link-to-custom' ).blur();
               this.$( '.embed-media-settings' ).scrollTop( 0 );
               // Inject Replace button if it's missing:
               if( ! this.$('.replace-attachment' ).length ) {
                   this.$( '<div class="actions"> <input type="button"  class="replace-attachment button my-theme" value="Replace" /></div>' ).insertAfter('.image img');
               }
            }
        });
    }); 
   </script> 
<?php } );

Wir könnten auch die initialize() -Methode überschreiben und uns in das post-render -Ereignis einklinken, wie in der Frage hier von @Druzion.

Hier ist eine funktionierende und modifizierte Version dieser Frage:

add_action( 'print_media_templates', function() { ?> 
   <script>
    jQuery(document).ready( function( $ ) {
        wp.media.view.ImageDetails = wp.media.view.ImageDetails.extend({
            initialize: function() {
                this.on( 'post-render', this.add_settings );
            },
            add_settings: function() {
                // Inject Replace button if it's missing:
                if( ! this.$('.replace-attachment' ).length ) {
                    this.$('.image').append( '<div class="actions"><input type="button" class="replace-attachment button my-theme" value="Replace" /></div>');
                }
            }
        });
    }) 
   </script> 
<?php } );

Beachten Sie die Verwendung von this.$ anstelle von $.

Ebenso könnten wir die render() -Methode überschreiben, so wie ich mit hier gespielt habe.

Ein anderer Ansatz besteht darin, Teile der Standardvorlagen durch Ausgabepufferung und Ersetzung von Teilzeichenfolgen zu ersetzen, wie dies @bonger getan hat hier .

Beachten Sie auch den Javascript-Fehler bei der Verwendung der Schaltfläche "Ersetzen", der von @Dave Romsey erwähnt wird.

2
birgire

Ich schäme mich so für diese Technik, aber wenn niemand (online) in drei Tagen helfen will und überall fragt, wirst du etwas verzweifelt, nach Lösungen zu suchen. ????

function Hijack_caption_off_filter() {

    $shame = '<input type="button" class="replace-attachment button my-theme" value="Replace" />';

    echo $shame;

}
add_filter( 'disable_captions', 'Hijack_caption_off_filter' );

Ich möchte erwähnen, dass die Leute nicht solche Sachen machen sollten. Was ich hier gemacht habe, ist, dass ich einen booleschen Untertitelfilter [Richtig/Falsch] entführt und meinen Knopf durchgedrückt habe, um ihn dazu zu bringen, in der media_template zu erscheinen.

0
Jack Ottermans