# 欢迎链接 Banner 主题组件，含照片

**URL:** <https://meta.discourse.org/t/welcome-link-banner-theme-component-with-photos/264966>\
**Category:** Feature\
**Tags:** welcome-link-banner\
**Created:** [2023年五月14日 21:46 UTC](https://meta.discourse.org/t/welcome-link-banner-theme-component-with-photos/264966 "2023-05-14T21:46:08Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)\
**Post date:** [2023年五月14日 21:46 UTC](https://meta.discourse.org/t/welcome-link-banner-theme-component-with-photos/264966/1 "2023-05-14T21:46:08Z")

</div>

您好，我想为这个主题组件请求两项功能：

1. 提供放置 100x100 方形照片的选项，这对于展示纪念照片（已故成员、已故偶像、捐款用户）、宣传活动照片（接种疫苗、为潜在客户进行癌症筛查）和活动照片（圣诞节、新年、复活节）非常有用，并配有标题和小段文字。

2. TL4 用户和版主也能编辑照片和文字，这样他们也可以放置当时的纪念、宣传活动或其他照片。这样，放置照片和文字会更容易，不只依赖于管理员。

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [2023年五月14日 23:20 UTC](https://meta.discourse.org/t/welcome-link-banner-theme-component-with-photos/264966/2 "2023-05-14T23:20:40Z")

</div>

@mecay 你好，还有一个名为“多功能横幅”的主题组件，它也可能对你有帮助，但它不允许版主更改。我在我的网站上使用了它，它有更多的空间用于文本和照片。

> [@Versatile Banner](https://meta.discourse.org/t/versatile-banner/109133):
>
> discourse2Summary Versatile Banner adds a customizable banner to your site.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/versatile-banner)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-versatile-banner](https://github.com/discourse/discourse-versatile-banner)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features This theme component is an evolution of previous banner efforts. The goal is to provide more ease and flexibility through the use…

版主（或自定义组）无法更改主题 - 因此我不确定你所请求的是否可行，但如果可行，将需要一些自定义编程，因此我建议将此主题发布到[市场](https://meta.discourse.org/c/marketplace/14)类别。

你也可以尝试使用“添加精选主题”代码，将一个主题用作标题，你的版主可以更改该主题。也可以用一些 CSS 来调整外观。🤷‍♀️

[https://meta.discourse.org/t/add-a-featured-topic-list-to-your-discourse-homepage/132949](https://meta.discourse.org/t/add-a-featured-topic-list-to-your-discourse-homepage/132949)

---

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [2023年五月15日 16:17 UTC](https://meta.discourse.org/t/welcome-link-banner-theme-component-with-photos/264966/5 "2023-05-15T16:17:05Z")

</div>

你好 Daniela，

> [@mecay](#):
>
> 1- 放置 100X100 像素方形照片的选项

欢迎横幅字段接受 HTML 代码，因此，您已经可以放置图像并根据需要使用 CSS 进行调整。

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/9/2/292664ad1a1c07c8848265149f59a0fa85680d43.png)

 ![image](https://global.discourse-cdn.com/meta/original/4X/6/8/a/68af3b10eb11d9f485c73e44c83f885f6ecec6a9.png)

---

<div class="post-metadata">

**Author:** ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)\
**Post date:** [2023年五月18日 18:36 UTC](https://meta.discourse.org/t/welcome-link-banner-theme-component-with-photos/264966/6 "2023-05-18T18:36:00Z")

</div>

非常感谢您告知我这一点，它在这里效果很好，桌面版的 CSS 代码完美运行，但移动版 CSS 代码中的图片没有居中，每部手机的位置都不同

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/c/c/7ccac3ea874f23eb06ffa404a12cb407ccb53904.jpeg)

---

<div class="post-metadata">

**Author:** ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)\
**Post date:** [2023年六月14日 17:30 UTC](https://meta.discourse.org/t/welcome-link-banner-theme-component-with-photos/264966/7 "2023-06-14T17:30:08Z")

</div>

我已经使用了这个多功能横幅，但我发现它的 UI 不如“欢迎链接横幅”的 UI 有趣，除此之外，它还有点复杂（对于像我的版主这样不懂 HTML 或 CSS 的人来说更是如此）。我在欢迎链接横幅上做了一个改编，但它看起来很糟糕，让我头疼不已。

---

<div class="post-metadata">

**Author:** ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)\
**Post date:** [2023年六月14日 17:35 UTC](https://meta.discourse.org/t/welcome-link-banner-theme-component-with-photos/264966/8 "2023-06-14T17:35:08Z")

</div>

我使用了你给我的这段代码，它的运行方式符合我的要求，但它给我带来了很多问题，也给尝试使用该插件的其他人带来了问题

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/9/9/799bf05ab34ad877bab8dc818218e6bb80b807b1.jpeg)

每次我上传照片时，我都必须在 Photoshop 中调整它的大小，因为它不会自动将其裁剪成正方形，而且如果我输入一个较长的标题，它就会消失，如果我输入一个较长的消息正文，文本和照片就会向上移动，总之，我总是必须修复它，除此之外，有时即使修复了，也会出现一些错误，文本会跑到横幅的另一侧，真让人头疼

---

<div class="post-metadata">

**Author:** ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)\
**Post date:** [2023年六月14日 17:35 UTC](https://meta.discourse.org/t/welcome-link-banner-theme-component-with-photos/264966/9 "2023-06-14T17:35:39Z")

</div>

![image](https://global.discourse-cdn.com/meta/original/4X/9/8/1/981d36b25321fdc8f16f265f92cb8d33acb3fea5.png)

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [2023年六月14日 17:47 UTC](https://meta.discourse.org/t/welcome-link-banner-theme-component-with-photos/264966/10 "2023-06-14T17:47:33Z")

</div>

> [@danielabc](#):
>
> 每次上传照片时，我都必须在 Photoshop 中调整照片大小，因为它不会自动将其裁剪成方形。

只是好奇——您是期望 Discourse 会自动为您裁剪和调整照片大小吗？您有 Photoshop，它的用途就是这个，所以在上传到论坛之前，您应该在 Photoshop 中完成照片格式设置。

---

<div class="post-metadata">

**Author:** ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)\
**Post date:** [2023年六月14日 17:49 UTC](https://meta.discourse.org/t/welcome-link-banner-theme-component-with-photos/264966/11 "2023-06-14T17:49:46Z")

</div>

我正在使用翻译器，也许翻译有些脱离语境，但在通用横幅中，当你放入谷歌的任何图片时，它都会自动调整，不会被错误地缩放，而在欢迎链接横幅中，它会被表达出来。

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [2023年六月14日 17:51 UTC](https://meta.discourse.org/t/welcome-link-banner-theme-component-with-photos/264966/12 "2023-06-14T17:51:17Z")

</div>

我明白了你的意思。我建议无论如何先在 Photoshop 中格式化照片。

你可以随时构建自己的组件（或分叉现有的组件）来满足你的需求。有时这比试图适应另一个组件更容易。

---

<div class="post-metadata">

**Author:** ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)\
**Post date:** [2023年六月14日 17:53 UTC](https://meta.discourse.org/t/welcome-link-banner-theme-component-with-photos/264966/13 "2023-06-14T17:53:01Z")

</div>

我总是这样，最大的问题是照片和文字的位置，如果我多写一点，照片就会往上移，文字就会往下移，在手机和桌面上调整它总是很疯狂和压力很大。
