J'ai créé un champ personnalisé dans le profil de l'utilisateur où télécharger une image de profil. C'est très simple.
Pour créer des champs que j'ai utilisés:
add_action( 'show_user_profile', 'cover_image_function' );
add_action( 'edit_user_profile', 'cover_image_function' );
function cover_image_function( $user )
{
<h3>Cover Image</h3>
<style type="text/css">
.fh-profile-upload-options th,
.fh-profile-upload-options td,
.fh-profile-upload-options input {
vertical-align: top;
}
.user-preview-image {
display: block;
height: auto;
width: 300px;
}
</style>
<table class="form-table fh-profile-upload-options">
<tr>
<th>
<label for="image">Cover Image</label>
</th>
<td>
<img class="user-preview-image" src="<?php echo esc_attr( get_the_author_meta( 'mycoverimage', $user->ID ) ); ?>">
<input type="text" name="mycoverimage" id="mycoverimage" value="<?php echo esc_attr( get_the_author_meta( 'mycoverimage', $user->ID ) ); ?>" class="regular-text" />
<input type='button' class="button-primary" value="Upload Image" id="coverimage"/><br />
<span class="description">Please upload your cover image.</span>
</td>
</tr>
</table>
<script type="text/javascript">
(function( $ ) {
$( 'input#coverimage' ).on('click', function() {
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.send_to_editor = function( html )
{
imgurl = $( 'img', html ).attr( 'src' );
$( '#mycoverimage' ).val(imgurl);
tb_remove();
}
return false;
});
})(jQuery);
</script>
}
Pour sauvegarder mon image:
add_action( 'personal_options_update', 'save_cover_image' );
add_action( 'edit_user_profile_update', 'save_cover_image' );
function save_cover_image( $user_id ) {
if ( !current_user_can( 'edit_user', $user_id ) )
{
return false;
}
update_user_meta( $user_id, 'mycoverimage', $_POST[ 'mycoverimage' ] );
}
Tout fonctionne bien mais je ne peux pas récupérer le attachment ID
pour générer les vignettes et les tailles plus petites . Pour l'instant je peux juste obtenir l'URL comme:
echo esc_attr( get_the_author_meta( 'mycoverimage', $user->ID ) );
J'ai même utilisé la méthode connue comme dans d'autres questions:
function get_attachment_id($image_url) {
global $wpdb;
$attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url ));
return $attachment[0];
}
Mais ça ne marche pas. Est-il possible que l'image ne génère aucune métadonnée de pièce jointe lors du téléchargement? Et comment puis-je le faire? Même les suggestions, articles ou questions déjà répondus seraient appréciés. Tout sauf un plugin, je veux construire un code personnalisé. Merci!
J'ai enfin résolu! Le problème était que simplement en utilisant
update_user_meta( $user_id, 'mycoverimage', $_POST[ 'mycoverimage' ] );
L'image a été enregistrée sans générer de métadonnées de pièce jointe. En fait, en vérifiant ma table, il n’a reçu que usermeta id
qui n’est pas l’identifiant de la pièce jointe. Je devais donc changer un peu ma fonction de chargement en fonction de codex en utilisant wp_insert_attachment
comme:
add_action( 'personal_options_update', 'save_cover_image' );
add_action( 'edit_user_profile_update', 'save_cover_image' );
function save_cover_image( $user_id ) {
if ( !current_user_can( 'edit_user', $user_id ) )
{
return false;
}
$filename = $_POST['mycoverimage'];
$parent_post_id = 0;
$filetype = wp_check_filetype( basename( $filename ), null );
$wp_upload_dir = wp_upload_dir();
$attachment = array(
'guid' => $wp_upload_dir['url'] . '/' . basename( $filename ),
'post_mime_type' => $filetype['type'],
'post_title' => preg_replace( '/\.[^.]+$/', '', basename( $filename ) ),
'post_content' => '',
'post_status' => 'inherit',
'post_author' => $uid
);
$attach_id = wp_insert_attachment( $attachment, $filename, $parent_post_id );
require_once( ABSPATH . 'wp-admin/includes/image.php' );
$attach_data = wp_generate_attachment_metadata( $attach_id, $filename );
wp_update_attachment_metadata( $attach_id, $attach_data );
update_user_meta( $user_id, 'mycoverimage', $_POST[ 'mycoverimage' ] );
}
À ce stade, j'ai un usermeta id
et un attachment id
que je peux facilement récupérer pour les vignettes et autres opérations. Merci à @majick quand même.
Je vous suggère d'utiliser la boîte de dialogue plus récente du gestionnaire de média; WordPress traitera de tous les éléments de téléchargement d'images, y compris la génération de tailles intermédiaires et de métadonnées de pièces jointes.
Voici un exemple de travail (c'est un exemple rapide construit à partir d'un code précédent, il peut nécessiter quelques ajustements pour être utilisé en production):
add_action( 'admin_enqueue_scripts', 'load_wp_media_files' );
function load_wp_media_files( $page ) {
if( $page == 'profile.php' || $page == 'user-edit.php' ) {
wp_enqueue_media();
wp_enqueue_script( 'my_custom_script', plugins_url( '/js/myscript.js' , __FILE__ ), array('jquery'), '0.1' );
}
}
add_action( 'show_user_profile', 'cover_image_function' );
add_action( 'edit_user_profile', 'cover_image_function' );
function cover_image_function( $user )
{
$image_id = get_user_meta( $user->ID, 'mycoverimage', true );
if( intval( $image_id ) > 0 ) {
// Change with the image size you want to use
$image = wp_get_attachment_image( $image_id, 'medium', false, array( 'id' => 'user-preview-image' ) );
} else {
$image = '<img id="user-preview-image" src="https://some.default.image.jpg" />';
}
?>
<h3>Cover Image</h3>
<style type="text/css">
.fh-profile-upload-options th,
.fh-profile-upload-options td,
.fh-profile-upload-options input {
vertical-align: top;
}
.user-preview-image {
display: block;
height: auto;
width: 300px;
}
</style>
<table class="form-table fh-profile-upload-options">
<tr>
<th>
<label for="image">Cover Image</label>
</th>
<td>
<?php echo $image; ?>
<input type="hidden" name="mycoverimage" id="mycoverimage" value="<?php echo esc_attr( get_the_author_meta( 'mycoverimage', $user->ID ) ); ?>" class="regular-text" />
<input type='button' class="button-primary" value="Upload Image" id="coverimage"/><br />
<span class="description">Please upload your cover image.</span>
</td>
</tr>
</table>
<?php
}
add_action( 'personal_options_update', 'save_cover_image' );
add_action( 'edit_user_profile_update', 'save_cover_image' );
function save_cover_image( $user_id ) {
if ( ! current_user_can( 'edit_user', $user_id ) )
{
return false;
}
update_user_meta( $user_id, 'mycoverimage', $_POST[ 'mycoverimage' ] );
}
// Ajax action to refresh the user image
add_action( 'wp_ajax_cyb_get_image_url', 'cyb_get_image_url' );
function cyb_get_image_url() {
if(isset($_GET['id']) ){
$image = wp_get_attachment_image( filter_input( INPUT_GET, 'id', FILTER_VALIDATE_INT ), 'medium', false, array( 'id' => 'user-preview-image' ) );
$data = array(
'image' => $image,
);
wp_send_json_success( $data );
} else {
wp_send_json_error();
}
}
Et le fichier myscript.js:
jQuery(document).ready( function($) {
jQuery('input#coverimage').click(function(e) {
e.preventDefault();
var image_frame;
if(image_frame){
image_frame.open();
}
image_frame = wp.media({
title: 'Select Media',
multiple : false,
library : {
type : 'image',
}
});
image_frame.on('close',function() {
// get selections and save to hidden input plus other AJAX stuff etc.
var selection = image_frame.state().get('selection');
var gallery_ids = new Array();
var my_index = 0;
selection.each(function(attachment) {
gallery_ids[my_index] = attachment['id'];
my_index++;
});
var ids = gallery_ids.join(",");
jQuery('input#mycoverimage').val(ids);
Refresh_Image(ids);
});
image_frame.on('open',function() {
var selection = image_frame.state().get('selection');
ids = jQuery('input#mycoverimage').val().split(',');
ids.forEach(function(id) {
attachment = wp.media.attachment(id);
attachment.fetch();
selection.add( attachment ? [ attachment ] : [] );
});
});
image_frame.on('toolbar:create:select',function() {
image_frame.state().set('filterable', 'uploaded');
});
image_frame.open();
});
});
function Refresh_Image(the_id){
var data = {
action: 'cyb_get_image_url',
id: the_id
};
jQuery.get(ajaxurl, data, function(response) {
if(response.success === true) {
jQuery('#user-preview-image').replaceWith( response.data.image );
}
});
}
Notez que ce code stocke l'id de l'image sur le champ méta de l'utilisateur au lieu de l'URL de l'image pleine taille comme vous le faisiez auparavant, vous pouvez donc obtenir n'importe quelle taille d'image à partir du champ méta de l'utilisateur:
$image_id = get_user_meta( $user->ID, 'mycoverimage', true );
$fulle_user_image = wp_get_attachment_image( $image_id, 'full' );
Pas sûr que cela fasse une différence, mais comme vous voulez juste une valeur, vous pouvez obtenir get_var
au lieu de get_col
. J'ai légèrement modifié la requête en fonction de ce que je sais qui fonctionne:
function get_attachment_id($image_url) {
global $wpdb;
$attachment = $wpdb->get_var($wpdb->prepare("SELECT ID FROM ".$wpdb->prefix."posts WHERE post_type='attachment' AND guid='%s'", $image_url ));
return $attachment;
}
Et en vous servant de ce que vous ne faites pas esc_attr
sur la valeur de l'URL avant de l'envoyer à la fonction ou elle ne correspondra pas.
EDITVous pouvez essayer ceci (de manière moins stricte) simplement faire correspondre le chemin de l'URL à la variable guid
au lieu de l'URL complète:
function get_attachment_id($image_url) {
$parseurl = parse_url($image_url);
$path = $parseurl['path'];
global $wpdb;
$attachments = $wpdb->get_results("SELECT ID,guid FROM ".$wpdb->prefix."posts WHERE post_type='attachment'");
foreach ($attachments as $attachment) {
if (strstr($attachment->guid,$path)) {return $attachment->ID;}
}
echo "<!-- All Attachments "; print_r($attachments); echo "-->"; // debug output
}