Añadiendo logos en la sección del pie de página

Desarrollador
1

Hola,
Me gustaría añadir los logotipos de las universidades que apoyan el foro que gestiono: https://fspm.discourse.group

Como puedes ver en la parte inferior, he conseguido añadirlos, sin embargo, me gustaría:

  • añadir un enlace a cada logotipo
  • espaciarlos
  • mantener la proporción original del logotipo de Gotinga que por alguna razón se modificó

Escribí esto en el pie de página:

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

y esto en CSS

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

Prueba este CSS:

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

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

Puedes añadir un enlace haciéndolo: <a href="https://..."> <img... /> </a>

2 Me gusta
3

¡El truco de CSS funciona, gracias!
El enlace que todavía no consigo que funcione…

Intenté lo siguiente en el pie de página pero no funciona… (estoy probando en el tercer 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 me gusta
4

hmmm tal vez intente https:// en lugar de http://? pero eso parece que debería funcionar :thinking:

5

Es correcto, pero es posible que también necesites ajustar el CSS:

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

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

Asegúrate de usar https como indicó Lilly y cambia los dos primeros enlaces:

<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 me gusta
6

Inserté lo siguiente y ahora incluso los logotipos han desaparecido:

<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%;
    }
}
1 me gusta
7

¿Por qué tienes los espacios y las barras invertidas al final de las etiquetas de imagen HTML?

8

¿Te refieres al final de cada fila donde se llaman los logotipos? Realmente no lo sé, solo copié y pegué código de otros.

9

Tu HTML es correcto.

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

Prueba con este CSS en su lugar:

.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 me gusta
10

este código me funcionó y acabo de probarlo.

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

pero tendrás que averiguar la parte del tamaño de la imagen.

11

No estoy seguro de si es porque estás usando un tema diferente, pero el CSS de la imagen no me parece bueno. :thinking:

lo que veo

image
image761×328 26 KB

1 me gusta
12

La verdad es que no me convence mucho :grin:

tiene que haber una mejor manera de hacer esto… :thinking:

1 me gusta
13

Tengo curiosidad por saber por qué elegiste esta ruta en lugar de simplemente colocar el HTML en la sección del pie de página de un tema.

Puse esto en la sección Footer de un tema en blanco y funcionó bien.

EDITAR CSS/HTML Pie de página:

    <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

Lo siento, pero nada me funciona… Creo que tus soluciones funcionan, así que supongo que estoy haciendo algo mal.
Literalmente copio y pego los códigos en la sección de componentes, ya sea en el pie de página (código HTML) o en la sección CSS. Y funcionó bien para la solución básica sin enlaces…

También intenté modificar la sección del pie de página del tema con el consejo de @Lilly, pero tampoco me funciona…

1 me gusta
15

¿es tu foro el enlace en tu perfil? quiero echar un vistazo.

1 me gusta
16

¡sí lo es!

17

ok, eché un vistazo y pude hacer que los enlaces funcionaran en las herramientas de desarrollo. pero cuando apliqué el código, cambia las dimensiones de la imagen por alguna razón. pero si usas el código que te di en mi última publicación y lo pones en el código de tu pie de página, debería funcionar. eliminaría ese código CSS, incluido el div class. una vez que hayas eliminado las cosas de CSS, simplemente copia y pega el código que te di en la sección del pie de página de la sección EDITAR CSS/HTML.

ve a tu componente de tema (o preferiblemente crea uno nuevo como hice yo):

IMG_3470
IMG_34701132×1441 123 KB

pega este código exacto en las secciones de las pestañas CSS y pie de página como esto:

Pestaña CSS:

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

Pestaña Pie de página:

<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 fue el resultado en mi foro. también verifiqué de forma independiente que cada imagen enlaza a la URL correcta:

IMG_3468
IMG_34682048×814 207 KB

si quieres hacerlas más pequeñas, simplemente edita el width=“300” de cada imagen a algo más pequeño. si quieres espaciarlas, puedes usar el espacio en blanco no rompible html &nbsp; entre el código html de las imágenes enlazadas.

18

Sugeriría evitar las etiquetas HTML obsoletas y reemplazarlas con un <div> con la propiedad text-align: center;. :slight_smile:

1 me gusta
19

Sí, solo intentaba hacerlo lo más fácil posible sin CSS para que funcionara en su sitio. Estoy de acuerdo y actualicé mi publicación. Gracias. :slight_smile:

20

ok, creo que hay un problema al escalar al tamaño correcto.
Las imágenes aparecen solo a un tamaño específico, que es demasiado pequeño. Si intento tamaños más grandes, las imágenes desaparecen.

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