 |
摘要 | 在编辑器工具栏中添加图像网格和对齐按钮 |
 |
存储库 | https://github.com/Lillinator/image-alignment |
 |
安装指南 | 如何安装主题或主题组件 |
 |
首次使用 Discourse 主题？ | Discourse 主题使用入门指南 |
Install this theme component
此主题组件在帖子编辑器工具栏中插入按钮，用于将上传的图像左对齐或右对齐文本、居中对齐或使用新实现的网格标签将多个图像对齐成网格。网格将根据图像数量和尺寸自动调整图像大小，并且还会链接到上传的较大版本。按钮/对齐功能可以在一个帖子中使用多次，以创建各种布局。适用于桌面和移动视图。
使用方法是，只需单击所需的图像对齐按钮，然后将图像上传到生成的标签之间的指定位置（由占位符文本标记，可在组件设置中编辑）。
请注意，此组件的网格部分用于对齐上传的图像，而不是图像链接（其他对齐选项将适用于链接图像）。我从 @Steven 有用的 MD Composer Extras 组件借用了一些基本代码框架。
待办事项：为每个按钮添加适当的图标选择器。
已添加用于居中图像的按钮。
很棒的工具！您能展示一下它在编辑器中的样子吗？
谢谢你 @piffy！ 
你的意思是带工具栏的编辑器吗？那就是带有网格示例的第一个截图。我将添加一些关于图片周围其他对齐代码的编辑器截图。
感谢您为 Image Alignment 提供的此解决方案
很棒的组件！我正想问类似的问题！
你真是个摇滚明星，制作了有价值的附加组件！
谢谢你，Dan，我很感激你的赞美，很高兴你觉得它们有用
不客气。请问您是如何让“Align left”等内容显示为粗体的？我尝试使用 Markdown，但它显示的是 Markdown 代码。
我看到使用 ### 可以实现，但标准的粗体使用
**Text**
似乎不起作用。
抱歉，我之前尝试时它不起作用。不确定有什么变化。这真的很棒，谢谢。
只需在第一个文本块和第二个 <div-data-theme...> 标签之间插入一些 <br><br> HTML 标签，直到它正确地间隔开。我将找时间在其中编程一个硬回车或类似的东西。
好的，请添加足够的 <br> 标签，直到文本与相应的图片对齐。
再次感谢您的帮助和超赞的 Theme component！
我认为这不是一种可靠的方法，因为内容的高度会因窗口大小的不同而异。
清除浮动元素，当旁边有任意内容时，会很棘手。我不确定这里有什么明显的解决方案……[1]
这在 WordPress 编辑器中也是一个长期存在的问题。
人们倾向于依赖一些不自然的解决方法，使用那些唯一目的是重置先前浮动元素的 clear: both; 属性的元素。
直到 don 出现 
↩︎
也许你可以探索除浮动（float）之外的其他解决方案。
我尝试用 flex 替换 float…… 
还没深入研究。
[data-theme-image=left] {
display: flex;
float: none;
}
[data-theme-image=right] {
display: flex;
float: none;
justify-content: flex-end;
}
[data-theme-image=left] {
display: flex;
float: none;
}
[data-theme-image=right] {
display: flex;
float: none;
flex-direction: row-reverse;
}
或者可以看看网格布局（grid layout）？不过我对它一无所知。我的 CSS 知识已经过时好几年了。 
哈哈，网格选项是这个主题组件的一部分 
我也绝对认为我的更老 
。
那是什么？饼干？我分不清它们是土豆还是饺子还是某种饼干。 
尝试了那些 flex 对齐属性的解决方案，但都无法找到一个始终可行的办法。不过，我确实找到了一个可行的变通方法。如果你将每个图片-文本部分都设置为块引用，它就会将它们分开（但会包含文本的引用格式）：
编辑器/预览器：
结果：
这是因为<blockquote>在Discourse中包含clear: both;。
