在页脚部分添加Logo

开发
1

您好，
我想添加支持我管理的论坛的大学的标志：https://fspm.discourse.group

正如您在底部看到的，我已经设法添加了它们，但是我想：

  • 为每个标志添加链接
  • 调整它们之间的间距
  • 保持哥廷根标志的原始比例，因为它不知何故被修改了

我在页脚中写了：

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

并在 CSS 中写了：

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

试试这个 CSS：

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

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

你可以通过这种方式添加链接：<a><img ... /></a>

2 个赞
3

CSS 技巧奏效了，谢谢！
我仍然无法管理链接

我在页脚尝试了以下代码，但它不起作用……（我正在测试第三个徽标）

<div>
    <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 个赞
4

hmmm, 也许可以试试用 https:// 而不是 http://？ 但看起来它应该可以工作 :thinking:

5

它是正确的，但您可能还需要调整 CSS：

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

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

请确保使用 Lilly 所述的 https 并更改前两个链接：

<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 个赞
6

我插入了以下内容，现在连徽标都消失了：

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

您的 HTML 图像标签末尾为什么会有空格和反斜杠？

8

您是指在调用徽标的每一行的末尾吗？我不太清楚——我只是从其他人那里复制粘贴了一些代码。

9

您的 HTML 是正确的。

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

尝试使用此 CSS：

.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 个赞
10

这段代码对我来说是有效的，我刚刚测试过。

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

但你需要自己解决图片尺寸调整的问题。

11

我不确定是不是因为你使用了不同的主题，但图片 CSS 看起来不太好。:thinking:

我看到的样子

image
image761×328 26 KB

1 个赞
12

说实话，我不太喜欢其中大部分 :grin:

一定有更好的方法来做这件事…… :thinking:

1 个赞
13

想知道你为什么选择这种方式，而不是直接将 HTML 放在主题的页脚部分？
我将它放在了一个空白主题的“页脚”部分，并且运行正常。
编辑 CSS/HTML 页脚：

    <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

抱歉，但对我来说，什么都不起作用……我相信你的解决方案有效，所以我想是我自己做错了。
我只是将代码复制粘贴到组件部分，无论是在页脚（html 代码）还是 CSS 部分。对于没有链接的基本解决方案，它运行正常……

我还尝试按照 @Lilly 的建议修改主题页脚部分，但对我来说也不起作用……

1 个赞
15

您的论坛是您个人资料中的链接吗？我想去看看。

1 个赞
16

是的，没错！

17

好的，我查看了一下，能够在开发者工具中使链接生效。但当我应用代码时，不知何故会改变图像的尺寸。但如果你使用我上次帖子中给你的代码，并将其放入你的页脚代码中，应该就能正常工作。我建议移除 CSS 代码，包括 div 类。移除 CSS 部分后，只需将我给你的代码复制并粘贴到“编辑 CSS/HTML”部分的页脚区域。

转到你的主题组件（或者最好创建一个新的，就像我做的那样）：

IMG_3470
IMG_34701132×1441 123 KB

将这段代码精确地粘贴到 CSS 和页脚选项卡部分，如下所示：

CSS 选项卡：

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

页脚选项卡：

<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

这是我在我的论坛上得到的结果。我也独立验证了每个图像都链接到正确的 URL：

IMG_3468
IMG_34682048×814 207 KB

如果你想让它们变小，只需将每个图像的 width="300" 编辑为更小的值。如果你想让它们之间有间距，可以在链接图像的 HTML 代码之间使用 HTML 不间断空格 &nbsp;。

18

我建议避免使用已弃用的 HTML 标签，并用一个带有 text-align: center; 属性的 <div> 来替换它。 :slight_smile:

1 个赞
19

是的，我只是想尽可能简单地让它在他的网站上运行，而无需任何 CSS。但我同意，并且更新了我的帖子。谢谢。:slight_smile:

20

好的，我试过了，但似乎在缩放到合适尺寸时存在问题。
图像只显示在特定尺寸，太小了。如果我尝试更大的尺寸，图像就会消失

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