Capa no perfil

Detalhes da questão

Endereço do fórum: https://reinosdeetheria.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Bom dia.

Eu queria uma ajuda para adicionar capa no perfil. Já li o tutorial, mas ele não tem pra versão do meu fórum. Li esse tópico aqui também, mas acaba que a imagem no aparece.



O JS ficou assim:

Código:

// FOTO DE CAPA
        if (window.location.pathname.indexOf('/u') == 0) {
            $(document).ready(function () {
                // Link Imagem Capa
                var fbcapa = $('#profile_field_13_1 .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><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.mod-login-avatar img').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='https://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();
                });
            });
        }

Olá @J0kerzinha,

ele não tem pra versão do meu fórum

O código é compatível para todas as versões excepto a AwesomeBB. Qual o problema que esta a ter? O aparecimento da imagem na capa?


Atenciosamente,
tikky.

Lá no tutorial tem só pra PHPBB3, PHPBB2, PUNBB e INVISION.

Mas sim, o problema é que a imagem n aparece

olá

tente as instruções fornecidas aqui para sua versão
https://ajuda.forumeiros.com/t117357-perfil-com-foto-de-capa

Eu ja tinha seguido esse tutorial antes de abrir a ajuda, mas fiz novamente só para ter certeza que não fiz nada errado e mesmo assim a imagem da capa não aparece.

Código:

// FOTO DE CAPA
        if (window.location.pathname.indexOf('/u') == 0) {
            $(document).ready(function () {
                // Link Imagem Capa
                var fbcapa = $('#profile_field_13_1 .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><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.mod-login-avatar img').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='https://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();
                });
            });
        }

ok, preciso perguntar para ter certeza
você criou um campo de perfil para a foto da capa? e se sim, você preencheu com um URL de imagem

Boa noite.

Skouliki escreveu:ok, preciso perguntar para ter certeza
você criou um campo de perfil para a foto da capa? e se sim, você preencheu com um URL de imagem

Você precisa publicar o ID do campo que criou, porque eu acessei o seu fórum e vejo apenas o campo "Mudança" conforme está tratando neste tópico. Publique o perfil e reveja os passos do tutorial.

Resposta anterior:

Eu refiz os passos que indiquei no tópico sugerido por Skouliki, e a capa funcionou normalmente. Queira ler novamente o tópico indicado, também seguir o tutorial indicado e tentar novamente.

Em caso de dúvidas, queira nos contatar novamente.

Atenciosamente,
Shek

Eu criei o campo para foto da capa sim:

Olá! Este campo não aparece para membros verem, e talvez seja por isso que seu código não consegue ler a existência dele (conforme citei na imagem que carreguei na mensagem anterior).

Ele está configurado assim:

Olá!

Então, se analisar o código da sua mensagem:

Código:

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

O ID do campo que definiu não existe no HTML. O correto é #field_id1 .field_uneditable. Você tentou dessa forma?

O resultado pra mim foi:

Atenciosamente,
Shek

uai, que esquisito. Pra mim não tinha dado esse id não kkkkkkkk mas funcionou, muito obrigada!