Hinzufügen einer benutzerdefinierten Eingabe für Datenattribute in Insert Media Modal

8

Ich versuche, dem Modal "Medien einfügen" eine Texteingabe hinzuzufügen, in der Hoffnung data-, dem übergeordneten Anker der Bilder ein HTML5- Attribut hinzufügen zu können .

<a class="fancybox" href="..." data-fancybox-group=" "> <- Dieser Teil
<img class="wp-image-871" src="..." alt="..." width="245" height="333" />
</a>

Bisher konnte ich den Eingang zum Modal hinzufügen:

Geben Sie hier die Bildbeschreibung ein

Verwenden Sie den folgenden Code in meiner Datei functions.php:

function add_fancybox_input( $form_fields, $post ) {
$form_fields['fancyboxGroup'] = array(
'label' => 'fancybox group',
'input' => 'text',
'value' => 'testing',
'helps' => 'use this to group images in fancybox',
);
return $form_fields;
}

add_filter( 'attachment_fields_to_edit', 'add_fancybox_input', 10, 2 );

Und ich habe das data-fancybox-group=""dem Anker hinzugefügt mit:

function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){
  $classes = 'fancybox'; // separated by spaces, e.g. 'img image-link'

  // check if there are already classes assigned to the anchor
  if ( preg_match('/<a.*? class=".*?">/', $html) ) {
    $html = preg_replace('/(<a.*? class=".*?)(".*?>)/', '$1 ' . $classes . '$2', $html);
  } else {
    $html = preg_replace('/(<a.*?)>/', '$1 class="' . $classes . '" data-fancybox-group="" >', $html);
  }
  return $html;
}
add_filter('image_send_to_editor','give_linked_images_class',10,8);

Hier stecke ich fest ... Ich habe einen Ort, an dem ich die Daten eingeben kann, und ich habe einen Ort, an dem die Daten gespeichert werden können, aber ich bin mir nicht sicher, wie ich die Daten von der Eingabe in die Daten übertragen kann -fancybox-group Attribut.

apaul
quelle

Antworten:

3

Ich habe mir die Quelle angesehen, aber leider habe ich keine gute Möglichkeit gesehen, die Informationen weiterzugeben, ohne sie zu speichern. Was scheiße ist - große Zeit - weil dies wirklich nichts ist, was gerettet werden muss.

Eine Problemumgehung besteht darin, PHP-Sitzungen zu aktivieren, indem Sie Folgendes an den Anfang Ihres Dokuments setzen functions.php:

    if (!session_id()) {
        session_start();
    }

Jetzt können Sie $_SESSIONVariablen wie folgt verwenden:

    $_SESSION[ 'your-key' ] = 'your-value';

Erstellen Sie Ihr Formularfeld folgendermaßen:

    function wpse_154330_attachment_fields_to_edit( $form_fields, $post ) {
        $current_screen = get_current_screen();
        // we are not saving, so no need to show the field on the attachment page
        if ( $current_screen->id == 'attachment' ) {
            return $form_fields;
        }
        $form_fields['fancyboxGroup'] = array(
            'label' => 'fancybox group',
            'input' => 'text',
            'value' => '', // leave the value empty
            'helps' => 'use this to group images in fancybox',
        );
        return $form_fields;
    }
    add_filter(
        'attachment_fields_to_edit',
        'wpse_154330_attachment_fields_to_edit',
        10,
        2
    );

Verwenden Sie die Sitzungsvariable wie folgt:

    function wpse154330_save_attachment_field( $post, $attachment ) {
        // we're only setting up the variable, not changing anything else
        if ( isset( $attachment[ 'fancyboxGroup' ] ) {
            $_SESSION[ 'fancyboxGroup' ] = $attachment[ 'fancyboxGroup' ];
        }
        return $post;
    }
    add_filter(
        'attachment_fields_to_save',
        'wpse154330_save_attachment_field',
        10,
        2
    );

Ändern Sie die Ausgabe entsprechend:

    function wpse154330_image_send_to_editor(
        $html,
        $id,
        $caption,
        $title,
        $align,
        $url,
        $size,
        $alt = ''
    ) {
        // no need to modify the output, if no fancybox group is given
        if (
            empty( $_SESSION[ 'fancyboxGroup' ] )
            || ! isset( $_SESSION[ 'fancyboxGroup' ] )
        ) {
            return $html;
        }
        $classes = 'fancybox';
        if ( preg_match( '/<a.*? class=".*?">/', $html ) ) {
            $html = preg_replace(
                '/(<a.*? class=".*?)(".*?>)/',
                '$1 ' . $classes . '$2',
                $html
            );
        } else {
            $html = preg_replace(
                '/(<a.*?)>/',
                '$1 class="'
                    . $classes
                    . '" data-fancybox-group="'
                    . $_SESSION[ 'fancyboxGroup' ]
                    . '" >',
                $html
            );
        }
        unset( $_SESSION[ 'fancyboxGroup' ] );
        return $html;
    }
    add_filter(
        'image_send_to_editor',
        'wpse154330_image_send_to_editor',
        10,
        8
    );

Das ist alles. Sollte ziemlich selbsterklärend sein, sonst frag einfach.

Nicolai
quelle
3

Sie sollten in der Lage sein, das Feld mit zu ziehen get_post_meta.

function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){
  $classes = 'fancybox'; // separated by spaces, e.g. 'img image-link'

  // check if there are already classes assigned to the anchor
  if ( preg_match('/<a.*? class=".*?">/', $html) ) {
    $html = preg_replace('/(<a.*? class=".*?)(".*?>)/', '$1 ' . $classes . '$2', $html);
  } else {
    $html = preg_replace('/(<a.*?)>/', '$1 class="' . $classes . '" data-fancybox-group="'.get_post_meta($id, 'fancyboxGroup', true).'" >', $html);
  }
  return $html;
}
add_filter('image_send_to_editor','give_linked_images_class',10,8);

Außerdem müssen Sie sich in den attachment_fields_to_saveFilter einbinden, falls Sie dies noch nicht getan haben, um das hinzugefügte Feld zu speichern.

function wpse154330_save_attachment_field($post, $attachment) {
    if( isset($attachment['fancyboxGroup']) ){
            update_post_meta($post['ID'], 'fancyboxGroup', $attachment['fancyboxGroup']);
        }

    return $post;
}

add_filter( 'attachment_fields_to_save','wpse154330_save_attachment_field', 10, 2);

Sie sollten auch Ihre add_fancybox_inputFunktion aktualisieren . Ändern Sie den Wert, um das Fancybox-Feld abzurufen.

function add_fancybox_input( $form_fields, $post ) {
$form_fields['fancyboxGroup'] = array(
'label' => 'fancybox group',
'input' => 'text',
'value' => get_post_meta($post->ID, 'fancyboxGroup', true),
'helps' => 'use this to group images in fancybox',
);
return $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'add_fancybox_input', 10, 2 );
nichts zu sehen
quelle
Dies scheint zu funktionieren. Das einzige Problem, das ich sehe, ist, dass die Daten auf verschiedenen Seiten gespeichert werden. Wenn ich einem Bild auf einer Seite ein Datenattribut hinzufüge, werden diese Daten gespeichert. Wenn ich also dasselbe Bild auf einer anderen Seite verwende, muss das Datenattribut zurückgesetzt werden.
Apaul
Gibt es eine Möglichkeit, die Benutzereingabe für das Datenattribut zu erhalten, ohne es zu speichern, oder zumindest eine Möglichkeit, die Metadaten zu löschen, nachdem das Bild in die Seite eingefügt wurde?
Apaul
Ich denke, ich delete_post_meta($id, 'fancyboxGroup');sollte das gespeicherte Attribut löschen, bin mir aber nicht sicher, wie ich es danach auslösen soll image_send_to_editor.
Apaul
+1, weil dies der übliche Weg ist. Es gibt einige Dinge, die ich ändern würde, z. B. das Feld auf der Anhangsseite nicht anzeigen, das Formularfeld leer lassen und keine Änderungen vornehmen, wenn dies der Fall ist - wie in meiner Antwort.
Nicolai
Eine Möglichkeit wäre die Verwendung von Transienten mit (kurzem) Ablauf. Anstatt zu speichern, um Meta zu posten. Auf diese Weise müsste man sich keine Gedanken über das Löschen der Daten machen. @ apaul34208
Nicolai
0

Ich bin mir nicht sicher, ob dies das Beste für Sie ist, aber ich denke, Sie könnten es versuchen.

Holen Sie sich die Daten aus dem Eingabefeld und platzieren Sie sie im Formular auf einer versteckten Eingabe oder etwas anderem. Führen Sie das Datenattribut aus, wenn das Fenster der Medienauswahl geschlossen wird

$inputValue = $('.some_class').val();
$('.fancybox').data('fancybox-group', $inputValue);

Ich weiß, das klingt verrückt, aber es könnte für Sie sehr einfach sein und den Trick machen.

Marius Talagiu
quelle
Wenn das jQuery ist, denke ich nicht, dass es .data()so verwendet werden soll api.jquery.com/jquery.data
apaul
Bitte testen Sie, wenn Sie sich nicht sicher sind. jQuery.data benötigt das Element (Selektor), aber da der Selektor $ ('. Fancybox') erhält, haben Sie das Schlüssel / Wert-Paar, und ja, das ist richtig.
Marius Talagiu