Adicionando logotipos na seção do rodapé

Dev
1

Olá,
Gostaria de adicionar os logotipos das universidades que apoiam o fórum que eu gerencio: https://fspm.discourse.group

Como você pode ver na parte inferior, consegui adicioná-los, no entanto, gostaria de:

  • adicionar um link para cada logotipo
  • espaçá-los
  • manter a proporção original do logotipo de Göttingen que por algum motivo foi modificada

Escrevi isto no rodapé:

<div class="custom-footer-image">
    <img src="upload://3lfj0glW4Qjc2cMHAC7dBVglghP.png" alt="Footer Image">
    
    <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    
    <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
</div>

e isto em CSS

.custom-footer-image {
    display: flex;
    justify-content: center;
    
    img {
        max-width: 30%;
    }
}
2

Tente este CSS:

.custom-footer-image {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    img {
        max-width: 30%;
        height: 100%;
    }
}

Você pode adicionar um link fazendo isso: <a href="https://..."> <img... /> </a>

2 curtidas
3

O truque de CSS funciona, obrigado!
O link que ainda não consigo gerenciar

tentei o seguinte no rodapé, mas não funciona.. (estou testando no terceiro logo)

<div class="custom-footer-image">
    <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
    
    <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    
    <a href="http://algorithmicbotany.org/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image"></a>
</div>
1 curtida
4

hmmm talvez tente https:// em vez de http://? mas parece que deve funcionar :thinking:

5

Está correto, mas você pode precisar ajustar o CSS também:

.custom-footer-image {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    a {
        max-width: 30%;
        height: 100%;
    }
}

Certifique-se de usar https como Lilly mencionou e altere os dois primeiros links:

<div class="custom-footer-image">
    <a href="https://" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
    </a>

    <a href="https://" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    </a>

    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
    </a>
</div>
1 curtida
6

Inseri o seguinte e agora até os logotipos desapareceram:

<div class="custom-footer-image">
    <a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
    </a>

    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    </a>
    
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
    </a>
</div>

.custom-footer-image {
    display: flex;
    justify-content: center;
    align-content: center; 
    gap: 1rem;
    
    a {
        max-width: 30%;
        height: 100%;
    }
}
1 curtida
7

por que você tem os espaços e barras invertidas nas extremidades das suas tags de imagem HTML?

8

Você quer dizer no final de cada linha onde os logotipos são chamados? Eu realmente não sei - eu apenas copiei e colei algum código de outras pessoas

9

Seu HTML está correto.

<div class="custom-footer-image">
    <a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
    </a>

    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    </a>
    
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
    </a>
</div>

Tente com este CSS em vez disso:

.custom-footer-image {
    display: flex;
    justify-content: center;
    align-items: center; 
    flex-wrap: wrap;
    gap: 2rem;

    a {
        width: max(20vw, 220px);
        
        img {
            width: 100%;
        }
    }
}

image
image1700×385 88.6 KB

image
image620×389 43.1 KB

1 curtida
10

este código funcionou para mim e acabei de testá-lo.

.custom-footer-image {
    display: flex;
    justify-content: center;
    align-content: center;
    gap: 2rem;

    img {
        max-width: 20%;
        height: 100%;
    }
}

<div class="custom-footer-image">
    <a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
    </a>

    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    </a>

    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
    </a>
</div>

mas você precisará descobrir a parte do dimensionamento da imagem.

11

Não tenho certeza se é porque você está usando um tema diferente, mas o CSS da imagem não parece bom para mim. :thinking:

o que eu vejo

image
image761×328 26 KB

1 curtida
12

Sinceramente, nada disso me agrada muito :grin:

Tem que haver um jeito melhor de fazer isso… :thinking:

1 curtida
13

curioso para saber por que você seguiu este caminho em vez de simplesmente colocar o HTML na seção de rodapé de um tema?

coloquei isso na seção Footer de um tema em branco e funcionou bem.

EDITAR CSS/HTML Rodapé:

    <center>
    <a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" width=300>
    </a>

    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" width=300>
    </a>
    
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" width=300>
    </a></center>
14

Desculpe, mas nada está funcionando para mim… Acredito que suas soluções funcionam, então acho que estou fazendo algo errado.
Estou literalmente copiando e colando os códigos na seção de componentes, seja no rodapé (código HTML) ou na seção CSS. E funcionou bem para a solução básica sem links…

Também tentei modificar a seção de rodapé do tema com o conselho de @Lilly, mas também não funcionou para mim…

1 curtida
15

o seu fórum é o link no seu perfil? quero dar uma olhada.

1 curtida
16

sim, é!

17

ok, dei uma olhada e consegui fazer os links funcionarem nas ferramentas de desenvolvedor. mas quando apliquei o código, ele altera as dimensões da imagem por algum motivo. mas se você usar o código que te dei no meu último post e colocá-lo no seu código de rodapé, deve funcionar. eu removeria esse código CSS, incluindo a classe div. depois de remover as coisas de CSS, basta copiar e colar o código que te dei na seção de rodapé da seção EDITAR CSS/HTML.

vá para o seu componente de tema (ou prefira criar um novo como eu fiz):

IMG_3470
IMG_34701132×1441 123 KB

cole este código exato nas seções de aba CSS e rodapé como isto:

Aba CSS:

.footer_align {
    display: flex;
    justify-content: center;
}

Aba Rodapé:

<div class="footer_align">
    <a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" width="300">
    </a>  
    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" width="300">
    </a>  
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" width="300">
    </a>
</div>

IMG_3477
IMG_34771536×785 129 KB

IMG_3479
IMG_34791536×999 258 KB

este foi o resultado no meu fórum. verifiquei independentemente que cada imagem vincula ao URL correto também:

IMG_3468
IMG_34682048×814 207 KB

se você quiser torná-los menores, basta editar o width=“300” para cada imagem para algo menor. se você quiser espaçá-los, pode usar o espaço em branco não quebrável html &nbsp; entre o código da imagem vinculada.

18

Sugiro evitar tags HTML obsoletas e substituí-las por uma <div com a propriedade text-align: center;. :slight_smile:

1 curtida
19

sim, estava apenas tentando torná-lo o mais fácil possível sem nenhum CSS, apenas para fazê-lo funcionar no site dele. Concordo e atualizei minha postagem. obrigado. :slight_smile:

20

Ok, tentei, mas acho que há um problema com o dimensionamento para o tamanho certo.
As imagens aparecem apenas em um tamanho específico - que é muito pequeno. Se eu tentar tamanhos maiores, as imagens desaparecem

Screenshot 2023-06-07 at 18.50.31
Screenshot 2023-06-07 at 18.50.312292×842 88.7 KB

Screenshot 2023-06-07 at 18.50.37
Screenshot 2023-06-07 at 18.50.372290×818 38.1 KB

Screenshot 2023-06-07 at 18.50.56
Screenshot 2023-06-07 at 18.50.562724×1352 164 KB