Aggiunta di loghi nella sezione piè di pagina

Sviluppatore
1

Ciao,
vorrei aggiungere i loghi delle università che supportano il forum che gestisco: https://fspm.discourse.group

Come puoi vedere in fondo, sono riuscito ad aggiungerli, tuttavia vorrei:

  • aggiungere un link a ciascun logo
  • distanziarli
  • mantenere le proporzioni originali del logo di Gottinga che per qualche motivo sono state modificate

Ho scritto questo nel footer:

<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 questo in CSS

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

Prova questo CSS:

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

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

Puoi aggiungere un link facendo così: <a href="https://..."> <img... /> </a>

2 Mi Piace
3

Il trucco CSS funziona, grazie!
Il link che ancora non riesco a gestire

ho provato quanto segue nel footer ma non funziona… (sto testando sul terzo 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 Mi Piace
4

hmmm forse prova https:// invece di http://? ma sembra che dovrebbe funzionare :thinking:

5

È corretto, ma potrebbe essere necessario modificare anche il CSS:

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

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

Assicurati di usare https come indicato da Lilly e di modificare i primi due link:

<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 Mi Piace
6

Ho inserito quanto segue e ora sono scomparsi anche i loghi:

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

perché hai gli spazi e i backslash alla fine dei tuoi tag immagine html?

8

Intendi alla fine di ogni riga dove vengono richiamati i loghi? Non lo so davvero, ho solo copiato e incollato del codice da altri.

9

Il tuo HTML è corretto.

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

Prova con questo CSS invece:

.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 Mi Piace
10

questo codice ha funzionato per me e l’ho appena testato.

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

ma dovrai capire la parte del ridimensionamento dell’immagine.

11

Non sono sicuro se sia perché stai usando un tema diverso, ma il CSS dell’immagine non mi sembra buono. :thinking:

cosa vedo

image
image761×328 26 KB

1 Mi Piace
12

A dire il vero, non mi convince molto :grin:

ci deve essere un modo migliore per farlo… :thinking:

1 Mi Piace
13

curioso sul perché tu abbia scelto questo approccio invece di inserire semplicemente l’html nella sezione del footer di un tema?
Ho inserito questo nella sezione Footer di un tema vuoto e ha funzionato bene.

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

Mi dispiace ma niente funziona per me… Credo che le tue soluzioni funzionino, quindi immagino che stia facendo qualcosa di sbagliato.
Sto letteralmente copiando e incollando i codici nella sezione dei componenti, sia nel piè di pagina (codice HTML) sia nella sezione CSS. E ha funzionato bene per la soluzione di base senza collegamenti…

Ho anche provato a modificare la sezione del piè di pagina del tema con il consiglio di @Lilly ma non funziona nemmeno per me…

1 Mi Piace
15

Il tuo forum è il link nel tuo profilo? Voglio dare un’occhiata.

1 Mi Piace
16

sì, lo è!

17

ok ho dato un’occhiata e sono riuscito a far funzionare i link negli strumenti per sviluppatori. ma quando ho applicato il codice, per qualche motivo ha modificato le dimensioni dell’immagine. ma se usi il codice che ti ho dato nel mio ultimo post e lo inserisci nel codice del tuo footer, dovrebbe funzionare. rimuoverei quel codice CSS, inclusa la classe div. una volta rimosse le cose CSS, copia e incolla semplicemente il codice che ti ho dato nella sezione footer della sezione MODIFICA CSS/HTML.

vai al tuo componente tema (o preferibilmente creane uno nuovo come ho fatto io):

IMG_3470
IMG_34701132×1441 123 KB

incolla questo codice esatto nelle sezioni delle schede CSS e footer come segue:

Scheda CSS:

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

Scheda Footer:

<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

questo è stato il risultato sul mio forum. ho verificato in modo indipendente che ogni immagine collega all’URL corretto:

IMG_3468
IMG_34682048×814 207 KB

se vuoi renderle più piccole, modifica semplicemente width=“300” per ogni immagine in qualcosa di più piccolo. se vuoi distanziarle, puoi usare lo spazio vuoto non interrompibile html &nbsp; tra il codice html delle immagini collegate.

18

Suggerirei di evitare i tag HTML deprecati e di sostituirli con un <div> con la proprietà text-align: center;. :slight_smile:

1 Mi Piace
19

sì, stavo solo cercando di renderlo il più semplice possibile senza alcun css per farlo funzionare sul suo sito. sono d’accordo però e ho aggiornato il mio post. grazie. :slight_smile:

20

Ok, ho provato ma penso ci sia un problema con il ridimensionamento alla giusta dimensione.
Le immagini appaiono solo a una dimensione specifica, che è troppo piccola. Se provo dimensioni maggiori, le immagini scompaiono

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