Hinzufügen von Logos im Fußzeilenbereich

[Michele_Butturini]

Hallo,
ich möchte die Logos der Universitäten, die das von mir verwaltete Forum unterstützen, hinzufügen: https://fspm.discourse.group

Wie Sie unten sehen können, ist es mir gelungen, sie hinzuzufügen, aber ich möchte:

• jedem Logo einen Link hinzufügen
• sie mit Abstand versehen
• die ursprüngliche Proportion des Göttinger Logos beibehalten, die aus irgendeinem Grund verändert wurde

Ich habe dies im Footer geschrieben:

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

und dies in CSS

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

[Arkshine]

Versuchen Sie dies mit CSS:

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

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

Sie können einen Link hinzufügen, indem Sie Folgendes tun: <a href="https://..."> <img ... /> </a>

[Michele_Butturini]

Der CSS-Trick funktioniert, danke!
Den Link bekomme ich aber immer noch nicht hin

Ich habe Folgendes im Footer versucht, aber es funktioniert nicht… (ich teste das dritte 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 vielleicht versuchen Sie es mit https:// anstelle von http://? aber das sieht so aus, als sollte es funktionieren

[Arkshine]

Es ist korrekt, aber Sie müssen möglicherweise auch das CSS anpassen:

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

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

Stellen Sie sicher, dass Sie https verwenden, wie von Lilly angegeben, und ändern Sie die beiden ersten 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>

[Michele_Butturini]

Ich habe Folgendes eingefügt und jetzt sind sogar die Logos verschwunden:

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

[Lilly (Lillian Louis)]

Warum haben Sie die Leerzeichen und Backslashes am Ende Ihrer HTML-Bild-Tags?

[Michele_Butturini]

Meinen Sie am Ende jeder Zeile, wo die Logos aufgerufen werden? Ich weiß es nicht wirklich – ich habe nur Code von anderen kopiert.

[Arkshine]

Ihr HTML ist korrekt.

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

Versuchen Sie es stattdessen mit diesem CSS:

.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)]

Dieser Code hat für mich funktioniert und ich habe ihn gerade getestet.

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

aber Sie müssen den Teil mit der Bildgröße herausfinden.

[Arkshine]

Ich bin mir nicht sicher, ob es daran liegt, dass Sie ein anderes Thema verwenden, aber das Bild-CSS sieht für mich nicht gut aus.

was ich sehe

[Lilly (Lillian Louis)]

Ehrlich gesagt, vieles davon gefällt mir nicht

Es muss einen besseren Weg geben, das zu tun…

[Lilly (Lillian Louis)]

Ich bin neugierig, warum Sie diesen Weg gewählt haben, anstatt die HTML-Datei einfach in den Fußzeilenbereich eines Themes zu setzen?
Ich habe dies in den Footer-Bereich eines leeren Themes eingefügt und es hat einwandfrei funktioniert.

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]

Es tut mir leid, aber nichts funktioniert für mich… Ich glaube, dass Ihre Lösungen funktionieren, also gehe ich davon aus, dass ich etwas falsch mache. Ich kopiere und füge die Codes buchstäblich in den Komponentenabschnitt entweder in den Footer (HTML-Code) oder in den CSS-Abschnitt ein. Und es funktionierte gut für die einfache Lösung ohne Links… Ich habe auch versucht, den Theme-Footer-Bereich mit dem Rat von @Lilly zu ändern, aber auch das funktioniert bei mir nicht…

[Lilly (Lillian Louis)]

Ist Ihr Forum der Link in Ihrem Profil? Ich möchte es mir ansehen.

[Michele_Butturini]

Ja, das ist es!

[Lilly (Lillian Louis)]

ok ich habe nachgesehen und konnte Links in den Entwicklertools zum Laufen bringen. Aber wenn ich den Code angewendet habe, ändert er aus irgendeinem Grund die Bildabmessungen. Aber wenn Sie den Code verwenden, den ich Ihnen in meinem letzten Beitrag gegeben habe, und ihn in Ihren Footer-Code einfügen, sollte er funktionieren. Ich würde diesen CSS-Code entfernen, einschließlich der div-Klasse. Sobald Sie die CSS-Sachen entfernt haben, kopieren Sie einfach den Code, den ich Ihnen gegeben habe, und fügen Sie ihn in den Footer-Bereich des Abschnitts EDIT CSS/HTML ein.

Gehen Sie zu Ihrer Theme-Komponente (oder erstellen Sie vorzugsweise eine neue, wie ich es getan habe):

Fügen Sie diesen genauen Code in die CSS- und Footer-Registerkartenabschnitte ein, wie folgt:

CSS-Tab:

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

Footer-Tab:

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

Dies war das Ergebnis auf meinem Forum. Ich habe unabhängig überprüft, dass jedes Bild auf die richtige URL verlinkt:

Wenn Sie sie kleiner machen möchten, bearbeiten Sie einfach die Breite=“300” für jedes Bild auf etwas Kleineres. Wenn Sie sie abständen möchten, können Sie das HTML-Leerzeichen   zwischen dem HTML-Code der verlinkten Bilder verwenden.

[Canapin (Coin-coin le Canapin)]

@Lilly

`

`

Ich würde vorschlagen, veraltete HTML-Tags zu vermeiden und sie durch ein <div> mit der Eigenschaft text-align: center; zu ersetzen.

[Lilly (Lillian Louis)]

Ja, ich habe versucht, es so einfach wie möglich zu machen, ohne CSS, nur damit es auf seiner Website funktioniert. Ich stimme aber zu und habe meinen Beitrag aktualisiert. Danke.

[Michele_Butturini]

ok, ich habe es versucht, aber ich glaube, es gibt ein Problem mit der Skalierung auf die richtige Größe.
Die Bilder erscheinen nur in einer bestimmten Größe – die zu klein ist. Wenn ich größere Größen versuche, verschwinden die Bilder