crear la opcion de subir una imagen desde el area de perfil

[satanson123]

Hola amigos quiero saber como puedo crear la opcion en el profile del usuario. Por que lo tengo de la forma que se tiene que colocar el enlace pero quiero la opcion de que se pueda subir a mi hosting.

[ArturoGallegos]

Se utiliza

Código Javascript:

$('.add_img').click(function(){
    var input_img = $(this).next();
    var frame = wp.media({
        title : 'Seleccionar imagen',
        multiple : false,
        library : { type : 'image'},
        button : { text : 'Insert' }
    });
    frame.on('select',function() {
        attachment = frame.state().get('selection').first().toJSON();
        input_img.val(attachment['url']);
    });
    frame.open();
});
 

Si no te funciona haz que carge esto en la pagina donde vas a ejecutarlo

Código PHP:

wp_enqueue_media();
 

[satanson123]

Iniciado por ArturoGallegos

Se utiliza

Código Javascript:

$('.add_img').click(function(){
    var input_img = $(this).next();
    var frame = wp.media({
        title : 'Seleccionar imagen',
        multiple : false,
        library : { type : 'image'},
        button : { text : 'Insert' }
    });
    frame.on('select',function() {
        attachment = frame.state().get('selection').first().toJSON();
        input_img.val(attachment['url']);
    });
    frame.open();
});
 

Si no te funciona haz que carge esto en la pagina donde vas a ejecutarlo

Código PHP:

wp_enqueue_media();
 

Disculpa mi ignorancia pero no se como colocar lo que me dices ya que desconosco el tema y me estas hablando como si conociera de esto mucho igual que tu.

este es el codigo que tengo en function.php para lo que necesito como funciona es se coloca la url de la imagen y se llama en el archivo del author:

Código PHP:

  <?php 
//Imagen de portada 
function portada_add_custom_user_profile_fields( $user ) { 
?> 
    <br /> 
 
 
 
<table class="form-table"> 
<tbody> 
                <tr> 
            <th style="margin:15px;"><label for="portada">Imagen de portada</label></th> 
             
            <th style="float:left;width:50%;">             
                <input type="text" name="portada" id="portada" value="<?php echo esc_attr( the_author_meta( 'portada', $user->ID ) ); ?>" class="regular-text"><br />Coloca el enlace de tu imagen de portada tamaño recomendado 1010x310.</th> 
             
             
        </tr> 
</tbody> 
</table> 
 
<?php } 
 
function portada_save_custom_user_profile_fields( $user_id ) { 
     
    if ( !current_user_can( 'edit_user', $user_id ) ) 
        return FALSE; 
     
    update_usermeta( $user_id, 'portada', $_POST['portada'] ); 
} 
 
add_action( 'show_user_profile', 'portada_add_custom_user_profile_fields' ); 
add_action( 'edit_user_profile', 'portada_add_custom_user_profile_fields' ); 
 
add_action( 'personal_options_update', 'portada_save_custom_user_profile_fields' ); 
add_action( 'edit_user_profile_update', 'portada_save_custom_user_profile_fields' );   

Y se llama asi:

Código HTML:

<img src="<?php echo $author->portada; ?>" style="min-width:980px;max-width:980px;height:310px;" />
 

como coloco lo que me dices?

[ArturoGallegos]

valla pensé que al envolverlo en el highlight de javascript sobre entenderías que tenias que ponerlo e algún archivo js que cargues en esa pagina o bien, colocarlo entre las etiquetas <script> y </script> junto con el código html que imprimes en dicha pagina.

Si lees mi código es bastante claro, si te sirve de pista uso jquery para identificar los elementos, así asignar el evento click y en su momento asignarle el valor de la imagen.

quizás donde me falto ser mas explicito fue con wp_enqueue_media();

este se utiliza en la misma funcion que uses para cargar tus archivos css o js dentro del admin

suele ser
add_action('admin_enqueue_scripts', 'nombre funcion');


si tienes dudas no le tengas miedo a experimentar, también tienes la documentación de wordpress y google que nunca falla.... si de plano no te sale, regresa y pregunta por algo especifico y con gusto trato de orientarte.

[darchy]

otra opcion, sería usar un plugin que te lo haga. En el repositorio hay unos cuantos, es ir probando a ver cual te gusta más:
https://wordpress.org/plugins/search.php?q=avatar

[satanson123]

Bueno amigo lo coloque de esta forma pero no me funciona, me puedes decir donde me equivoco?

Código PHP:

//Imagen de portada
function portada_add_custom_user_profile_fields( $user ) {
?>
    <br />
 
 
<script type="text/javascript">
$('.add_img').click(function(){
    var input_img = $(this).next();
    var frame = wp.media({
        title : 'Seleccionar imagen',
        multiple : false,
        library : { type : 'image'},
        button : { text : 'Insert' }
    });
    frame.on('select',function() {
        attachment = frame.state().get('selection').first().toJSON();
        input_img.val(attachment['url']);
    });
    frame.open();
});
</script>
 
<table class="form-table">
<tbody>
                <tr>
            <th style="margin:15px;"><label for="portada">Imagen de portada</label></th>
            
            <th style="float:left;width:50%;">          
                <input type="text" name="portada" id="portada" value="<?php echo esc_attr( the_author_meta( 'portada', $user->ID ) ); ?>" class="regular-text"><br />Coloca el enlace de tu imagen de portada tamaño recomendado 1010x310.</th>
            <th><input type="button" class="add_img" name="add_img" value="add_img" onclick="wp_enqueue_media()" /></th>
            
        </tr>
</tbody>
</table>
 
<?php }
 
function portada_save_custom_user_profile_fields( $user_id ) {
    
    if ( !current_user_can( 'edit_user', $user_id ) )
        return FALSE;
    
    update_usermeta( $user_id, 'portada', $_POST['portada'] );
}
add_action('admin_enqueue_scripts', 'nportada_add_custom_user_profile_fields');
add_action( 'show_user_profile', 'portada_add_custom_user_profile_fields' );
add_action( 'edit_user_profile', 'portada_add_custom_user_profile_fields' );
 
add_action( 'personal_options_update', 'portada_save_custom_user_profile_fields' );
add_action( 'edit_user_profile_update', 'portada_save_custom_user_profile_fields' );
 

[ArturoGallegos]

wp_enqueue_media() no es una función javascript que puedas invocar con el evento onclick

Por favor lee mis mensajes y lee el código (sobre todo el código), si lo lees entenderás como debe ir todo.