Est-il possible de définir une image sélectionnée avec une URL d'image externe

Je sais qu'il existe des plugins qui récupèrent les images de l'URL distante et les stockent localement. Je veux juste savoir s'il est possible de ne pas stocker d'image dans la médiathèque tout en l'utilisant comme image sélectionnée ?

Oui, c'est possible et assez facile.

Voici le workflow que je propose:

1. Mettez quelque part une interface utilisateur pour insérer l'URL de l'image sélectionnée. Le meilleur choix est probablement d'utiliser un 'admin_post_thumbnail_html'crochet de filtre
2. Utilisez le 'save_post'crochet d'action pour enregistrer l'URL (après la routine de sécurité et de validation) dans une méta de publication personnalisée
3. Utilisez le 'post_thumbnail_html'crochet de filtre pour afficher le <img>balisage approprié , en remplaçant la valeur par défaut, si le message pour lequel l'image sélectionnée est requise a la méta du message avec l'image sélectionnée externe

Pour fonctionner, ce flux de travail nécessite que l'image sélectionnée soit affichée dans le modèle à l'aide des fonctions get_the_post_thumnbail()ou the_post_thumbnail().

De plus, nous devons être sûrs que la '_thumbnail_id'valeur méta a une valeur non vide lorsque nous définissons la méta pour l'URL externe, sinon has_post_thumbnail()retournera false pour les publications qui n'ont qu'une image externe en vedette.

En fait, il est possible qu'un poste est à la fois une norme image locale sélectionnée et un jeu via notre flux de travail, et dans ce cas , l'extérieur sera utilisé.

Pour implémenter notre flux de travail, nous avons besoin d'une fonction pour valider l'URL utilisée comme image vedette externe, car nous devons être sûrs qu'il s'agit d'une URL d'image valide.

Il existe différentes façons d'accomplir cette tâche; ici j'utilise un moyen très simple qui ne regarde que l'URL, sans télécharger l'image. Cela ne fonctionne que pour les URL d'images statiques et ne vérifie pas que l'image existe réellement, mais c'est rapide. Modifiez-le en quelque chose de plus avancé si vous en avez besoin ( voici de l' aide).

function url_is_image( $url ) {
    if ( ! filter_var( $url, FILTER_VALIDATE_URL ) ) {
        return FALSE;
    }
    $ext = array( 'jpeg', 'jpg', 'gif', 'png' );
    $info = (array) pathinfo( parse_url( $url, PHP_URL_PATH ) );
    return isset( $info['extension'] )
        && in_array( strtolower( $info['extension'] ), $ext, TRUE );
}

Plutôt facile. Ajoutons maintenant les 3 crochets décrits dans le workflow ci-dessus:

add_filter( 'admin_post_thumbnail_html', 'thumbnail_url_field' );

add_action( 'save_post', 'thumbnail_url_field_save', 10, 2 );

add_filter( 'post_thumbnail_html', 'thumbnail_external_replace', 10, PHP_INT_MAX );

et les fonctions associées. D'abord celui qui sort le champ dans l'admin:

function thumbnail_url_field( $html ) {
    global $post;
    $value = get_post_meta( $post->ID, '_thumbnail_ext_url', TRUE ) ? : "";
    $nonce = wp_create_nonce( 'thumbnail_ext_url_' . $post->ID . get_current_blog_id() );
    $html .= '<input type="hidden" name="thumbnail_ext_url_nonce" value="' 
        . esc_attr( $nonce ) . '">';
    $html .= '<div><p>' . __('Or', 'txtdomain') . '</p>';
    $html .= '<p>' . __( 'Enter the url for external image', 'txtdomain' ) . '</p>';
    $html .= '<p><input type="url" name="thumbnail_ext_url" value="' . $value . '"></p>';
    if ( ! empty($value) && url_is_image( $value ) ) {
        $html .= '<p><img style="max-width:150px;height:auto;" src="' 
            . esc_url($value) . '"></p>';
        $html .= '<p>' . __( 'Leave url blank to remove.', 'txtdomain' ) . '</p>';
    }
    $html .= '</div>';
    return $html;
}

Notez que j'ai utilisé 'txtdomain'comme domaine de texte, mais vous devez utiliser un domaine de texte enregistré et approprié.

Voici à quoi ressemble la sortie lorsqu'elle est vide:

Et voici à quoi cela ressemble après avoir ajouté une URL d'image et enregistré / mis à jour le message:

Donc, maintenant notre interface d'administration est terminée, écrivons la routine de sauvegarde:

function thumbnail_url_field_save( $pid, $post ) {
    $cap = $post->post_type === 'page' ? 'edit_page' : 'edit_post';
    if (
        ! current_user_can( $cap, $pid )
        || ! post_type_supports( $post->post_type, 'thumbnail' )
        || defined( 'DOING_AUTOSAVE' )
    ) {
        return;
    }
    $action = 'thumbnail_ext_url_' . $pid . get_current_blog_id();
    $nonce = filter_input( INPUT_POST, 'thumbnail_ext_url_nonce', FILTER_SANITIZE_STRING );
    $url = filter_input( INPUT_POST,  'thumbnail_ext_url', FILTER_VALIDATE_URL );
    if (
        empty( $nonce )
        || ! wp_verify_nonce( $nonce, $action )
        || ( ! empty( $url ) && ! url_is_image( $url ) )
    ) {
        return;
    }
    if ( ! empty( $url ) ) {
        update_post_meta( $pid, '_thumbnail_ext_url', esc_url($url) );
        if ( ! get_post_meta( $pid, '_thumbnail_id', TRUE ) ) {
            update_post_meta( $pid, '_thumbnail_id', 'by_url' );
        }
    } elseif ( get_post_meta( $pid, '_thumbnail_ext_url', TRUE ) ) {
        delete_post_meta( $pid, '_thumbnail_ext_url' );
        if ( get_post_meta( $pid, '_thumbnail_id', TRUE ) === 'by_url' ) {
            delete_post_meta( $pid, '_thumbnail_id' );
        }
    }
}

La fonction, après quelques vérifications de sécurité, examine l'URL publiée et si elle est correcte, l'enregistre dans la '_thumbnail_ext_url'méta-publication. Si l'URL est vide et que la méta a été enregistrée, elle est supprimée, ce qui permet de supprimer la méta simplement en vidant le champ URL externe.

La dernière chose à faire est de sortir le balisage d'image en vedette lorsque notre URL d'image externe est définie en méta:

function thumbnail_external_replace( $html, $post_id ) {
    $url =  get_post_meta( $post_id, '_thumbnail_ext_url', TRUE );
    if ( empty( $url ) || ! url_is_image( $url ) ) {
        return $html;
    }
    $alt = get_post_field( 'post_title', $post_id ) . ' ' .  __( 'thumbnail', 'txtdomain' );
    $attr = array( 'alt' => $alt );
    $attr = apply_filters( 'wp_get_attachment_image_attributes', $attr, NULL );
    $attr = array_map( 'esc_attr', $attr );
    $html = sprintf( '<img src="%s"', esc_url($url) );
    foreach ( $attr as $name => $value ) {
        $html .= " $name=" . '"' . $value . '"';
    }
    $html .= ' />';
    return $html;
}

Nous avons fini.

Que reste-t-il à faire

Dans la sortie d'image sélectionnée , je ne l' ai pas utilisé widthou heightpropriétés, ni classes WordPress ajoute généralement, comme 'attachment-$size'. C'est parce que renifler la taille d'une image nécessite un travail supplémentaire qui ralentira le chargement de la page, surtout si vous avez plusieurs images en vedette dans la page.

Si vous avez besoin de ces attributs, vous pouvez utiliser mon code en ajoutant un rappel pour wp_get_attachment_image_attributes'filtrer (c'est un crochet WordPress standard ) ou peut-être pouvez-vous modifier mon code pour renifler la taille de l'image et afficher les attributs et classes associés.

Plugin Gist

Tout le code affiché ici, à l'exception de l' ajout d' une initialisation de domaine de texte proprement dit , est disponible en tant que plugin-travail complet dans un Contenu essentiel ici . Le code utilise un espace de noms, il nécessite donc PHP 5.3+.

Remarques

Bien sûr, vous devez vous assurer que vous disposez d'une licence et d'une autorisation pour utiliser et créer des liens hypertexte dans votre site à partir d'images externes.