Cómo implementar un cargador de imágenes básico en la página de perfil de usuario

27 mar 2012, 16:47:23
Vistas: 14.2K
Votos: 7

Estoy intentando agregar un cargador de imágenes a las páginas de perfil de usuario. Tengo uno funcionando en una página de registro básica, pero el mismo código ligeramente modificado no funciona cuando lo agrego a functions.php. El campo se carga y WordPress permite la actualización, pero en la vista de perfil no se muestra ninguna imagen. Para obtener y almacenar la imagen uso:

/********************************************************************
Código para campo de carga de imagen de perfil
*********************************************************************/
require_once( STYLESHEETPATH . '/img_upload_resize_crop.php' );

add_action( 'init', 'custom_img_uploader' );

function custom_img_uploader () {

    if (isset($_FILES['profilePicture']['name'])!= "" ) {

if ( $_FILES['profilePicture']['name']!="" ) {
    $your_image = new _image;
    $upload_dir = wp_upload_dir();
    //Para cargar
    $your_image->uploadTo = $upload_dir['basedir'].'/';
    $upload = $your_image->upload($_FILES['profilePicture']);


    //Para redimensionar
    $your_image->newPath = $upload_dir['basedir'].'/thumbs/';
    $your_image->newWidth = 150;
    $your_image->newHeight = 200;
    $resized = $your_image->resize();
    $profilePicture=str_replace($upload_dir['basedir'].'/thumbs/', "", $resized );
    unlink($upload);
}else{
    $profilePicture='';
}
}
}

Para mostrar el campo en HTML tengo:

<!-- inicio del campo de carga de imagen -->
<tr>
<th><label for="profilePicture"><?php _e("Imagen de perfil"); ?></label></th>
<td>
<input type="file" name="profilePicture" id="profilePicture" style="float:left;" />
</td>
</tr>

Y para guardarlo uso esto:

update_user_meta( $user_id, 'userphoto_thumb_height', 59);
update_user_meta( $user_id, 'userphoto_thumb_width', 80 );
update_user_meta( $user_id, 'userphoto_thumb_file', $profilePicture );

¿Alguien puede ver por qué en la Vista de Perfil este código:

<?php if(get_the_author_meta( 'userphoto_thumb_file', $getId )!=""){?>
                        <img src="<?=$uploads['baseurl'];?>/thumbs/<?=get_the_author_meta( 'userphoto_thumb_file', $getId );?>" />

no carga una imagen almacenada?

Actualización I y II

Depuración básica

Actualización III Después de agregar un isset() avancé un poco:

[28-Mar-2012 07:14:46] PHP Notice:  Variable indefinida: profilePicture in /home/user/public_html/wp-content/themes/theme-name/functions.php on line 346

En esa línea tengo update_user_meta( $user_id, 'userphoto_thumb_file', $profilePicture ); Parece que aunque tengo definida la variable profilePicture, no se captura Era solo un aviso y no parece relevante ni causar el problema de carga.

Actualización IV

Envolví el código del cargador de imágenes en una función y lo agregué como una acción. Ver código con actualizaciones arriba. Todavía tengo una variable indefinida profilePicture y tampoco se carga la imagen. El archivo functions.php completo está aquí http://pastebin.com/YGYz3Qnv

Actualización V

Me di cuenta de que no tengo una buena opción $_POST para profilePicture. Mirando el plugin mencionado por @brasofilo en http://plugins.svn.wordpress.org/user-avatar/trunk/user-avatar.php veo este código que podría usar, pero necesito ajustarlo mucho:

<form enctype="multipart/form-data" id="uploadForm" method="POST" action="<?php echo admin_url('admin-ajax.php'); ?>?action=user_avatar_add_photo&step=2&uid=<?php echo $uid; ?>" >
            <label for="upload"><?php _e('Selecciona una imagen de tu computadora:','user-avatar'); ?></label><br /><input type="file" id="upload" name="uploadedfile" />
            <input type="hidden" name="action" value="save" />
            <?php wp_nonce_field('user-avatar') ?>
        <p class="submit"><input type="submit" value="<?php esc_attr_e('Subir'); ?>" /></p>
    </form>

Me pregunto si se necesita un formulario ya que no fue necesario para los otros campos de texto y cómo debo agregar $user_id y ajustar update_user_meta

Actualización VI

Hice $profilePicture global como recomendó un colaborador

Actualización VII

Estoy considerando usar la opción de Unrelated Media aquí. Pero como aún me tomará bastante tiempo integrar esto a mi functions.php actual, mantendré este hilo abierto hasta que lo haya logrado.

4
Comentarios

Echa un vistazo a esto, usa el plugin integrado Plupload http://kovshenin.com/2012/dear-wordpress-i-want-to-drop-files-here-in-the-visual-editor/

soulseekah soulseekah
28 mar 2012 15:31:12

Las imágenes de perfil necesitan ser añadidas a una carpeta específica y la ruta tiene que ser añadida a un campo user_meta específico para que la página de perfil pueda cargar la imagen conectada a un ID de usuario con <?php if(get_the_author_meta( 'userphoto_thumb_file', $getId )!=""){?> <img src="<?=$uploads['baseurl'];?>/thumbs/<?=get_the_author_meta( 'userphoto_thumb_file', $getId );?>" /> No veo cómo el código de Koshenin puede lograr eso. Pero lo revisaré. ¡Vi que tú también ayudaste con eso Soulseekah!

rhand rhand
28 mar 2012 17:30:20

@Soulseekah ¡La función de arrastrar y soltar de ese plugin es realmente genial, debo decirlo! Pero para mi situación solo necesito que funcione un subidor de imágenes de perfil. ¡Realmente espero que el plugin de tu hermano sea aceptado en el núcleo porque es increíble!

rhand rhand
28 mar 2012 17:50:21

Tal vez una implementación como la del ejemplo de plupload podría ser algo interesante. Solo sería necesario encolar los scripts correctamente y seleccionar un <div> como cargador, parece. Solo se necesita almacenar los datos para un usuario, de modo que una imagen específica se cargue por perfil.

rhand rhand
28 mar 2012 18:07:07
Todas las respuestas a la pregunta 3
1

Revisa este plugin: User Avatar. Puedes usarlo o revisar sus funciones para adaptar las tuyas.

29 mar 2012 05:32:27
Comentarios

Lo revisé y me preguntaba sobre usar parte de su código - ver actualización en la pregunta.

rhand rhand
29 mar 2012 15:23:36
10

$profilePicture se define fuera del alcance del código de guardado y nunca se declara ni se usa en el ámbito global.

Como resultado, tan pronto como la función de carga devuelve, la variable es recolectada como basura o estás tratando con una variable completamente diferente que comparte el mismo nombre.

Yo la declararía como global y agregaría más validación, como verificar si la variable está vacía antes de intentar usarla.

29 mar 2012 14:28:24
Comentarios

He actualizado el código -ver http://pastebin.com/YGYz3Qnv - y he hecho $profilePicture global. ¡Gracias por el aviso! ¿Cómo puedo añadir más validación para comprobar si la variable está vacía? Ya he añadido isset()... Y creo que todavía tengo un problema con $_POST también..

rhand rhand
29 mar 2012 15:22:44

Prefiero usar if(empty()){ ya que también comprueba arrays vacíos, también puede que necesites hacer que el formulario use codificación multipart, aunque no recuerdo un sitio/respuesta que lo explique, así que publicaré pronto, pero consulta el plugin User Photo

Tom J Nowell Tom J Nowell
29 mar 2012 15:59:01

Mirando el pastebin, no has hecho la variable global en absoluto, viendo la función relevante se ve idéntica, no hay global $profilePicture; en la función custom_img_uploader

Tom J Nowell Tom J Nowell
29 mar 2012 17:15:25

Al ver todo tu código, no estoy seguro de por qué el proceso de carga está en una función separada en un hook init, ¿no sería mejor justo encima de las llamadas a update_usermeta?

Tom J Nowell Tom J Nowell
29 mar 2012 17:16:03

Creo que sería mejor usar algo como el plugin UserPhoto en su lugar, funciona y tiene más características y opciones

Tom J Nowell Tom J Nowell
29 mar 2012 17:16:51

Revisando http://wordpress.org/extend/plugins/user-photo/ ahora. Podría ser una buena idea. Solo necesito ajustar mi formulario de registro para almacenar la imagen de la misma manera y que las actualizaciones funcionen después. Para cargar la imagen en la vista de perfil no debería ser muy difícil siempre que pueda obtener el ID de usuario para que se cargue la foto de perfil correcta. Como todos estos factores cuentan, esperaba poder quedarme con el código que tengo para solo necesitar cambiar functions.php, no el formulario de registro y la vista de perfil también. No soy un completo novato en PHP, pero aún tengo muuucho que aprender

rhand rhand
30 mar 2012 03:17:08

Pregunté al desarrollador de UserPhoto si ya había una implementación del formulario de registro aquí: http://wordpress.org/support/topic/plugin-user-photo-registration-usage?replies=1#post-2721403. Quién sabe...

rhand rhand
30 mar 2012 03:25:28

Ah, no sabía que también querías un cargador público.

Tom J Nowell Tom J Nowell
30 mar 2012 12:20:07

Cambiaría de usar los datos FILES y post, para en su lugar confiar en las APIs de WordPress para tus archivos. De esta manera, en lugar de una ruta de archivo, obtienes el ID de un tipo de post adjunto, y puedes reducir todo tu código de carga a un puñado de llamadas a funciones que hacen todo automáticamente. Luego, cuando quieras mostrar tu 'avatar', solo usa las funciones de imagen adjunta que se usan en todas partes

Tom J Nowell Tom J Nowell
30 mar 2012 12:21:31

continuemos esta discusión en el chat

rhand rhand
30 mar 2012 14:03:15
Mostrar los 5 comentarios restantes
0

Bueno, gracias a todos por sus sugerencias. Al final opté por la integración del Cargador de Medios de Woothemes como pueden ver aquí en Github: https://github.com/devinsays/options-framework-plugin/blob/master/options-medialibrary-uploader.php Está integrado en un framework de temas que estoy integrando en mi propio tema, así que de esta manera mato dos pájaros de un tiro.

25 may 2012 08:12:08