Adding logos in footer section

Michele_Butturini · June 6, 2023, 8:00am

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

Arkshine · June 6, 2023, 12:11pm

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>

Michele_Butturini · June 6, 2023, 3:38pm

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>

Lilly · June 6, 2023, 3:41pm

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

Arkshine · June 6, 2023, 3:47pm

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>

Michele_Butturini · June 6, 2023, 5:09pm

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

Lilly · June 6, 2023, 5:20pm

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

Michele_Butturini · June 6, 2023, 6:23pm

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

Arkshine · June 6, 2023, 6:37pm

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

Lilly · June 6, 2023, 7:05pm

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.

Arkshine · June 6, 2023, 7:22pm

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

what I see

Lilly · June 6, 2023, 7:26pm

TBH, not a lot of it looks good to me

there has to be a better way to do this…

Lilly · June 6, 2023, 7:36pm

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>

Michele_Butturini · June 7, 2023, 7:04am

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…

Lilly · June 7, 2023, 2:33pm

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

Michele_Butturini · June 7, 2023, 3:03pm

yes it is!

Lilly · June 7, 2023, 3:50pm

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

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>

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

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   in between the linked images html code.

Canapin · June 7, 2023, 4:03pm

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

Lilly · June 7, 2023, 4:31pm

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.

Michele_Butturini · June 7, 2023, 4:53pm

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

Topic		Replies	Views
Feedback on new :hamburger: and user menus ux	231	24615	July 15, 2016
Easy Responsive Footer theme-component official , easy-responsive-footer	85	34993	May 3, 2024
A Graceful theme for Discourse theme official	56	40910	March 11, 2024
Ability to add a custom section of links to the sidebar feature sidebar	15	3177	February 18, 2023
Help us test a new composer style ux testing	75	8264	December 13, 2017

Adding logos in footer section

Related Topics