Deprecated: str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/mybb-es.com/html/inc/class_language.php on line 201
Perfil con portada y estado estilo Facebook
MyBB-Es.com     Personalización y configuración de los foros MyBB     Tutoriales / Guías    

1.8 Perfil con portada y estado estilo Facebook

angeluz   25 Nov, 2020, 5:14 pm
#1
Buenas a todos hoy les traigo un tutorial con el que obtendrán un perfil estilo facebook (con portada), una imagen dice más que mil palabras:
[Imagen: 0.jpg]

Lo primero es crear dos campos de perfil personalizados en tu ACP -> Configuración -> campos de perfil personalizados -> agregar campo de perfil

Primero tendrás que crear dos campos:
1.- Portada- crear como caja de texto y visible y editable por todos.
Expresión regular:
Código:
(http(s?):)|([/|.|\w|\s])*\.(?:jpg|gif|png)
2.- Estado - Crear como área de texto y visible y editable por todos.
Deberás obtener el FID de ellos, solo coloca el mouse sobre ellos en el acp y te saldrá la url en tu navegador donde al final dirá edit&fid=X
El número que salga en la X es lo que necesitamos Big Grin

Ahora vamos a nuestro estilo y creamos una hoja de estilo con el nombre que gustes (recuerda que debe de terminar en .css o dará error), le damos en escribir nuestro código y pega lo siguiente:
Código:
#perfil{
padding: 0;
margin: 0;
position: relative;
}
.fotoperfil{
max-height: 300px;
width: 100%;
}
.perfilstatus{
position: relative;
    background: rgb(0 0 0 / 50%);
    height: 75px;
    width: 100%;
    text-align: left;
    display: table;
    margin-top: -75px;
    color: #fff;
    font-size: 14px;
}

.profile_avatar{
width: 10%;
    margin: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    vertical-align: middle;
    display: table-cell;
}

.profile_avatar img{
border: 2px solid rgb(255 255 255);
    box-shadow: 0 0 1px #ddd;
    height: 60px;
    width: 60px;
    border-radius: 50%;    
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.profiletra{
padding: 10px;
    font-size: 14px;
    color: #fff;
    display: table-cell;
    width: 90%;
    vertical-align: middle;
}
.socialprofile{
position: absolute;
    background: rgb(0 0 0 / 50%);
    right: 0;
    padding: 5px 10px;
    font-size: 14px;
    color: #fff;
}
.socialprofile a{
color:#fff;
margin-right: 3px;
}
.socialprofile a:last-child{
margin: 0;
}
.socialprofile a:hover{
color: #aaa;
text-decoration: none;
}

.profileinfo{
background: #131313;
padding: 10px 15px;
color: #fff;
text-align: left;
vertical-align: middle;
}
.profileinfo span{
    color: #aaa;
    font-weight: 900;
}

.profileinfo ul {
list-style: none;
}

.profileinfo ul li{
border-right: 1px solid #000;
padding: 0px 10px;
display: inline-block;
text-align: center;
}
.profileinfo ul li a{
color:  #fff;
}
profileinfo ul li a:hover{
color:#fff;
text-decoration: none;
}
.perfilrsp {
    width: 49.5%;
    }
@media only screen and (max-width: 866px) {
    .profileinfo ul li{
        display: block !important;
        padding: 5px 10px !important;
        border: none !important;
    }
.perfilrsp {
    width: 100% !important;
    }
}

y en plantillas buscar "miembro -> member_profile y reemplazar por lo siguiente:
Código:
<html>
<head>

<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1820"></script>
<script>
$(document).ready(function() {
if($('.fotoperfil', this).attr('src') == ''){
$('.fotoperfil').attr('src', 'https://i0.wp.com/www.andro-life.com/wp-content/uploads/2017/08/Wallpaper-1.jpg?ssl=1');
}
});
</script>
</head>
<body>
{$header}

<div id="perfil">
<div class="socialprofile"><a href="javascript:Report.reportUser({$uid});" title="Reportar usuario" class="report_user_button"><i class="fas fa-bullhorn"></i></a>
<a href="private.php?action=send&amp;uid={$uid}" title="{$lang->send_pm}"><i class="fas fa-envelope-square"></i></a>
    {$buddy_options}
</div>
<div>
<img class="fotoperfil" src="{$userfields['fid5']}" title="Portada de {$memprofile['username']}" alt="Portada de {$memprofile['username']}" />
<div class="perfilstatus"><div class="profile_avatar">{$avatar}</div><div class="profiletra"><strong>{$memprofile['username']}</strong><br/>
<span class="smalltext">{$userfields['fid6']}</span>
</div>
</div>
<div class="profileinfo">
<ul>
    <li><span>{$lang->registration_date}</span><br/>{$memregdate}</li>
    <li><span>{$lang->lastvisit}</span><br />{$memlastvisitdate}</li>
    <li><span>{$lang->total_posts}</span><br /><a href="search.php?action=finduser&amp;uid={$uid}" title="{$lang->find_posts}">{$memprofile['postnum']}</a></li>
    <li><span>{$lang->total_threads}</span><br /><a href="search.php?action=finduserthreads&amp;uid={$uid}" title="{$lang->find_threads}">{$memprofile['threadnum']}</a></li>
</ul>
</div>
</div>
    </div>
<br style="clear: both">
    <div class="perfilrsp float_left">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td colspan="2" class="thead"><strong>{$lang->users_forum_info}</strong></td>
</tr>
<tr>
<td class="trow1" style="width: 30%;"><strong>{$lang->joined}</strong></td>
<td class="trow1">{$memregdate}</td>
</tr>
<tr>
<td class="trow2"><strong>{$lang->lastvisit}</strong></td>
<td class="trow2">{$memlastvisitdate}</td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->total_posts}</strong></td>
<td class="trow1">{$memprofile['postnum']} ({$lang->ppd_percent_total}){$findposts}</td>
</tr>
<tr>
<td class="trow2"><strong>{$lang->total_threads}</strong></td>
<td class="trow2">{$memprofile['threadnum']} ({$lang->tpd_percent_total}){$findthreads}</td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->timeonline}</strong></td>
<td class="trow1">{$timeonline}</td>
</tr>
{$referrals}
{$reputation}
{$warning_level}
</table>
                <br style="clear: both">
        {$modoptions}
        <br style="clear: both">
    </div>
<div class="perfilrsp float_right">
    {$contact_details}
{$profilefields}{$profilepicture}
{$signature}
{$adminoptions}
<div style="text-align: center">{$buddy_options}{$ignore_options}{$report_options}</div>
</td>
</tr>
</table>
    </div>
<br style="clear: both">
{$footer}
</body>
</html>

Ahora les diré que modificar para cada uno de ustedes:
1.- Debemos de dar una portada para aquellos usuarios que no tengan portada aún, ya que mybb no da la opción de dar valor por defecto si está en blanco.
Para ello tenemos el siguiente script en <head> de la plantilla member profile:
Código:
<script>
$(document).ready(function() {
if($('.fotoperfil', this).attr('src') == ''){
$('.fotoperfil').attr('src', 'https://GOOGLE.COM');
}
});
</script>

Como pueden ver ahí viene la url de google (en la plantilla está de otra imagen, google es para que la identifiquen), deberás reemplazar por la url de la portada por defecto.

2.- En la misma  plantilla encontrarás:
Código:
<img class="fotoperfil" src="{$userfields['fid4']}" title="Portada de {$memprofile['username']}" alt="Portada de {$memprofile['username']}" />
Donde el 4 deberá ser reemplazado por el FID de tu campo para la portada.

3.- En la plantilla encontrarás:
<span class="smalltext">{$userfields['fid5']}</span>
Harás lo mismo que en el paso anterior pero ahora con el elegido de estado, o borrar si no deseas agregar esto Wink

Y con eso obtendrán algo lindo:
[Imagen: 1.jpg]

*El estado no soporta emojis aunque lo actives en el ACP al crear el campo, puedes crear un script de reemplazo con jquery, para cambiar emoji por emoji.

Espero les sirva =D

MÉTODO DOS:
Si deseas utilizar el plugin profile picture, deberás de cambiar la plantilla member_profile por esto:
Código:
<html>
<head>
    
    <title>{$mybb->settings['bbname']} - {$lang->profile}</title>
    {$headerinclude}
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1820"></script>
    <script>
$(document).ready(function() {
if($('.fotoperfil', this).attr('src') == ''){
$('.fotoperfil').attr('src', 'https://i0.wp.com/www.andro-life.com/wp-content/uploads/2017/08/Wallpaper-1.jpg?ssl=1');
}
});
</script>
</head>
<body>
{$header}
    
<div id="perfil">
    <div class="socialprofile"><a href="javascript:Report.reportUser({$uid});" class="report_user_button"><i class="fas fa-bullhorn"></i></a>
<a href="private.php?action=send&amp;uid={$uid}"><i class="fas fa-envelope-square"></i></a>
        </div>
    <div>
        {$profilepicture}
        <div class="perfilstatus"><div class="profile_avatar">{$avatar}</div><div class="profiletra">{$memprofile['username']}<br/>
            <span class="smalltext">{$userfields['fid5']}</span>
        </div>
    </div>
        <div class="profileinfo">
            <ul>
                <li>{$lang->registration_date}<br/>{$memregdate}</li>
                <li>{$lang->lastvisit}<br />{$memlastvisitdate}</li>
                <li>{$lang->total_posts}<br /><a href="search.php?action=finduser&amp;uid={$uid}" title="{$lang->find_posts}">{$memprofile['postnum']}</a></li>
                <li>{$lang->total_threads}<br /><a href="search.php?action=finduserthreads&amp;uid={$uid}" title="{$lang->find_threads}">{$memprofile['threadnum']}</a></li>
                </ul>
        </div>
    </div>
    </div>
    <br style="clear: both">
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
    <tr>
        <td width="50%" valign="top">
            <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
                <tr>
                    <td colspan="2" class="thead"><strong>{$lang->users_forum_info}</strong></td>
                </tr>
                <tr>
                    <td class="trow1" style="width: 30%;"><strong>{$lang->joined}</strong></td>
                    <td class="trow1">{$memregdate}</td>
                </tr>
                <tr>
                    <td class="trow2"><strong>{$lang->lastvisit}</strong></td>
                    <td class="trow2">{$memlastvisitdate}</td>
                </tr>
                <tr>
                    <td class="trow1"><strong>{$lang->total_posts}</strong></td>
                    <td class="trow1">{$memprofile['postnum']} ({$lang->ppd_percent_total}){$findposts}</td>
                </tr>
                <tr>
                    <td class="trow2"><strong>{$lang->total_threads}</strong></td>
                    <td class="trow2">{$memprofile['threadnum']} ({$lang->tpd_percent_total}){$findthreads}</td>
                </tr>
                <tr>
                    <td class="trow1"><strong>{$lang->timeonline}</strong></td>
                    <td class="trow1">{$timeonline}</td>
                </tr>
                {$referrals}
                {$reputation}
                {$warning_level}
            </table>
            {$contact_details}
        </td>
        <td>&nbsp;&nbsp;</td>
        <td width="50%" valign="top">
            {$profilefields}
            {$signature}
            {$modoptions}
            {$adminoptions}
            <div style="text-align: center">{$buddy_options}{$ignore_options}{$report_options}</div>
        </td>
    </tr>
</table>
    <br style="clear: both">
{$footer}
</body>
</html>

Deberás ir a las plantillas globales y buscar la plantilla member_profile_profilepicture y reemplazar por:
Código:
{$description}
{$profilepicture_img}
La plantilla member_profile_profilepicture_description reemplazar por:
Código:
<span class="descport">{$memprofile['profilepicdescription']}</span>

y la plantilla member_profile_profilepicture_profilepicture se reemplaza por:
Código:
<img class="fotoperfil" src="{$userprofilepicture['image']}" title="{$lang->users_profile_picture}" alt="{$lang->users_profile_picture}" />

Eso es todo!
Archivos adjuntos
Imagen(es)
       
Última modificación: 9 Jan, 2021, 7:31 pm por angeluz.
  
 Responder
Omar G.   25 Nov, 2020, 6:49 pm
#2
Hola, muchas gracias por el tutorial.

En lo personal aconsejo el permitir a los usuarios el subir sus imágenes en lugar de usar campos de perfil.

Yo aconsejaria los siguientes complementos para lograrlo:
https://community.mybb.com/mods.php?action=view&pid=127
https://github.com/Sama34/OUGC-Profile-Logo
https://github.com/Sama34/OUGC-Profile-Image

Aconsejo el primero por que los mios probablemente no los actualice a MyBB 1.9 en su momento.

Por cierto, ya actualice los permisos para poder subir adjuntos a los mensajes, el cual solo permite imágenes.

Saludos!

Pd: Aconsejo el configurar apropiadamente los campos de perfil con un ReGex que solo permita enlaces de imágenes ya que podría ser molesto el permitir cualquier cosa en sus campos de perfil.
Última modificación: 25 Nov, 2020, 6:51 pm por Omar G..
{SIGNATURE_IMAGE}
  
 Responder
angeluz   25 Nov, 2020, 7:06 pm
#3
(25 Nov, 2020, 6:49 pm)Omar G. escribió: Hola, muchas gracias por el tutorial.

En lo personal aconsejo el permitir a los usuarios el subir sus imágenes en lugar de usar campos de perfil.

Yo aconsejaria los siguientes complementos para lograrlo:
https://community.mybb.com/mods.php?action=view&pid=127
https://github.com/Sama34/OUGC-Profile-Logo
https://github.com/Sama34/OUGC-Profile-Image

Aconsejo el primero por que los mios probablemente no los actualice a MyBB 1.9 en su momento.

Por cierto, ya actualice los permisos para poder subir adjuntos a los mensajes, el cual solo permite imágenes.

Saludos!

Pd: Aconsejo el configurar apropiadamente los campos de perfil con un ReGex que solo permita enlaces de imágenes ya que podría ser molesto el permitir cualquier cosa en sus campos de perfil.

En tanto a subir las imágenes, considera que algunos tengan un host limitado, además de que mybb no admite eso por defecto.
Esos plugins tuyos ni los conocía, no están ni aquí, ni en mybb.com, ni en tu sitio personal ajajaja
Profile picture no está actualizado, recuerda que los plugins viejos dan problemas al agregar las tablas del settingroups o algo así.

Mybb 1.9 existe o existirá?? no se trabajaba ya en mybb 2.0??

Respecto al ReGex intenté, pero me daban errores de php, finalmente decidí dejarlo así al menos para el tuto.

<!----ReGex agregada al tutorial---!>
Última modificación: 25 Nov, 2020, 7:28 pm por angeluz.
  
 Responder
Omar G.   25 Nov, 2020, 7:28 pm
#4
(25 Nov, 2020, 7:06 pm)angeluz escribió: En tanto a subir las imágenes, considera que algunos tengan un host limitado, además de que mybb no admite eso por defecto.

Es valido, podría ser seguro y suficiente utilizando campos de perfil como en tu tutorial. Sin embargo, si el administrador puede darse el lujo y es importante (por seguridad, etc) entonces lo aconsejaría.

(25 Nov, 2020, 7:06 pm)angeluz escribió: Esos plugins tuyos ni los conocía, no están ni aquí, ni en mybb.com, ni en tu sitio personal ajajaja

Hay muchos en mi cuenta de GitHub que no he actualizado, algunos como lo que mencione posiblemente nunca lo haga por que los considero obsoletos (funcionan, pero son innecesarios por otras razones).

(25 Nov, 2020, 7:06 pm)angeluz escribió: Profile picture no está actualizado, recuerda que los plugins viejos dan problemas al agregar las tablas del settingroups o algo así.

En el caso del complemento Paul Bender creo que funciona correctamente en 1.8, los complementos que mencione míos están basados en el mismo código y posiblemente actualice los míos mientras pueda seguir "copiando" el código del complemento original.

Eso lo dejamos para quienes estén interesados en utilizar tu guía pero también quieran que sus usuarios suban la imagen, pueden experimentar. Yo así lo tengo configurado en PokéCosmo por el momento. Wink

(25 Nov, 2020, 7:06 pm)angeluz escribió: Mybb 1.9 existe o existirá?? no se trabajaba ya en mybb 2.0??

MyBB 1.9 es la versión en la cual estamos trabajando, este año ya no se pudo pero espero este disponible para el 2021.

(25 Nov, 2020, 7:06 pm)angeluz escribió: Respecto al ReGex intenté, pero me daban errores de php, finalmente decidí dejarlo así al menos para el tuto.

Depende de la configuracion que deseas, por ejemplo, el siguiente ReGex deberia funcionar para permitir solo imagenes de Imgur:
Código:
(https:)\/\/i\.imgur\.com\/\w+\.(png|jpe?g|gif)

Esto seria mucho mas seguro que solo permitir cualquier cosa. Claro, se puede ajustar para usar otros sitios que no sean Imgur, otros formatos, o incluso varios sitios diferentes. Pero el punto es no permitir cualquier cosa en los campos de perfil por seguridad.

Saludos.
Última modificación: 25 Nov, 2020, 7:29 pm por Omar G..
{SIGNATURE_IMAGE}
  
 Responder
angeluz   25 Nov, 2020, 7:50 pm
#5
Solo para mencionar:
Acabo de probar el plugin profile picture y sí funciona, en la brevedad posible haré la traducción y agregaré al tutorial como lograr ese perfil con el plugin,
El ReGex fue agregado al tutorial (no es perfecto, pero es trabajo honesto).
  
 Responder
angeluz   9 Jan, 2021, 7:35 pm
#6
Tutorial corregido y actualizado, se ha agregado la opción de realizarlo con profile picture y se ha modificado el diseño, ahora es responsive!

@Omar G. pasa que al poner colores te los cambia por otras cosas que ni al caso, por ejemplo #444; lo cambia por hostings que recomienden :/

Saludos a todos!
Tutorial corregido y actualizado, se ha agregado la opción de realizarlo con profile picture y se ha modificado el diseño, ahora es responsive!

@Omar G. pasa que al poner colores te los cambia por otras cosas que ni al caso, por ejemplo #cualquier número   lo cambia por un nombre aquí puse #444dospuntos  #444; :/

Saludos a todos!
Última modificación: 9 Jan, 2021, 7:37 pm por angeluz.
  
 Responder
Tema anterior      Tema siguiente
  
 Contáctanos
 Equipo del foro
 MyBB-Es.com - Soporte para los Foros MyBB en Español
 Volver arriba
 Marcar foros como leídos
 Sindicación RSS
 Ayuda
Powered By MyBB, © 2002-2024 MyBB Group.
Made with by Curves UI.