[TUTORIAL] Perfil com foto de capa como no facebook

Este recurso visa disponibilizar aos usuários a foto de capa no perfil avançado de Forumeiros. Com ele, você pode aumentar a interação de seus membros e criar concursos de capas mais bonitas ou, simplesmente usar como meio de publicidade.

--> Tutoriais, dicas e astúcias <--
Perfil com foto de capa como no facebook

1º - Funcionamento do Javascript:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

2º - Aplicação do código:
Existe o código específico para cada versão de fórum. O usuário pode adaptar o código da maneira que bem entender sem remover os créditos do autor que está no código, visto que, este não interfere ou aparece no fórum com o nome do desenvolvedor.

PHPBB3

Código:

    // FOTO DE CAPA
        if (window.location.pathname.indexOf('/u') == 0) {
            $(document).ready(function () {
                // Link Imagem Capa
                var fbcapa = $('#field_id-20 .field_uneditable').text(); // Local onde coloca a ID do campo
                // Estrutura geral
                $('div#main-content h1.page-title').before('<div style="width: 100%; height: 315px; position: relative; background: url(' + fbcapa + ') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;" id="fbfundo"><div style="position: absolute; left: 0; width: 100%; bottom: 0;"><table id="fbperfil"><tr><td rowspan="3" id="fbavatar"></td><td style="font-size: 16px;" id="fbnome"></td></tr><tr><td style="font-size: 1.4em;" id="fbrank"></td></tr><tr><td id="fbgrupo"></td></tr></table></div></div><style>table#fbperfil tbody tr td#fbnome div.h3 {text-transform: none !important;} h1.page-title{font-size:0px!important;height:30px!important;} #main-content p:nth-child(2) {display:none!important;} #profile-advanced-right .module {display:none!important;} #profile-advanced-left {width:100%!important;} #fbperfil { margin-bottom: -33px; margin-left: 13px; } #fbfundo { border: 2px solid #BDBDBD; -webkit-border-radius: 5px; } #fbavatar { border: 4px solid #fff; -webkit-border-radius: 2px; background-color: white; } #fbavatar img { height: 160px; width: 160px; } #fbnome { padding: 28% 0px 0px 10px; } #fbrank, #fbgrupo { padding: 0px 0 0 10px; } #profile-advanced-layout #tabs { bottom: 0; padding-left: 280px; margin-top: 0px !important; }</style>');
                // Avatar
                $('div#main-content div.module:first div.inner img[alt=""]').clone().appendTo($('#fbavatar'));
                // Nome
                $('div#main-content div.module:first .h3:first').clone().appendTo($('#fbnome'));
                // Rank
                $('div#main-content div.module:first b').clone().appendTo($('#fbrank'));
                // Grupo
                $('div#main-content div.module:first div.inner img:last').clone().appendTo($('#fbgrupo'));
                // Prevenir avatares duplos para usuários sem imagem de rank
                $(function () {
                    var fbavatarduplo = [],
                        imagemdupla;
                    $("#fbfundo img").filter(function () {
                        imagemdupla = $(this).attr("src");
                        if ($.inArray(imagemdupla, fbavatarduplo) < 0) {
                            fbavatarduplo.push(imagemdupla);
                            return false;
                        }
                        return true;
                    }).remove();
                });
                // Ícone online automático
                $("table#fbperfil tbody tr td#fbnome div.h3").html(function (_, html) {
                    return html.replace("(conectado)", "<img alt='Conectado' title='Conectado' src='http://i.imgur.com/QglVEGE.png' />")
                });
                // Tabs sem refresh para evitar erros na foto de capa
                $(function () {
                    var tabfbperfil = function () {
                        $('#tabs li').click(function (e) {
                            e.preventDefault();
                            var url = this.firstChild.href;
                            if (url == '#') return;
                            $('#profile-advanced-left').load(url + ' #profile-advanced-left', tabfbperfil);
                        });
                    };
                    tabfbperfil();
                });
            });
        }

PHPBB2

Código:

    // FOTO DE CAPA
        if (window.location.pathname.indexOf('/u') == 0) {
            $(document).ready(function() {
                // Link Imagem Capa
                var fbcapa = $('#field_id1 .field_uneditable').text(); // Local onde coloca a ID do campo
                // Estrutura geral
                $('table[width="100%"][cellspacing="1"][cellpadding="1"][border="0"]').before('<div style="width: 100%; height: 315px; position: relative; background: url(' + fbcapa + ') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;" id="fbfundo"><div style="position: absolute; left: 0; width: 100%; bottom: 0;"><table id="fbperfil"><tr><td rowspan="3" id="fbavatar"></td><td style="font-size: 16px;" id="fbnome"></td></tr><tr><td style="font-size: 1.4em;" id="fbrank"></td></tr></table></div></div><style>table#fbperfil tbody tr td#fbnome div.h3 {text-transform: none !important;} h1.page-title{font-size:0px!important;height:30px!important;} #main-content p:nth-child(2) {display:none!important;} #profile-advanced-right .module {display:none!important;} #profile-advanced-left {width:100%!important;} #fbperfil { margin-bottom: -33px; margin-left: 13px; } #fbfundo { border: 2px solid #BDBDBD; -webkit-border-radius: 5px; } #fbavatar { border: 4px solid #fff; -webkit-border-radius: 2px; background-color: white; } #fbavatar img { height: 160px; width: 160px; } #fbnome { padding: 28% 0px 0px 10px; } #fbrank, #fbgrupo { padding: 0px 0 0 10px; } #profile-advanced-layout #tabs { bottom: 0; padding-left: 280px; margin-top: 0px !important; }#profile-advanced-layout #tabs { margin-bottom: -13px !important; margin-left: -10px; } #profile-advanced-details { padding-top: 10px !important; }#fbrank span { margin-bottom: 40px !important; }</style>');
                // Avatar
                $('table.forumline td[class="row1 gensmall"][align="center"] img[alt=""]').clone().appendTo($('#fbavatar'));
                // Nome
                $('.catLeft:first span[class="genmed module-title"]').clone().appendTo($('#fbnome'));
                // Rank
                $('td[class="row1 gensmall"][align="center"] img:last').clone().appendTo($('#fbrank'));
                // Prevenir avatares duplos para usuários sem imagem de rank
                $(function() {
                    var fbavatarduplo = [],
                        imagemdupla;
                    $("#fbfundo img").filter(function() {
                        imagemdupla = $(this).attr("src");
                        if ($.inArray(imagemdupla, fbavatarduplo) < 0) {
                            fbavatarduplo.push(imagemdupla);
                            return false;
                        }
                        return true;
                    }).remove();
                });
                // Ícone online automático
                $('table#fbperfil span[class="genmed module-title"]').html(function(_, html) {
                    return html.replace("(conectado)", "<img alt='Conectado' title='Conectado' src='http://i.imgur.com/QglVEGE.png' />")
                });
                // Tabs sem refresh para evitar erros na foto de capa
                $(function() {
                    var tabfbperfil = function() {
                        $('td[align="right"][valign="bottom"][width="100%"][nowrap="nowrap"] a').click(function(e) {
                            e.preventDefault();
                            var url = this.href;
                            if (url == '#') return;
                            $('table[width="100%"][cellspacing="1"][cellpadding="1"][border="0"]').load(url + ' table[width="100%"][cellspacing="1"][cellpadding="1"][border="0"]', tabfbperfil);
                        });
                    };
                    tabfbperfil();
                });
            });
        }

PUNBB

Código:

    // FOTO DE CAPA
        if (window.location.pathname.indexOf('/u') == 0) {
            $(document).ready(function() {
                // Link Imagem Capa
                var fbcapa = $('#field_id18 .field_uneditable').text(); // Local onde coloca a ID do campo
                // Estrutura geral
                $('#pun-visit').before('<div style="width: 100%; height: 315px; position: relative; background: url(' + fbcapa + ') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;" id="fbfundo"><div style="position: absolute; left: 0; width: 100%; bottom: 0;"><table id="fbperfil"><tr><td rowspan="3" id="fbavatar"></td><td style="font-size: 16px;" id="fbnome"></td></tr><tr><td style="font-size: 1.4em;" id="fbrank"></td></tr></table></div></div><style>table#fbperfil tbody tr td#fbnome div.h3 {text-transform: none !important;} h1.page-title{font-size:0px!important;height:30px!important;} #main-content p:nth-child(2) {display:none!important;} #profile-advanced-right .module {display:none!important;} #profile-advanced-left {width:100%!important;} #fbperfil { margin-bottom: -33px; margin-left: 13px; } #fbfundo { border: 2px solid #BDBDBD; -webkit-border-radius: 5px; } #fbavatar { border: 4px solid #fff; -webkit-border-radius: 2px; background-color: white; } #fbavatar img { height: 160px; width: 160px; } #fbnome { padding: 28% 0px 0px 10px; } #fbrank, #fbgrupo { padding: 0px 0 0 10px; } #profile-advanced-layout #tabs { bottom: 0; padding-left: 280px; margin-top: 0px !important; }#profile-advanced-layout #tabs { margin-bottom: -13px !important; margin-left: -10px; } #profile-advanced-details { padding-top: 10px !important; }#fbrank span { margin-bottom: 40px !important; }</style>');
                // Avatar
                $('.module:first .main-content img[alt=""]').clone().appendTo($('#fbavatar'));
                // Nome
                $('div#main-content div.module:first .h3:first').clone().appendTo($('#fbnome'));
                // Rank
                $('.module:first .main-content.clearfix.center span').clone().appendTo($('#fbrank'));
                // Prevenir avatares duplos para usuários sem imagem de rank
                $(function() {
                    var fbavatarduplo = [],
                        imagemdupla;
                    $("#fbfundo img").filter(function() {
                        imagemdupla = $(this).attr("src");
                        if ($.inArray(imagemdupla, fbavatarduplo) < 0) {
                            fbavatarduplo.push(imagemdupla);
                            return false;
                        }
                        return true;
                    }).remove();
                });
                // Ícone online automático
                $("table#fbperfil tbody tr td#fbnome div.h3").html(function(_, html) {
                    return html.replace("(conectado)", "<img alt='Conectado' title='Conectado' src='http://i.imgur.com/QglVEGE.png' />")
                });
                // Tabs sem refresh para evitar erros na foto de capa
                $(function() {
                    var tabfbperfil = function() {
                        $('#tabs li').click(function(e) {
                            e.preventDefault();
                            var url = this.firstChild.href;
                            if (url == '#') return;
                            $('#profile-advanced-left').load(url + ' #profile-advanced-left', tabfbperfil);
                        });
                    };
                    tabfbperfil();
                });
            });
        }

INVISION

Código:

    // FOTO DE CAPA
        if (window.location.pathname.indexOf('/u') == 0) {
            $(document).ready(function() {
                // Link Imagem Capa
                var fbcapa = $('#field_id1 .field_uneditable').text(); // Local onde coloca a ID do campo
                // Estrutura geral
                $('#profile-advanced-layout').before('<div style="width: 100%; height: 315px; position: relative; background: url(' + fbcapa + ') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;" id="fbfundo"><div style="position: absolute; left: 0; width: 100%; bottom: 0;"><table id="fbperfil"><tr><td rowspan="3" id="fbavatar"></td><td style="font-size: 16px;" id="fbnome"></td></tr><tr><td style="font-size: 1.4em;" id="fbrank"></td></tr></table></div></div><style>table#fbperfil tbody tr td#fbnome div.h3 {text-transform: none !important;} h1.page-title{font-size:0px!important;height:30px!important;} #main-content p:nth-child(2) {display:none!important;} #profile-advanced-right .module {display:none!important;} #profile-advanced-left {width:100%!important;} #fbperfil { margin-bottom: -33px; margin-left: 13px; } #fbfundo { border: 2px solid #BDBDBD; -webkit-border-radius: 5px; } #fbavatar { border: 4px solid #fff; -webkit-border-radius: 2px; background-color: white; } #fbavatar img { height: 160px; width: 160px; } #fbnome { padding: 28% 0px 0px 10px; } #fbrank, #fbgrupo { padding: 0px 0 0 10px; } #profile-advanced-layout #tabs { bottom: 0; padding-left: 280px; margin-top: 0px !important; }#profile-advanced-layout #tabs { margin-bottom: -13px !important; margin-left: -10px; } #profile-advanced-details { padding-top: 10px !important; }#fbrank span { margin-bottom: 40px !important; }#profile-advanced-layout { margin-top: 30px; }</style>');
                // Avatar
                $('#profile-advanced-right .box-content.profile:contains("Rank:") img:first').clone().appendTo($('#fbavatar'));
                // Nome
                $('#profile-advanced-right .module:first .maintitle h3').clone().appendTo($('#fbnome'));
                // Rank
                $('#profile-advanced-right .box-content.profile:contains("Rank:") img:last').clone().appendTo($('#fbrank'));
                // Prevenir avatares duplos para usuários sem imagem de rank
                $(function() {
                    var fbavatarduplo = [],
                        imagemdupla;
                    $("#fbfundo img").filter(function() {
                        imagemdupla = $(this).attr("src");
                        if ($.inArray(imagemdupla, fbavatarduplo) < 0) {
                            fbavatarduplo.push(imagemdupla);
                            return false;
                        }
                        return true;
                    }).remove();
                });
                // Ícone online automático
                $('table#fbperfil h3 em').html(function(_, html) {
                    return html.replace("(conectado)", "<img alt='Conectado' title='Conectado' src='http://i.imgur.com/QglVEGE.png' />")
                });
                // Tabs sem refresh para evitar erros na foto de capa
                $(function() {
                    var tabfbperfil = function() {
                        $('#profile-advanced-left ul.privmsg li div.tabitem a').click(function(e) {
                            e.preventDefault();
                            var url = this.href;
                            if (url == '#') return;
                            $('#profile-advanced-left').load(url + ' #profile-advanced-left', tabfbperfil);
                        });
                    };
                    tabfbperfil();
                });
            });
        }

3º - Perfil personalizado:
Agora, acesse Painel de Controle > Usuários e Grupos > Usuários > Perfis > > e no nome Tipo, determine o valor como Campo de texto, disponibilizando tal campo somente no Perfil. Feito isso, salve.

Caso tenha dúvidas referente a criação de um campo no perfil dos usuários, aconselhamos que leia atentamente o seguinte FAQ: https://ajuda.forumeiros.com/t17049-criacao-e-gestao-dos-perfis

Em seguida, acesse o perfil do seu usuário. Por exemplo: https://ajuda.forumeiros.com/u1 Em seguida, clique no botão direito do mouse por cima da caixa de texto correspondente ao seu campo de perfil que vai abrigar a URL da foto de capa, na opção "Inspecionar elemento":


Na imagem ilustrativa acima, o campo correspondente onde vamos colocar a URL da imagem é o profile_field_13_7. Acesse novamente o seu script, e nele localize por:

Código:

var fbcapa = $('#field_id-20 .field_uneditable').text(); // Local onde coloca a ID do campo

Troque o valor:

Código:

field_id-20

Pelo valor do 'FIELD' que obteve quando inspecionou o elemento. Feito isso, salve seu código com o novo valor do Field.

• Como definir capa padrão?
  Para obter ajuda, acesse o seguinte link: https://ajuda.forumeiros.com/t17049-#102198 Ao definir um conteúdo padrão, a URL será mostrada mesmo que o membro não digite a URL de capa.

  Shek escreveu:Acesse Usuários e Grupos > Perfils > Foto de capa > Campo de texto > Substituir conteúdo >
  Em seguida, volte no mesmo local, e na caixa Campo do texto cole a URL da imagem padrão para novos usuários.
  

  Postado por Shek em: https://ajuda.forumeiros.com/t96295-#658722

  
  
• Tenho um template IPBoard profile, e o código não funcionou. O que fazer?
  O código só é compatível com versão de perfil Forumeiros. Caso use um perfil avançado mais conhecido como IPBoard profile, então, nós não poderemos lhe fornecer uma correção, visto que, o mesmo não é adaptável ao seu template editado.
  
  
• A capa não aparece no perfil! O que devo fazer?
  Existem algumas instruções básicas para solucionar este problema. Primeiro, deve procurar o Seletor CSS do campo do perfil personalizado e ao encontrar, substituir conforme ministrado acima.
  Veja algumas questões resolvidas sobre o assunto:
  https://ajuda.forumeiros.com/t96284-
  https://ajuda.forumeiros.com/t96295-
  
  
  Resultado
  
  

---

© Fórum dos Fóruns, Hancki & First

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:Perfil com foto de capa como no facebook