Adding logos in footer section

Development

AI-generated summary

Adding Logos in Footer Section

Michele_Butturini wanted to add university logos with links to the footer section of their forum. Initially, they managed to add the logos but faced issues with spacing, linking, and image proportion.

Arkshine provided a CSS solution to improve spacing and proportion, but the linking issue persisted. Lilly suggested using https instead of http for the links, and Arkshine provided a revised CSS code to accommodate the links.

However, Michele_Butturini still faced issues with image sizing and linking. Lilly suggested placing the HTML code in the footer section of a theme, which worked for her. Michele_Butturini tried this approach but encountered issues with image sizing, particularly in Chrome.

Lilly updated the code, and Canapin suggested avoiding deprecated HTML tags. Michele_Butturini tried the updated code but still faced issues.

Canapin provided a revised code that used a wrap class and relative sizing in percentages. This solution worked for Michele_Butturini, and the logos now scale with the window size on both desktop and mobile devices.

The final solution involved:

  • HTML code with a wrap class and no width attributes for the images
  • CSS code with display: flex, justify-content: center, align-items: center, and gap: 1rem for the container, and max-width: 100% for the images

The logos now display correctly on both desktop and mobile devices, with the desired scaling and linking functionality.

1

Hi,
I would like to add the logos of the universities supporting the forum I manage: https://fspm.discourse.group

As you can see at the bootom, I manage to add them however I would like to:

  • add a link to each logo
  • spacing them
  • keeping the original proportion of Gottingen logo that for some reasons was modfied

I wrote this in 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>

and this in CSS

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

Try this CSS:

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

You can add a link doing so: <a href="https://..."><img... /></a>

3

The CSS trick works, thanks!
The link I still cannot manage

i tried the follwing in footer but it doesn’t work.. (i am testing on the third 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>
4

hmmm maybe try https:// instead of http:// ? but that looks like it should work :thinking:

5

It’s correct, but you might need to adjust the CSS as well:

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

Make sure to use https as stated Lilly and change the two first 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>
6

I inserted the following and now even the logos are gone:

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

why do you have the spaces and backslashes in the ends of your html image tags?

8

Do you mean at the end of every row where the logos are called? I don’t really know - I just copy pasted some code from others

9

Your HTML is 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>

Try with this CSS instead:

.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

10

this code worked for me and i just tested it.

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

but you’ll need to figure out the image sizing part.

11

I’m unsure if it’s because you’re using a different theme, but the image css doesn’t look good to me. :thinking:

what I see

image
image761×328 26 KB

12

TBH, not a lot of it looks good to me :grin:

there has to be a better way to do this… :thinking:

13

curious as to why you went this route instead of just placing the html in the footer section of a theme?

i put this in the Footer section of a blank theme and it worked fine.

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

Sorry but nothing is working for me… I believe that your solutions works, so I guess I am doing something wrong.
I am literally copying paste the codes in the component section either on the footer (html code) or the CSS section. And it worked fine for the basic solution without links…

I also tryied to modify the theme footer section with the advise of @Lilly but it also doesn’t work for me…

15

is your forum the link in your profile? i want to have a look.

16

yes it is!

17

ok i had a look and i was able to make links work in dev tools. but when i applied the code it changes the image dimensions for some reason. but if you use the code i gave you in my last post and put it in your footer code it should work. i would remove that css code, including the div class. once you have removed the CSS stuff, just copy and paste the code i gave you in the footer section of the EDIT CSS/HTML section.

go to your theme component (or preferably create a new one like i did):

IMG_3470
IMG_34701132×1441 123 KB

paste this exact code in the css and footer tabs sections like this:

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>

IMG_3477
IMG_34771536×785 129 KB

IMG_3479
IMG_34791536×999 258 KB

this was the result on my forum. i independently verified that each image links to the proper URL as well:

IMG_3468
IMG_34682048×814 207 KB

if you want to make them smaller, just edit the width=“300” for each image to something smaller. if you want to space them, you can use the html non-breaking space &nbsp; in between the linked images html code.

18

I’d suggest avoiding deprecated HTML tags and replacing it with a <div> with a text-align: center; property. :slight_smile:

19

yea was just trying to make it as easy as possible without any css just to get it to work on his site. i agree though and updated my post. thanks. :slight_smile:

20

ok I tried but I think there is an issue with scaling to the right size.
The immages appear just at a specific size - that is too small. if I try bigger sizes the images disappear

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