it-swarm.com.de

Hinzufügen einer benutzerdefinierten Eingabe für das Datenattribut im Insert Media Modal

Ich versuche, dem "Insert Media" -Modal eine Texteingabe hinzuzufügen, um dem übergeordneten Anker der Bilder ein HTML5-Attribut data- 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 die Eingabe zum Modal hinzufügen:

enter image description here

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

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 den data-fancybox-group="" zum 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 die Daten eingegeben werden können, und ich habe einen Ort, an dem die Daten abgelegt werden können, aber ich bin nicht sicher, wie ich die Daten von der Eingabe in die Daten übertragen kann Attribut -fancybox-group.

8
apaul

Ich habe mir die Quelle angesehen, leider habe ich keine gute Möglichkeit gefunden, die Informationen weiterzugeben, ohne sie zu speichern. Was nervt - große Zeit - denn das ist wirklich nichts, was gerettet werden muss.

Eine Problemumgehung wäre, PHP Sessions zu aktivieren, indem Sie Folgendes an den Anfang Ihres functions.php setzen:

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

Jetzt können Sie $_SESSION-Variablen wie folgt verwenden:

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

Erstellen Sie Ihr Formularfeld wie folgt:

    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 einfach nachfragen.

3
Nicolai

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

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_save-Filter einbinden, falls Sie dies noch nicht getan haben, um das von Ihnen 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_input Funktion aktualisieren. Ändern Sie den Wert, um das Fancybox-Feld zu ziehen.

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 );
3
nothingtosee

Ich bin mir nicht sicher, ob das das Beste für dich ist, aber ich denke, du könntest es versuchen.

Holen Sie sich die Daten aus dem Eingabefeld und platzieren Sie sie in dem Formular auf einer versteckten Eingabe oder etwas anderem und 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 es könnte den Trick machen.

0
Marius Talagiu