Ajout de logos dans la section du pied de page

[Michele_Butturini]

Salut,
Je voudrais ajouter les logos des universités qui soutiennent le forum que je gère : https://fspm.discourse.group

Comme vous pouvez le voir en bas, j’ai réussi à les ajouter, cependant je voudrais :

• ajouter un lien vers chaque logo
• les espacer
• conserver la proportion originale du logo de Göttingen qui a été modifiée pour une raison quelconque

J’ai écrit ceci dans le pied de page :

<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>

et ceci en CSS

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

[Arkshine]

Essayez ce CSS :

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

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

Vous pouvez ajouter un lien comme ceci : <a href="https://..."> <img... /> </a>

[Michele_Butturini]

Le truc CSS fonctionne, merci !
Le lien que je n’arrive toujours pas à gérer

j’ai essayé ce qui suit dans le pied de page mais ça ne fonctionne pas… (je teste sur le troisième 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>

[Lilly (Lillian Louis)]

hmmm peut-être essayer https:// au lieu de http:// ? mais cela semble fonctionner

[Arkshine]

C’est correct, mais vous devrez peut-être ajuster également le CSS :

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

Assurez-vous d’utiliser https comme indiqué par Lilly et changez les deux premiers liens :

<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>

[Michele_Butturini]

J’ai inséré ce qui suit et maintenant même les logos ont disparu :

<div>
    <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%;
    }
}

[Lilly (Lillian Louis)]

Pourquoi avez-vous des espaces et des barres obliques à la fin de vos balises d’image HTML ?

[Michele_Butturini]

Voulez-vous dire à la fin de chaque ligne où les logos sont appelés ? Je ne sais pas vraiment - j’ai juste copié-collé du code d’autres personnes.

[Arkshine]

Votre HTML est correct.

<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>

Essayez avec ce CSS à la place :

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

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

[Lilly (Lillian Louis)]

Ce code a fonctionné pour moi et je viens de le tester.

.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/0da449a3a30e30eaa4467e961

[Arkshine]

Je ne suis pas sûr si c’est parce que vous utilisez un thème différent, mais le CSS de l’image ne me semble pas bon.

ce que je vois

[Lilly (Lillian Louis)]

Franchement, rien de tout ça ne me plaît beaucoup

il doit y avoir une meilleure façon de faire ça…

[Lilly (Lillian Louis)]

curieux de savoir pourquoi vous avez choisi cette approche au lieu de simplement placer le code HTML dans la section du pied de page d’un thème ?

J’ai placé cela dans la section Footer d’un thème vierge et cela a fonctionné correctement.

EDIT CSS/HTML Footer :

    <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>

[Michele_Butturini]

Désolé, mais rien ne fonctionne pour moi… Je crois que vos solutions fonctionnent, donc je suppose que je fais quelque chose de mal.
Je copie-colle littéralement les codes dans la section des composants, soit dans le pied de page (code HTML), soit dans la section CSS. Et cela a bien fonctionné pour la solution de base sans liens…

J’ai également essayé de modifier la section du pied de page du thème avec les conseils de @Lilly, mais cela ne fonctionne pas non plus pour moi…

[Lilly (Lillian Louis)]

votre forum est-il le lien dans votre profil ? je veux y jeter un œil.

[Michele_Butturini]

oui c’est le cas !

[Lilly (Lillian Louis)]

ok j’ai regardé et j’ai réussi à faire fonctionner les liens dans les outils de développement. mais lorsque j’ai appliqué le code, il a modifié les dimensions de l’image pour une raison quelconque. mais si vous utilisez le code que je vous ai donné dans mon dernier message et que vous le placez dans le code de votre pied de page, cela devrait fonctionner. je supprimerais ce code CSS, y compris la classe div. une fois que vous avez supprimé les éléments CSS, copiez et collez simplement le code que je vous ai donné dans la section du pied de page de la section EDIT CSS/HTML.

allez dans votre composant de thème (ou préférez en créer un nouveau comme je l’ai fait) :

collez ce code exact dans les sections des onglets css et pied de page comme ceci :

Onglet CSS :

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

Onglet Pied de page :

<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>

ce fut le résultat sur mon forum. j’ai vérifié indépendamment que chaque image renvoie bien à l’URL appropriée :

si vous voulez les rendre plus petites, modifiez simplement width=“300” pour chaque image par une valeur plus petite. si vous voulez les espacer, vous pouvez utiliser l’espace insécable html   entre le code html des images liées.

[Canapin (Coin-coin le Canapin)]

@Lilly

`

`

Je suggérerais d’éviter les balises HTML obsolètes et de les remplacer par un <div> avec une propriété text-align: center;.

[Lilly (Lillian Louis)]

oui, j’essayais juste de le rendre aussi facile que possible sans CSS pour que cela fonctionne sur son site. je suis d’accord cependant et j’ai mis à jour mon message. merci.

[Michele_Butturini]

Ok, j’ai essayé mais je pense qu’il y a un problème avec la mise à l’échelle à la bonne taille.
Les images apparaissent juste à une taille spécifique - qui est trop petite. Si j’essaie des tailles plus grandes, les images disparaissent