web-dev-qa-db-fra.com

Ajout d'une entrée personnalisée pour l'attribut de données dans l'insertion modale de média

J'essaie d'ajouter une entrée de texte au modal "Insérer un média" dans l'espoir de pouvoir ajouter un attribut html5 data- à l'ancre parent des images.

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

Jusqu'à présent, j'ai pu ajouter l'entrée au modal:

enter image description here

En utilisant le code ci-dessous dans mon fichier 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 );

Et j'ai ajouté le data-fancybox-group="" à l'ancre en utilisant:

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

C'est là que je suis coincé ... J'ai un emplacement pour saisir les données et un emplacement pour les données, mais je ne suis pas sûr de savoir comment extraire les données de l'entrée aux données. attribut -fancybox-group.

phpcustom-fieldmedia-modal
8
apaul

J'ai jeté un coup d'œil à la source. Malheureusement, je n'ai pas trouvé de moyen agréable de transmettre l'information sans la sauvegarder. Ce qui craint - beaucoup de fois - parce que ce n'est vraiment pas quelque chose qui doit être sauvegardé.

Une solution de contournement consisterait à activer PHP Sessions en mettant le texte suivant au début de votre functions.php:

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

Vous pouvez maintenant utiliser les variables $_SESSION, comme ceci:

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

Créez votre champ de formulaire comme ceci:

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

Utilisez la variable de session comme ceci:

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

Modifiez la sortie en conséquence:

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

C'est à peu près ça. Devrait être assez explicite, sinon il suffit de demander.

3
Nicolai

Vous devriez pouvoir extraire le champ en utilisant 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);

En outre, vous devrez vous connecter au filtre attachment_fields_to_save, si ce n’est déjà fait, pour enregistrer le champ que vous avez ajouté.

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

Vous devriez également mettre à jour votre fonction add_fancybox_input. Modifiez la valeur pour extraire le champ fancybox.

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

Je ne suis pas sûr que ce soit la meilleure chose à faire pour vous, mais je suppose que vous pouvez l'essayer.

Récupérez les données du champ de saisie et placez-les dans le formulaire sur une entrée masquée ou quelque chose du genre, puis créez l'attribut de données lorsque la fenêtre de la sélection du support se ferme.

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

Je sais que cela semble fou, mais cela pourrait être très simple pour vous et cela pourrait faire l'affaire.

0
Marius Talagiu