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%;
}
}
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>
2 Likes
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>
1 Like
Lilly
June 6, 2023, 3:41pm
4
hmmm maybe try https://
instead of http://
? but that looks like it should work
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>
1 Like
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%;
}
}
1 Like
Lilly
June 6, 2023, 5:20pm
7
why do you have the spaces and backslashes in the ends of your html image tags?
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
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%;
}
}
}
1 Like
Lilly
June 6, 2023, 7:05pm
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.
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
1 Like
Lilly
June 6, 2023, 7:26pm
12
TBH, not a lot of it looks good to me
there has to be a better way to do this…
1 Like
Lilly
June 6, 2023, 7:36pm
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>
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…
1 Like
Lilly
June 7, 2023, 2:33pm
15
is your forum the link in your profile? i want to have a look.
1 Like
Lilly
June 7, 2023, 3:50pm
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):
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
(Coin-coin le Canapin)
June 7, 2023, 4:03pm
18
Lilly:
<center>
I’d suggest avoiding deprecated HTML tags and replacing it with a <div>
with a text-align: center;
property.
1 Like
Lilly
June 7, 2023, 4:31pm
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.
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