[PLUGIN] PostBit

  Olá á todos os usuários. Trago um Plugin este é o PostBit ou Cover de Perfil que pode trazer uma nova visão de estilização do perfil de seus usuários em seu fórum/comunidade. A princípio abrange apenas os perfis de postagens em tópicos, permitindo que seus usuários agreguem imagens com diversos formatos (permitidos pelo administrador) em seus perfis de postagem, este plugin é inspirado em outros fóruns pela internet.

1. Instalação (plugin):
Painel administrativo    Módulos    HTML e Javascript    Gestão dos códigos Javascript    Criar um novo Javascript
O "Investimento" selecione "Nos tópicos".

2. Instalação (campo de perfil):

Painel administrativo    Usuários & Grupos    Perfis    "Clique no sinal de +"   
Marque e preencha estas configurações, lembre-se que o nome do Campo deve ser "Banner" com maiúsculo no início, como na imagem a seguir:



Código:

Código:

/*
 *
 * Coded Flash157
 *
*/

(function ($) {
    $(document).ready(function () {
        var allowedImageFormats = ['gif', 'png', 'jpeg', 'jpg']; //formatos permitidos
        var allowedSites = ['imgur.com', 'tenor.com', '2img.net']; //sites permitidos

        var fieldContainer = $('.post-author-details .label span:contains("Banner")').closest('.post-author-details-field');

        fieldContainer.hide();
        setPostbitCoverBanners(allowedImageFormats, allowedSites);
    });

    function setPostbitCoverBanners(allowedFormats, allowedSites) {
        $('.post-wrap').each(function () {
            var $post = $(this);
            var bannerUrl = $post.find('.post-author-details-field:contains("Banner") dd').text().trim();

            if (isValidFormat(bannerUrl, allowedFormats) && isValidSite(bannerUrl, allowedSites)) {
                $post.find('.postbit_cover').css('background-image', 'url(' + bannerUrl + ')');
            }
        });
    }

    function isValidFormat(url, allowedFormats) {
        var extension = url.split('.').pop().toLowerCase();
        return allowedFormats.includes(extension);
    }

    function isValidSite(url, allowedSites) {
        var hostname = new URL(url).hostname.toLowerCase();
        return allowedSites.some(function (site) {
            return hostname.includes(site);
        });
    }

})(jQuery);


CSS (estilio):

Código:

.postbit_cover {
    opacity: .5;
    position: absolute;
    z-index: 0;
    top: 0px;
    bottom: 0;
    left: 0px;
    right: 0px;
    width: auto;
    max-height: 202px;
    background-size: cover!important;
}
.postbit_cover:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(to bottom,transparent,#fff);
}

Demonstração:


Observações: este Plugin funciona na versão AwesesomeBB, versões menores não é funcional no momento. Não hesite em pedir ajuda ou sugerir melhorias e adições.

Até mais